Get the total size of merged downloaded files using jQuery / Javascript

Question

I have a page where the user can upload a document. There is also a button for adding additional documents (as seen in the image).

I want to check how each file that has been added or removed from the download section to make sure the size does not exceed 10 MB.

So, if the user uploads 3 separate files of 2 MB in size, and then adds a file of 5 MB in size, the submit button will be disabled until one of the files is deleted, because he switched to the 10 MB limit.

Lines can be added dynamically, so I did it by class and tried to sum the current amount.

Here is what I still had in JFIDDLE

<form class="upload-form"> <input class='upload-file' type="file" id="upload0"> <input class='upload-file' type="file" id="upload1"> <input class='upload-file' type="file" id="upload2"> <input class='upload-file' type="file" id="upload3"> <input id='submitBtn' type=submit> </form> 

The problem is that if I add a file and then delete it, it will not reflect the current current amount.

 $("document").ready(function() { var fileArr = []; $(".upload-file").on('change',function() { var fileInput = $('.upload-file'); var fileSize = fileInput.get(0).files[0].size; fileArr.push(fileSize); var totalSize = 0; for (var i in fileArr) { alert(fileArr[i]); totalSize = totalSize + fileArr[i]; } if (totalSize > 10485759) { alert('Over Max Size'); $(submitBtn).prop("disabled",true); } }); }); 

I also tried this path, but could not reset when the file was deleted. JFIDDLE-2

Answer 1

The logic of your code can be simplified by simply increasing one counter in the each() loop. You can then check the total amount as soon as the loop completes to find out if the total file size is valid. Try the following:

 $(".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 input files, as shown in jsFiddle below:

Updated script

Answer 2

Here the fiddle works http://jsfiddle.net/9bhcB/1214/

Change your javascript as:

 $("document").ready(function(){ $(".upload-file").on('change',function() { var fileArr = []; $.each($(".upload-file"), function(index, value) { input = value; file = input.files[0]; fileArr.push(file.size); var totalSize = 0; for (var i in fileArr) { totalSize = totalSize + fileArr[i]; } if (totalSize > 10485759) { alert('Over Max Size'); $("#submitBtn").prop("disabled",true); } else { $("#submitBtn").prop("disabled",false); } }); }); }); 

Answer 3

A couple of things looking at your violin -

• fileInput.get (0) .files [0] .size; returns a value greater than 0 only if the file is added
• Because when the download item is “deleted” as in the de-selected one, all you get is an empty file array. So you will need to track the identifier of the files and their sizes and calculate the combined sizes of all the files based on this ...

This is how you get the id of the element "changed" -

 var elmId = $( this ).attr('id'); 

and you use this to track file sizes.

I forked your violin to do this job. Well here - http://jsfiddle.net/9bhcB/1226/

In addition, there are many quick and dirty JSs that you may need to clean up, but they do what you are looking for!

Good luck

Answer 4

An alternative solution for your code would be a single input, which allows you to upload multiple files at once. Then the collection of files can be slice -d up and summarized with a smaller function:

 $(function() { $('#file').on('change', function() { var total = [].slice.call(this.files).map(function(x) { return x.size || x.fileSize; }).reduce(function(a, b) { return a + b; }, 0); if (total > 10485759) { alert('Over Max Size'); $('#submitBtn').prop("disabled", true); } else { $('#submitBtn').prop("disabled", false); } $('#total').html('Total: ' + total + ' bytes'); }) }) 

 #total { padding: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="file" multiple="multiple" /> <button id="submitBtn">Submit Files</button> <div id="total"></div>