Search code examples
phpcodeigniterfile-uploaddropzone.js

Dropzone: Submit both form data and dropzone at once

I know there some questions like this, but they didn't answer questions exactly.

This is what I need,

  1. Upload files using Dropzone
  2. Save form data and uploaded image paths to DB

The problem is, How can I send both form data and dropzone files at the same time, like in the following official doc article.

I followed this Dropzone official docs Combine normal form with Dropzone

I tried this article and it worked. I could able to get both form data and files.But in this, the whole form is a Dropzone. I just need to make a Dropzone using a div.

Then I tried this approach,

  • Upload files first and get uploaded file paths as the response

  • Create hidden input by setting value as the file path received from a response

  • Submit the form

    But the problem is if I use this approach I have to upload files first. What if a request is broken when I'm submitting the form ?. No data will save, but there uploaded file on the server.

I'm hoping you guys can help me out to solve this. Thank you

Solution 
  • myDropzone.on("sending", function(file, xhr, formData) { 

 formData.append("fieldname1", $('field-name-1').val());  

});

    You could probably even automate this and do an $.each with every input of a #form but the basic logic is above.

    The juist of this is outlined in the docs under the tab tips.