uzeeOnCodes uzeeOnCodes - 6 months ago 18
Javascript Question

Retrieve file size from multiple file uploads

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

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;
  }
}
Comments