Retrieve file size from multiple file uploads

Question

I have this code below

$("#btn_save_development").bind("click", function () {


    var devMainImgSize = parseFloat($("#dev_main_image")[0].files[0].size / 1024).toFixed(2);
    var devListingImg1Size = parseFloat($("#devListingImg1")[0].files[0].size / 1024).toFixed(2);
    var devListingImg2Size = parseFloat($("#devListingImg2")[0].files[0].size / 1024).toFixed(2);
    var devListingImg3Size = parseFloat($("#devListingImg3")[0].files[0].size / 1024).toFixed(2);
    var devListingImg4Size = parseFloat($("#devListingImg4")[0].files[0].size / 1024).toFixed(2);
    var devListingImg5Size = parseFloat($("#devListingImg5")[0].files[0].size / 1024).toFixed(2);
    var devListingImg6Size = parseFloat($("#devListingImg6")[0].files[0].size / 1024).toFixed(2);

    if(devMainImgSize > 800)
    {
        alert("The Main Listing Image too large. It should not be above 800KB. Please upload an image with a smaller size");
        return false;
    }

    if (devListingImg1Size > 800 || devListingImg2Size > 800 || devListingImg3Size > 800 || devListingImg4Size > 800 || devListingImg5Size > 800 || devListingImg6Size > 800) {
        alert("One or all of the Development Listing Image(s) is above 800KB. Please ensure none of the development listing images are larger than 800KB");
        return false;
    }
});

which i want to use to check the size of images being uploaded via the file uploads. The problem i am having is, if i try to check the size of file in just one file upload the code works and i see the Javascript alert but when i try to check for multiple files i get this error in my browser console Uncaught TypeError: Cannot read property 'size' of undefined . My question is, how can i check the file sizes of all the files in my file uploads? Thanks in advance

Answer 1

The issue is that if you do not have all of the input uploads filled with an image, then this error gets thrown. If you fill all of them, the error won't occur. You can create a function that checks whether the inputs are filled. Then if they aren't filled return a value of 0 . Otherwise return the size for the rest of the calculations you perform.

See the fiddle: https://jsfiddle.net/3xLLjko9/3/

$("#btn_save_development").bind("click", function () {

    var devMainImgSize = parseFloat(checkFilled($("#dev_main_image")) / 1024).toFixed(2);
    var devListingImg1Size = parseFloat(checkFilled($("#devListingImg1")) / 1024).toFixed(2);
    var devListingImg2Size = parseFloat(checkFilled($("#devListingImg2")) / 1024).toFixed(2);
    var devListingImg3Size = parseFloat(checkFilled($("#devListingImg3")) / 1024).toFixed(2);
    var devListingImg4Size = parseFloat(checkFilled($("#devListingImg4")) / 1024).toFixed(2);
    var devListingImg5Size = parseFloat(checkFilled($("#devListingImg5")) / 1024).toFixed(2);
    var devListingImg6Size = parseFloat(checkFilled($("#devListingImg6")) / 1024).toFixed(2);

    //FOR TESTING PURPOSES
    console.log(devMainImgSize);
    console.log(devListingImg1Size);
    console.log(devListingImg2Size);
    console.log(devListingImg3Size);
    console.log(devListingImg4Size);
    console.log(devListingImg5Size);
    console.log(devListingImg6Size);

    if(devMainImgSize > 800)
    {
        alert("The Main Listing Image too large. It should not be above 800KB. Please upload an image with a smaller size");
        return false;
    }

    if (devListingImg1Size > 800 || devListingImg2Size > 800 || devListingImg3Size > 800 || devListingImg4Size > 800 || devListingImg5Size > 800 || devListingImg6Size > 800) {
        alert("One or all of the Development Listing Image(s) is above 800KB. Please ensure none of the development listing images are larger than 800KB");
        return false;
    }
});

function checkFilled(ele){
  if(ele[0].files.length > 0){
    return ele[0].files[0].size;
  } else {
    return 0;
  }
}

Answer 2

Another approach could be to validate the files as the user selects them. You could accomplish this by listening for changes on the input.

$("#fileInput").on("change", processFiles);

var processFiles = function(event) {
  var files = event.target.files;
  //Loop through our files  
  for (var i = 0; i < files.length; i += 1) {
    var file = files[i]; 
    if(file.size / 1024 > 800){
          alert("file too big!");
    }
    //Build the File Info HTML  
    var fileInfo = ["<li>",
                     file.name,
                     "<span>",
                     file.size / 1024,
                     " kb</span>", 
                     "</li>"].join(''); 
    $("#list").append(fileInfo);
    reader.onload = loaded;
    reader.readAsDataURL(file);
  }
};

Here is a working fiddle.