Javascript upload file size

Question

I need help with file size on upload. i'd like to add file maximum size 2MB.

I use javascript code and i'm not good with javascript so if you guys can add file size into my code. Thanks.

var _validFileExtensions = [".jpg", ".jpeg", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry,   " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}

@TonyRaoulIscaros can u share a good code for uploading files? — Hartman, Feb 16 '17 at 17:25
@TonyRaoulIscaros im usually using php but for upload files i want use javascript — Hartman, Feb 16 '17 at 17:27
http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php — Antoine Eskaros, Feb 16 '17 at 17:28
@Hartman http://php.net/manual/en/features.file-upload.php#114004 — GSerg, Feb 16 '17 at 17:31
If you really want use Client side validation, you certainly have to change this code a lot! It is really inefficient. (no offense, since you yourself admit you are new to JS). By inefficient I mean performance issues. Can I change your code a little bit as well?? — Syed Huzaifa Hassan, Feb 16 '17 at 17:42
@SyedHuzaifaHassan ye you can if you want to :) i will apreciate it :) — Hartman, Feb 16 '17 at 18:03

score 2 · Accepted Answer · answered Feb 16 '17 at 21:33

This is the code I ended up writing

It can still be optimized in various ways, so its open for any performance, semantic or refactoring edits. I am not an expert.

Code Explained

In var _maxFilsize you have to write size of max file size to be allowed in bytes.
Function Validate has parameter oForm which expects an HTML object, through which it can search for input fields.
Store all input elements in an array, arrInputs.
Store value of arrInputs[i].type in string form in variable inputType
Compare the value of inputType with different input types in if/else statements.
When condition is met, each block returns a function that validates the matched input field
Function validateImage takes an argument which is simply the input field's property that contains list of files selected by user, arrInputs[i].files.
In validateImage Function there is a for loop that iterates over the list of files and validates their type and size, and returns true or false depending upon validity of file.

Code

var _maxFilesize = 2000000;// in bytes
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    var inputType;
    var i = 0;
    var arrLength = arrInputs.length;
    for (i; i < arrLength; i++) {
        inputType =arrInputs[i].type.toString();
        if (inputType === "file"){
            return validateImage(arrInputs[i].files);//calls function for validating image
        }else if(inputType === "email"){
            //call email validating function
        }//add validation for more fields
    }
}
function validateImage(file){
    var j = 0;
    var NumberOfFiles = file.length;
    for(j; j< NumberOfFiles;j++){
        if ((file[j].type === "image/jpeg" || file[j].type === "image/png")&& (file[j].size)<= _maxFilesize){
            return true //or whatever you want to do here like calling a function to upadate view, or something
        }
        else{
            return false //or whatever you want to do here like calling a function to upadate view, or something
        }
    }
}

Javascript upload file size

1 Answers1

This is the code I ended up writing

Code Explained

Code