Dropzone: Submit both form data and dropzone at once

Question

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

This is what I need,

Upload files using Dropzone
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

Possible duplicate of [Adding more data to Dropzone.js post](https://stackoverflow.com/questions/26472952/adding-more-data-to-dropzone-js-post) — Alex, Mar 07 '18 at 05:13

score 4 · Accepted Answer · answered Mar 07 '18 at 05:23

4

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.

answered Mar 07 '18 at 05:23

Alex

9,215
8
39
82

Thank you. This is the best solution. I didn't read much the docs. My bad. – Malinda Mar 07 '18 at 06:01

score 1 · Answer 2 · answered Apr 19 '22 at 20:59

It is not necessary to append form data when sending. Check the documentation and use the headers property

example

var myDropzone = new Dropzone(".profile-image-upload",
    {
        paramName: "uploadfile",
        url: "/API/PeopleAPI/EditAsync",
        maxFiles: 1,
        headers: getData(),
        uploadMultiple: false,
        autoProcessQueue: false,
        maxFilesize: 20,
        acceptedFiles: "image",
        dictMaxFilesExceeded: "You can only upload 1 image",
        dictDefaultMessage: "",
    });

function getData() {
        var data = {
            //person
            UserName: $('#UserName').val(),
            AspNetUserID: '@Model.AspNetUserID',
            Roles: $('#UserRoles').val(),
            FirstName: $('#FirstName').val(),
            Email: $('#Email').val(),
            LastName: $('#LastName').val(),
            Gender: $('#Gender').val(),
            Password: $('#Password').val(),
            //address
            AddressLine1: $('#AddressLine1').val(),
            AddressLine2: $('#AddressLine2').val(),
            Town: $('#Town').val(),
            RegionID: $('#RegionID').val(),
            RegionName: $('#RegionID :selected').text(),
            City: $('#City').val(),
            CountyID: $('#CountyID').val(),
            CountyName: $('#CountyID :selected').text(),
            PostCode: $('#PostCode').val(),
          __RequestVerificationToken: $('[name="__RequestVerificationToken"').val()
        };
        return data;
    }

Inti · Answer 3 · 2018-03-07T05:30:24.880

I don't think that it is possible. you have to upload file first and then db record will be added/updated. once your request is submitted to server, db record will be updated in nano seconds. So no need to worry. It is same as core php.

just for the safe side your web server and db server should be same for more efficient behavior.

if still you want more security, write a crone job, that will run in the end of the day and will unlink all the files from server those doesn't exist in db record.

Dropzone: Submit both form data and dropzone at once

3 Answers3