dropzone.js form submit not sending file

Question

I'm having some trouble with using Dropzone.js within a standard html form. With the code I have, everything is working as it should, I can click the area to add an image, I can only add one image at a time, and the image is only uploaded when the submit button is pressed. However, nothing is actually sent when submit is pressed. I know I need to manually process the queue, but this doesn't seem to be working at all. The rest of the form data is sent however, it's only the image which isn't.

I'm using the following simplified code. (Assume that this works other than no file being sent.)

HTML

<form action='upload.php' method="post" class="dropzone" id="mydz">
<input type='submit' name='submitimage' value='Save' style='float:left;'/>

JAVASCRIPT

Dropzone.options.mydz = {
   autoProcessQueue: false,
   maxFiles: 1,

   init: function() {
      var submitButton = document.querySelector("#submitimage");
      mydz = this; // closure

      submitButton.addEventListener("click", function() {
         mydz.processQueue(); // Tell Dropzone to process all queued files.
      });                                    

      this.on('addedfile', function(file){ if(this.files.length > 1) { this.removeFile(this.files[0]); } });
   }
}

I've been trying to solve this all day now, and no amount of searching online has revealed anything useful to me. Can any of you help?? :)

Answer 1

Bingo!!! With some help from the author of the github post i linked to earlier, this issue has now been resolved!

The code I posted earlier works as it is, however inside the dropzone.js file, I added these two lines this.hiddenFileInput.setAttribute("name", _this.options.paramName); $("form.dropzone").append(_this.hiddenFileInput);

after document.body.appendChild(_this.hiddenFileInput); and all is working as it should!