0

TLDR;

I managed to simplify my question after a good night's sleep. Here's the simpler question.

I want to upload N files to a server, which would process them together and return a single response (e.g. Total foobars in all files combined = XYZ).

What's the best way to send this single response back to the client?

Thanks.

&

Below is the old question, left behind as a lesson for me.

I'm using Dropzone.js to build D&D functionality into my app.

Please note: I know there are a couple of questions already that discuss multifile uploads. But they are different from my question. They talk about how to get a single callback call instead of multiple ones.

My issue is related to the situation where I drag and drop multiple files into the dropzone, but am seeing the single server response being duplicated multiple times. Here is my config:

Dropzone.options.inner = {
    init: function() {
      this.on("dragenter", function(e) {
        $('#inner').addClass('drag-over');
        //// TODO - find out WTF this isn't working (low priority)
      }),

      this.on("completemultiple", function(file, resp) {
        //// TODO
      })
    },

    url: "php/...upload...php",

    timeout: 120000, // 2m
    uploadMultiple: true,
    autoProcessQueue: false,
    clickable: false,
  };

  //// ... Some other stuff 
  //// ...

  $(document).ready(function() {
    $('#inner').click(function() {
      Dropzone.forElement('.dropzone').processQueue();
    });

In the beginning I intercepted the "complete" event, rather than "completemultiple". That resulted in its handler being invoked multiple separate times (once for each file), even though the server-side php was only being invoked once. Each invocation returned a duplicate copy of the same server-side message.

I didn't want that, so I changed it to "completemultiple", and now I can confirm that the handler only gets called once with an array of files, but the single server response is now buried within each file object returned - each has a duplicate copy of the exact same response.

It doesn't matter ultimately because it is the same message, after all. But the whole esthetics of the thing now seems off which indicates to me I'm doing something wrong - the response seems to indicate two independent uploads, but they were part of a single invocation of the server side php. Why make the client "believe" there were two separate upload requests when the server-side script only has one opportunity to respond (i.e. The php is not sending back different messages for each file - should it? And if so, what's the best way to do it?)

How can I make it so that if I have a scenario in which it's all-or-none, I get a single response back from the php script?

This is especially important to me because my server response will contain the status and some other data. The script does more than simply receiving the uploaded files (hence the longer timeout).

I thought maybe that's a sign that I should separate the uploading part from the processing part and trigger the processing once the upload is complete.

But that means that the server side upload script can't clean up after itself. It needs to persist data beyond its own life. Also it now needs to return a handle to this data back to the client, which would dispatch the server-side processor in a different ajax call passing it this handle - and the subsequent call needs to clean up the files left by the uploader after it is done processing them.

This seems the less elegant solution. Is this something I just need to get used to? Or is there a better way of accomplishing what I want?

Also, any other free tips and hints from the front-end gurus in my network will be gratefully accepted.

Thanks.

&

Anand Venkataraman
  • 163
  • 1
  • 7
  • I'm not completely sure I understand your question but I think it might be a duplicate of [this one](https://stackoverflow.com/questions/46728205/dropzone-submit-button-on-upload)? – Don't Panic Mar 05 '19 at 00:07
  • Thanks. I took a look and unfortunately that's not the issue. That question is asking how to do multi-file uploads in one shot. In the more recent versions of Dropzone you can set uploadMultiple to true and autoProcessQueue to false and call processQueue() from an intercepted click event. I have that working. What I'm curious about is why the single response from my php script is being redundantly mirrored into each of the file objects passed to the completion handler. Shouldn't the response be like a class variable shared by all file objects? & – Anand Venkataraman Mar 05 '19 at 03:57
  • Actually that question is about uploading on click, instead of automatically on drop, such that you get a single response back from the server, which is what I understood your question to be about. The accepted answer describes using the properties and handlers you mention. If your question is about the structure of the response Dropzone makes available ... I guess that's a question for a Dropzone developer :-) – Don't Panic Mar 05 '19 at 22:00
  • Thank you Don't Panic. Yes, that's correct. It's about the structure of the dz response. I appreciate your taking the time to write. & – Anand Venkataraman Mar 06 '19 at 19:49

1 Answers1

0

The following approach works. Until something better can be found.

Dropzone.options.inner = {

    // . . .

    init: function() {
      this.on("completemultiple", function(file) {
          var code = JSON.parse(file[0].xhr.response).code;
          var data = { "code" : code };
          $.post('php/......php', data, function(res) {
              // TODO - surface the res back to the user                                                                     
            });
      })
    },
};

&

Anand Venkataraman
  • 163
  • 1
  • 7