jQuery: Dynamically add file upload fields in form and validate total size

Question

Is it possible to use jQuery to calculate/validate/restrict total upload size of dynamically added file fields? The form will be sending the content as an email copy, so it should be limiting the total upload size to eg. 20MB or so. The backend validation is no problem (by PHP).

The validation could either be done 'on the fly' or when hitting submit.

Consider the following code:

<div class="input_fields_wrap">
  <a href="#" class="add_field_button">+ Add</a>
  <div>
    <input type="file" name="attachment[]">
  </div>
</div>

And the jQuery:

$(document).ready(function() {
  var max_fields = 10;
  var wrapper = $(".input_fields_wrap");
  var add_button = $(".add_field_button");

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

Fiddle: https://jsfiddle.net/yyqnwfb9/1/

Any input on how to solve this would be much appreciated.

Update: New Fiddle with implemented solution: https://jsfiddle.net/yyqnwfb9/2/

Answer 1

You can use the HTML5 File API to get the size. For example, to get total size in bytes of all files in the page:

 function getTotal() { var total = 0; $(':file').each(function() { if (this.files && this.files[0]) { total += this.files[0].size; } }); return total; } $(function() { var maxSize = 3 * 1000 * 1000 ; // ~3MB $(document).on('change', ':file', function() { if (getTotal() > maxSize) { // Clear field $(this).val(''); // Display error? $('#total').append(' Too big'); } else { // Update total $('#total').text(getTotal()); } }); }); 

 input { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="attachment[]"> <input type="file" name="attachment[]"> <input type="file" name="attachment[]"> <input type="file" name="attachment[]"> <input type="file" name="attachment[]"> <strong>Total Bytes: <span id="total">0</span></strong> 

Answer 2

i have set file size limit of 3MB in upload function

 $(document).ready(function() { var max_fields = 10; var wrapper = $(".input_fields_wrap"); var add_button = $(".add_field_button"); var x = 1; var uploadField = document.getElementById("file"); uploadField.onchange = function() { if(this.files[0].size > 307200){ alert("File is too big!"); this.value = ""; } else{ $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<div><input type="file" name="attachment[]"/><a href="#" class="remove_field">Remove</a></div>'); } }); $(wrapper).on("click", ".remove_field", function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }) } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input_fields_wrap"> <a href="#" class="add_field_button">+ Add</a> <div> <input type="file" id="file" name="attachment[]"> </div> </div>