I have a file extension checker that I have been working on, and I just cannot figure out why it won't work. I have it testing showing up a boolean equal value for whether the two values are equal or not. Instead it continues to say that the file I am uploading is not equal to the file types listed in the if statement even though the two value are exactly the same. Any help would be greatly appreciated
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('input[id="fileInput"]').onchange=validateSize;
})
function validateSize(event) {
var filesLength = event.target.files.length;
var filesSize = [];
var result = "";
var equal = null;
document.getElementById("fileBigAlert").innerHTML = "";
document.getElementById("fileExtAlert").innerHTML = "";
if (filesLength >= 10) {
document.getElementById("submitButton").disabled = true;
} else {
document.getElementById("submitButton").disabled = false;
}
for (i = 0; i < filesLength; i++) {
if (event.target.files[i].size > 2097152) {
document.getElementById("submitButton").disabled = true;
document.getElementById("fileBigAlert").innerHTML = '<div class="alert alert-warning" role="alert">'
+ event.target.files[i].name + ' is larger than 2MB</div>';
} else {
filesSize.push(event.target.files[i].size);
}
if (String(event.target.files[i].type) !== "image/png" || "image/jpeg" || "image/gif") {
equal = false;
//document.getElementById("submitButton").disabled = true;
//document.getElementById("fileExtAlert").innerHTML = '<div class="alert alert-warning" role="alert">'
// + event.target.files[i].name + ' Extension not allowed please choose a JPEG, JPG, GIF, or PNG file.</div>';
} else {
equal = true;
//filesSize.push(event.target.files[i].size);
}
}
console.log(event.target.files[0].type);
console.log(equal);
filesSize.forEach(function(item, index, array){
result += index + ": " + item + "<br/>";
});
document.getElementById("fileValidate").innerHTML = result;
}
The index goes as followed
<body>
<div class="container">
<div id="fileValidate"></div>
<div id="fileBigAlert"></div>
<div id="fileExtAlert"></div>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="userfile[]" id="fileInput" multiple>
<input type="submit" id="submitButton">
</form>
</div>
<script src="checkfile.js"></script>
The way you are comparing multiple values is incorrect. You have (string) !== (string) or (string) or (string) which would always equate to the boolean value of (string) !== (string) if it is true or the following (string) after the or (||). However, that following string value, "image/jpeg", will ALWAYS equal a true boolean value. In essence you are only matching the first entry ("image/png"). If the file is not a png type, the if statement will always return true and equal will always be false.
How you want to compare:
var ftMustMatch = ["image/png", "image/jpeg", "image/gif"];
if( ftMustMatch.indexOf(String(event.target.files[i].type).toLowerCase()) < 0 ) {
equal = false;
}
This can be read as "if the lowercased string value type of the file does not match any of the values of the array (the result will be less than zero), then set equal to false."
ftMustMatch is short for filetype must match.
Why toLowerCase? Just in case the value if ever brought in with different casing, it will still match the lowercase values in the array of values that you defined.