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>
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) ) { ... }