trigger upload on filebatchselected strange behavior

[aliechti]

The problem occurs if someone selects two or more files. The "filebatchselected" gets triggered, but only one file gets uploaded. The state of the one uploaded file is not updated too, it stays on "not uploaded yet" but it is.

$input.fileinput({
    uploadUrl: $form.attr('action'),
    multiple: true,
    initialPreview: init.initialPreview,
    initialPreviewConfig: init.initialPreviewConfig,
    overwriteInitial: false,
    uploadAsync: true,
}).on('filebatchselected', function($input) {
    return function(event, numFiles, label) {
        console.log(event, numFiles, label);
        $input.fileinput('upload');
    }
}($input));

I've got it working with the event "fileselect", then every file gets triggered and uploaded, but the last file does not update its uploaded-state too. If I set "uploadAsync: false" then every file gets uploaded and the states are updated too, but the initial ones get the uploaded state too and the remove button isn't visible anymore. If you select another file after the upload the uploaded ones getting removed and the initial ones are the same as before with the remove-button.

[kartik-v]

Note that the multiple property must be set at the file input attribute's level. There is no multiple property within the plugin function. So you must set this in your file input markup

<input id ="kartik-1" type="file" multiple>

And remove the multiple property from your fileinput method:

$input = $("#kartik-1"); $input.fileinput({   multiple: true // remove this });

[aliechti]

My input is already multiple, that's not the problem.

[kartik-v]

Ok - I think probably this is to do with the FileReader object not yet completed the reading of the file content. Setting a timeout ensures this. For example the following will work better:

$input = $("#input-700");
$input.fileinput({
    uploadUrl:'<your url>',
    maxFileCount: 5
}).on("filebatchselected", function(event, files) {
    console.log(files);
    setTimeout(function() {
        $input.fileinput("upload");
    }, 1500);
});');

Will do some check on seeing if I can improve this in anyway.

The fileselect event should work better because it is triggered after FileReader finishes reading the file.

[kartik-v]

Ok this is resolved with an enhancement. You can try now with a latest updated package from dev-master.

A side note - your parameters for filebatchselected event are also incorrect... the event just returns the filestack object.

[kartik-v]

Check demo scenario # 6 which shows an auto upload scenario on file drag & drop - and also additionally automatically replacing the images with files returned from ajax response as initialPreview.

[aliechti]

Thx now it works except for the problem if you upload another file after the upload, the uploaded ones are getting removed from the preview.

[kartik-v]

Yes that's expected - because once files are uploaded they do not exist on client and are hence cleared.

The option for you is to return an initialPreview via ajax response as demonstrated in demo scenario # 6 (which is an extension of demo scenario# 5)

[kartik-v]

Ok I provided an enhancement via #218 to not clear uploaded files from preview as well until the remove button is clicked.