Gallery pictures upload all together, not one by one

[kaspy003]

Gallery pictures upload all together, not one by one, this case a server overload if images ar more than 10, it's should upload one by one!

[innostudio]

@kaspy003 that's strange, because the gallery example is having upload option activated (option that is uploading each file one by one over Ajax)

Example: https://innostudio.de/fileuploader/documentation/examples/gallery/

[innostudio]

No response.

[kaspy003]

@kaspy003 that's strange, because the gallery example is having upload option activated (option that is uploading each file one by one over Ajax)

Example: https://innostudio.de/fileuploader/documentation/examples/gallery/

No, here is sample video about gallery, where all files is uploading simultaneously: https://youtu.be/yZG1Pe8r-rk

And here is how it should, one by one: https://youtu.be/XKd39AASf8A

In first video you can see how all the images are uploaded simultaneously and if the files are large and many, than php can't handle with all requests and will overload the server!

I hope you understand ;)

[innostudio]

@kaspy003 thank you for the videos. This is happening because we are checking the image size. If you don't need this...

Here is the solution:

1. replace onItemShow and onImageLoaded:

onItemShow: function(item, listEl, parentEl, newInputEl, inputEl) {
    var api = $.fileuploader.getInstance(inputEl),
        color = api.assets.textToColor(item.format),
        $plusInput = listEl.find('.fileuploader-input'),
        $progressBar = item.html.find('.progress-holder');

    // put input first in the list
    $plusInput.prependTo(listEl);

    // color the icon and the progressbar with the format color
    item.html.find('.type-holder .fileuploader-item-icon')[api.assets.isBrightColor(color) ? 'addClass' : 'removeClass']('is-bright-color').css('backgroundColor', color);

    // add waiting status
    if (item.choosed) {
        item.html.find('.progress-holder').show().find('span').text('Waiting...');
        item.image.hide();
    }
},
onImageLoaded: function(item, listEl, parentEl, newInputEl, inputEl) {
    var api = $.fileuploader.getInstance(inputEl);

    // add icon
    item.image.find('.fileuploader-item-icon i').html('')
        .addClass('fileuploader-icon-' + (['image', 'video', 'audio'].indexOf(item.format) > -1 ? item.format : 'file'));
},

2. remove the following part from beforeSend:

// check the image size first (onImageLoaded)
if (item.format == 'image' && !item.reader.done)
    return false;

[kaspy003]

@kaspy003 thank you for the videos. This is happening because we are checking the image size. If you don't need this...

Here is the solution:

1. replace onItemShow and onImageLoaded:

onItemShow: function(item, listEl, parentEl, newInputEl, inputEl) {
    var api = $.fileuploader.getInstance(inputEl),
        color = api.assets.textToColor(item.format),
        $plusInput = listEl.find('.fileuploader-input'),
        $progressBar = item.html.find('.progress-holder');

    // put input first in the list
    $plusInput.prependTo(listEl);

    // color the icon and the progressbar with the format color
    item.html.find('.type-holder .fileuploader-item-icon')[api.assets.isBrightColor(color) ? 'addClass' : 'removeClass']('is-bright-color').css('backgroundColor', color);

    // add waiting status
    if (item.choosed) {
        item.html.find('.progress-holder').show().find('span').text('Waiting...');
        item.image.hide();
    }
},
onImageLoaded: function(item, listEl, parentEl, newInputEl, inputEl) {
    var api = $.fileuploader.getInstance(inputEl);

    // add icon
    item.image.find('.fileuploader-item-icon i').html('')
        .addClass('fileuploader-icon-' + (['image', 'video', 'audio'].indexOf(item.format) > -1 ? item.format : 'file'));
},

2. remove the following part from beforeSend:

// check the image size first (onImageLoaded)
if (item.format == 'image' && !item.reader.done)
    return false;

Thanks, your solution working great!