Get total size of combined uploaded files with JQuery/Javascript

Question

I have a page where a user can upload a document. There is also a button to add more documents (as seen per image). I want to check as each file that has been added or removed from the upload section to make sure that the size does not exceed 10 MB. So if a user uploads 3 separate files of 2 MB and then adds a file which is 5 MB, the submit button will disable until one of the files are removed because it has gone over the 10 MB limit. The rows can be added dynamically, so I was doing it by class and trying to sum the running total. Here is what I have so far, available at JFIDDLE ``` ``` The issue is, that if I add a file and then remove it, it does not reflect the current running total. ``` $("document").r…

Accepted Answer

The logic in your code can be simplified by just incrementing a single counter within the `each()` loop. You can then check the total once the loop has completed to see if the combined file size is valid. Try this:

```
$(".upload-file").on('change', function() {
  var totalSize = 0;

$(".upload-file").each(function() {
    for (var i = 0; i < this.files.length; i++) {
      totalSize += this.files[i].size;
    }
  });

var valid = totalSize <= 10485759;
  if (!valid) 
    alert('Over Max Size');

$("#submitBtn").prop("disabled", !valid);
});
```

Note that this method will also work with `multiple` file inputs, as the jsFiddle below shows:

Updated fiddle

Get total size of combined uploaded files with JQuery/Javascript

Solution

Problem