Question

I am right now working with this image upload from HERE. Instead of having 3 separate image upload inputs is there a way to just have one that will take maximum 4 requests?

<script>
(function($) {

$(document).ready(function() {

    // it must be checked if there are div.imageForms because the
    // uploaderPreviewer javascript may be not included and produce an error
    if ($('div.imageForms').length) {

    $.uploaderPreviewer.formsCount = 4;

        $('div.imageForms').append($.uploaderPreviewer.createImageForms());

        // the images are populated if the admin form is to edit, and not
        // to insert
        if ($('div.imageForms[images]').length) {
            var imageFilenames = $('div.imageForms[images]').attr('images').split(',');
            $.uploaderPreviewer.populateImages(imageFilenames);
            $('div.imageForms[images]').removeAttr('images');
        }
    }

    $('#buttonSave').click(function() {
        var itemId = $(this).attr('itemId');
        if (itemId) {
            $.itemForm.update(itemId);
        }
        else {
            $.itemForm.insert();
        }
    });

});

})(jQuery);



</script>

Answer 1

If you don’t care about IE then you can use a multiple file input an let users select no more than 4 files. I added a simple fallback for IE in which it will only get one file, so you might want to use multiple inputs just for IE. Damn Internet Explorer!

<input id="files" type="file" multiple />

.

var isValidFiles = function ($input, max) {
  var files = $input[0].files || [{ name: $input.val() }]
  return files.length <= max
}

.

if ( isValidFiles($('#files'), 4) ) { ... }