I have been struggling with this for a couple of days. I do not know why it keeps saying that my file is not a type of blob. Any help?
HTML BELOW
<form style="padding-top:10px;" method="post" action="upload.php" enctype="multipart/form-data">
<input style="padding-bottom: 20px;" type="file" id="file" name="file" onchange="fileValidation(this);">
<div id="responsefromfileupload" value=""></div>
</form>
JAVASCRIPT BELOW
function fileValidation(reader) {
var file = $("input[type=file]").get(0).files[0];
var fileInput = document.getElementById('file');
var filePath = fileInput.value;
// Allowing file type
var allowedExtensions =
/(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
$("#responsefromfileupload").replaceWith(`<div style="width: 50%;" class="alert alert-danger" role="alert">
This image file type is not accepted!</div>`);
}
if (allowedExtensions.exec(filePath)) {
var reader = new FileReader();
reader.onload = function () {
$("#previewImg").attr("src", reader.result);
$("#previewImg").attr("margin-left", "25%");
}
}
reader.readAsDataURL(file);
}
function fileValidation(event) {
var file = event.target.files[0];
var fileInput = document.getElementById('file');
var filePath = fileInput.value;
// Allowing file type
var allowedExtensions =
/(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
$("#responsefromfileupload").replaceWith(`<div style="width: 50%;" class="alert alert-danger" role="alert">
This image file type is not accepted!</div>`);
}
if (allowedExtensions.exec(filePath)) {
var reader = new FileReader();
reader.onload = function () {
$("#previewImg").attr("src", reader.result);
$("#previewImg").attr("margin-left", "25%");
}
}
reader.readAsDataURL(file);
}<form style="padding-top:10px;" method="post" action="upload.php" enctype="multipart/form-data">
<input style="padding-bottom: 20px;" type="file" id="file" name="file" onchange="fileValidation(event);">
<div id="responsefromfileupload" value=""></div>
</form>The template you can use - remove space between < and !--
< !-- begin snippet: js hide: false console: true babel: false -->
< !-- language: lang-js -->
< !-- language: lang-html -->
< !-- language: lang-css -->
< !-- end snippet -->