File input data not transferred with POST data of Dropzone form

Question

This is a continuation of this question, after making some progress with the suggestions given there.

I have a Typo3 form, with approximately this mark-up:

<form enctype="multipart/form-data" method="post" name="form" id="general" action="index.php?id=328">


    <ul class="inline-textbox">
      <li>

          <input type="text" id="first_name" name="tx_applicationformgeneral[form][name]" value="" placeholder="Name *">
      </li>
    </ul>



    <div class="dropzone-previews">

    </div>



 <input class="button" type="submit" name="tx_applicationformgeneral[mySubmit]" value="Submit">

 </form>

When the form is submitted, the POST data includes this snippet if no file has been uploaded:

  ------WebKitFormBoundarySq0AkJrSAe1kmAOu
  Content-Disposition: form-data; name="tx_applicationformgeneral[form][files][]";      filename=""
  Content-Type: application/octet-stream

This is the POST data when a file has been uploaded:

 ------WebKitFormBoundaryrEmFA8jYcHY56WAB
 Content-Disposition: form-data; name="tx_applicationformgeneral[form][files][]";      filename="DSC01413_01.JPG"
 Content-Type: image/jpeg

I've turned the form into a Dropzone by adding class dropzone to the form element, and passing these initialisation options:

 Dropzone.options.general = {
                paramName: "tx_applicationformgeneral[form][files][]", // The name that will be used to transfer the file
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                addRemoveLinks: true,

                // The setting up of the dropzone
                init: function() {
                    var myDropzone = this;

                    console.log("Dropzone init");

                    // First change the button to actually tell Dropzone to process the queue.
                    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                        // Make sure that the form isn't actually being sent.
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                    });



                }
            };

This appears to work to initialise a Dropzone: I can drag and drop files onto the form, and previews appear. But when I click "Submit", no file upload field data gets sent at all. There is nothing in the POST headers titled "tx_applicationformgeneral[form][files][]" or any variation. It is entirely absent from the POST data, although all other fields are included normally. This remains the case if I re-name paramName to

  paramName: "tx_applicationformgeneral[form][files]"

Because nothing is received for the file upload, when at least an empty field is expected, I get a big ugly Typo3 error on the back-end and nothing gets processed.

I guess that there is a problem with Dropzone inserting this field into the POST data. I would have expected that if the problem was that the paramName was wrong, that the data would be visible in the POST data with the incorrect name, and I'd still see the back-end error. Instead, there is no file upload data at all.

Can anyone suggest what might be going on?

UPDATE

Caught one of my errors: I was targeting button[type="submit"], when my form uses input[type="submit"]. Not fixed yet, but have progressed to new & interesting failure.

Ila Ila · Accepted Answer · 2014-04-25T20:32:23

Because I used the incorrect selector for the submit button, the Dropzone queue processing was not triggered. I was targeting button[type="submit"], when my form uses input[type="submit"].

File input data not transferred with POST data of Dropzone form

1 Answers