1

When multiple files are dropped onto a dropzone, I need to do a one-time server-side preparation before the individual files are uploaded.

Ideally, the uploader would have a multi-file-init callback that would allow me to make an ajax call to my server (where the preparation is done) and begin uploading of the individual files only when the preparation call returns.

Is there any way to achieve this end?

Currently, my server-side (php) code that is run for each uploaded file checks to see if the preparation has been done, and runs the preparation function if needed. But due to the uploader's asynchronously sending multiple files, a race-condition occurs and the prepartion function sometimes gets called multiple times.

Stephen Aiena
  • 21
  • 6
  • This is certainly possible, but there's no need to make it synchronous. If you require help in fixing your possible race condition, please add the relevant code to the question. – Rory McCrossan May 20 '19 at 19:53
  • Synchronous AJAX is deprecated, so you should try to avoid it. – Barmar May 20 '19 at 19:58
  • Send the AJAX request for preparation, and have the callback function do the upload. – Barmar May 20 '19 at 20:03
  • Thanks for the feedback. I editing the title to remove "synchronous". The issue is that the uploader seems to have no callback that is triggered before individual files start uploading. So, I think @Barmar is suggesting that I abandon the uploader's 'begin uploads automatically' and instead start the uploads programmatically. – Stephen Aiena May 20 '19 at 21:32
  • Yes, that's what I'm suggesting. – Barmar May 20 '19 at 21:44

1 Answers1

0

I was able to solve my problem by following advice from barmar and adding a button to initiate uploads.

I found specific instructions here: https://stackoverflow.com/a/38236305/671669

I now include this code in the initialization of the blueimp jQuery-File-Upload plugin:

add: function (e, data) {
    // enable the upload button
    $("#fileupload-start-button").prop('disabled', false);

    // wait for button click to process
    $("#fileupload-start-button").on('xyzUploadTrigger', function (e) {
        data.submit();
    });
},

And my binding to the "Start Upload" button looks like this:

$("#fileupload-start-button").on('click', function (e) {
    $(this).prop('disabled', true)
    e.preventDefault();

    // prepare server-side for upload of resources
    axios.post('/resources/initResourceCollectionForUploader',
        {
            'params': params,
        })
        .then(function (response) {
            // hide the upload button and trigger it
            $("#fileupload-controls-container").addClass('d-none');
            $("#fileupload-start-button").trigger('xyzUploadTrigger');
        })
        .catch(function (error) {
            console.log(error);
        });
});
Stephen Aiena
  • 21
  • 6