CODEWITHSUNDEEP
phpcodeigniterfile-uploaddropzone.js
Malinda
Malinda

Reputation: 408

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,

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

Upvotes: 2

Views: 6353

Answers (3)

Nicholas McIver
Nicholas McIver

Reputation: 11

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;
    }

Upvotes: 1

Inti
Inti

Reputation: 52

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.

Upvotes: 0

Alex
Alex

Reputation: 9265

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.

Upvotes: 4

Related Questions