Simple Javascript loop for checking total size of multiple file

Question

How can I implement this code into a loop for 20 files? They will have id="myFile1", "myFile2" etc.

<script type="text/javascript">
var myFile = document.getElementById('myFile'); 
myFile.addEventListener('change', function() {
 alert(this.files[0].size); 
});
</script>

My first idea was to do 20 scripts, but I don' really think that it would be good solution, I really prefer clean code.

I tried this... but doesn't work for some reason - the second file reports "NaN" instead of file size in bytes.

<script type="text/javascript">
var myFile = document.getElementById('myFile'); 
myFile.addEventListener('change', function() {
 var totalSize = this.files[0].size;
 alert(totalSize); 
});
</script>
<script type="text/javascript">
var myFile1 = document.getElementById('myFile1'); 
myFile1.addEventListener('change', function() {
 var totalSize = totalSize + this.files[0].size;
 alert(totalSize); 
});
</script>

I would also like to implement an IF conditional that would alert only if the totalSize were bigger than 7 MB, that means that I need the totalSize/(1024*1024) - easy to do, but not the loop .

Could you please help me building a working loop that would count the totalSize of all the files? myFile is an ID of input type="file" element.

Answer 1

Try and use following logic:

<script type="text/javascript">
 var totalSize=0;
 function checkSize() {
 totalSize = totalSize + this.files[0].size;
 alert(totalSize); //write logic to check size validation etc. here
 }
 for(var i=1;i<=20;i++)
 {
 var myFile = document.getElementById('myFile'+i); 
 myFile.addEventListener('change',checkSize);
 }
</script>

Answer 2

I don't know if I understood correctly what you need, but this could be your case: http://jsbin.com/ozadak/2/edit

CODE

 var totArray = [];
 for (var x = 1; x <= 5; x++) {
 var currFile = document.getElementById("myFile"+x);
 currFile.addEventListener('change', function(x){
 totArray[this.id] = parseInt(document.getElementById(this.id).value); //here goes file.size
 var currTot = 0;
 for(var key in totArray){
 currTot += totArray[key];
 }
 if(currTot > 10)
 alert("file sizes > 10 MB");
 });
 }

for simplicity I used some text input, to show how the loop works adding each input the same event. To test it, input an integer representing how many MB does your file weight, it should work.

Hope it helps, regards

• TeeJay: Thank you. However, this seems to be too complicated for me even if it's not. SanjeevRai's solution is a bit simpler and clearer. Could you help me correcting my syntax my "alert" condition? alert(''You have exceeded maximum file size upload limit. The size of your files is: ' + (totalSize/(1024*1024))+' MB. \n\ Please, delete your last attachment.'); I don't see what's wrong about this.
• BeNdErR: which error do you get? anyway, if the user removes a file from one of your inputs, the total size should decrease.. SanjeevRai's solution does not cover this case
• TeeJay: Already figured out, it was just doble '' instead of ' in the beginning. My bad. Apart from this, I think I have to try your code, it looks good!
• TeeJay: I tried to edit your code but I don't understand it from the line with parse. I suppose I have to write this.fils[0].size somewhere and set the limit somewhere but I don't see the units or something like that :/
• BeNdErR: instead of parseInt(...), there you should put the integer val for the file size. The limit is in this statement: "if(currTot > 10)". 10 is the size limit that rises the alert