Javascript File Type Checker

Question

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>

Note that file type check on front-end is like the worst option for a check. Instead, you may want to use the `accept` attribute, which will at least be user-friendly in not even proposing invalid files to your users. But if you really want to check for files types, then do it server-side, bad guys won't use your front-end code to upload bad files. If it's for front-end use only, then [check magic numbers](https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload). — Kaiido, Nov 03 '18 at 12:06
Thanks, I already have back-end file checking, but I'm doing it via client-side code to stop most users from being able to upload a file to the server before getting the response — Oscar, Nov 03 '18 at 20:04

score 0 · Accepted Answer · answered Nov 03 '18 at 11:36

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.

thanks for the help! I was able to get it working with your assistance. — Oscar, Nov 03 '18 at 20:09

Javascript File Type Checker

1 Answers1