I have a multiple file upload input. I'm trying to validate the size for each file. It works kind of but depends on which order the files are selected. I hate javascript & I suck at it, please help.

/

$('input[type="file"]').change(function(){
    var imageSizeArr = 0;
    var imageSize = document.getElementById('blah');
    var imageCount = imageSize.files.length;
    for (var i = 0; i < imageSize.files.length; i++)
    {
         var imageSize = imageSize.files[i].size;
         if (imageSize > 5000000) {
             $('#test').text('3');
             var imageSizeArr = 1;
         }
         if (imageSizeArr == 1)
         {
             $('.element').text('files too big');
         }
         else if (imageSizeArr == 0)
         {
             $('.element').text('files not too big');
         }
     }
 }); 

I have a multiple file upload input. I'm trying to validate the size for each file. It works kind of but depends on which order the files are selected. I hate javascript & I suck at it, please help.

http://jsfiddle/2u9kq7fe/1/

$('input[type="file"]').change(function(){
    var imageSizeArr = 0;
    var imageSize = document.getElementById('blah');
    var imageCount = imageSize.files.length;
    for (var i = 0; i < imageSize.files.length; i++)
    {
         var imageSize = imageSize.files[i].size;
         if (imageSize > 5000000) {
             $('#test').text('3');
             var imageSizeArr = 1;
         }
         if (imageSizeArr == 1)
         {
             $('.element').text('files too big');
         }
         else if (imageSizeArr == 0)
         {
             $('.element').text('files not too big');
         }
     }
 }); 

• javascript
• jquery

3 Answers 3

You are defining a reference to input field:

var imageSize = document.getElementById('blah');

and later in the for loop you redefine it again, because:

for (var i = 0; i < imageSize.files.length; i++) {
    var imageSize = imageSize.files[i].size;

Remember that there is no block-scope in javascript, so var imageSize in the loop affects previously defined value.

This is your problem. Pick different name for size in the loop and it will work.

try like below example;

<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
            if (typeof ($("#fileUpload")[0].files) != "undefined") {
                var size = parseFloat($("#fileUpload")[0].files[0].size / 1024).toFixed(2);
                alert(size + " KB.");
            } else {
                alert("This browser does not support HTML5.");
            }
        });
    });
</script>

All credits go to @dfsq but as a js beginner it took me some time to figure out the vague description of what he meant with "Pick different name for size" so for all the confused ones here is the working code:

html:

<input type=file name=img[] id=files accept=".jpg, .JPG, .jpeg, .JPEG" multiple=multiple>

js:

$('input#files').change(function(){
  var imageSizeArr = 0;
  var imageArr = document.getElementById('files');
  var imageCount = imageArr.files.length;
  var imageToBig = false;
  for (var i = 0; i < imageArr.files.length; i++){
     var imageSize = imageArr.files[i].size;
     var imageName = imageArr.files[i].name;
     if (imageSize > 5000000){
         var imageSizeArr = 1;
     }
     if (imageSizeArr == 1){
         console.log(imageName+': file too big\n');
         imageToBig = true;
     }
     else if (imageSizeArr == 0){
         console.log(imageName+': file ok\n');
     }
  }
  if(imageToBig){
    //give an alert that at least one image is to big
    window.alert("At least one of your images is too large to process, see the console for exact file details.");
    }
});