Question

I have a file upload group in a form and I’d like to be able to specify how many are required. This is the html:

<!-- file upload group -->
<div class="mcFileUpGroup" mcminselect="2">
  <span class="mcLegend">File Upload Group: (required)</span>
  <input name="fileUploads[]" type="file">
  <input name="fileUploads[]" type="file">
  <input name="fileUploads[]" type="file">
</div>

Then in JQuery:

$('.mcFileUpGroup').each(function() {
    $('.mcFileUpGroup input[type=file]').each(function() {
            if($(this).val() == '') { 
                // do something
            }
            else{
                // do something else
            }
    });
});

This however does not allow me to specify the number of required uploads. For example: At least two is required. How can I do this?

Thank you!

Answer 1

With your current each loop, you already verify whether the field is blank or not. From that, you can declare a variable that you will increment every time a file is to be uploaded. Keep count of that and verify the if the final count ends up being under two files.

$('.mcFileUpGroup').each(function() {
    var fileCount = 0;
    $('input[type=file]', this).each(function() {
            if($(this).val() == '') { 
                // do something
            }
            else{
                // do something else
                fileCount++;
            }
    });
    if (fileCount < 2) {
      window.alert("You need to select at least 2 files");
      return false;
    }
});