Send custom data with dropzone.js on each File Upload

Question

I am using dropzone in my Code Igniter Project.

With every drag of a file, dropzone creates an ajax request and my files is getting stored on the server too. But now

Answer 1

In case you have a nested payload object - e.g. to add a name to your file and your api only accepts something like this

{
    someParameter: {
        image: <my-upload-file>,
        name: 'Bob'
    }
}

your dropzone setup would look like this

var myDropzone     = new Dropzone("div#attachment", { 
    url: uploadFilePath,
    paramName: 'someParameter[image]'
});

myDropzone.on('sending', function(file, xhr, formData){
    formData.append('someParameter[image]', file);
    formData.append('someParameter[userName]', 'bob');
});

I only added this as there was no example for nested parameters documented since now.

Answer 2

I got it. This is what I had to use

myDropzone.on('sending', function(file, xhr, formData){
    formData.append('userName', 'bob');
});

Answer 3

Abhinav has the right and working answer I only want to give a second option to use it in the options object (for example if you have multiple Dropzone sections on one page.)

myDropzone.options.dropzoneDivID = {
    sending: function(file, xhr, formData){
        formData.append('userName', 'Bob');
    }
};

Answer 4

i was using JQuery and this is how worked for me :

           $("#dZUpload").dropzone({
                url: "ajax/upload_img_ben.php",
                success: function (file, response) {
                    var imgName = response;
                    file.previewElement.classList.add("dz-success");
                    console.log("Successfully uploaded :" + imgName);
                },
                error: function (file, response) {
                    file.previewElement.classList.add("dz-error");
                },
                sending: function(file, xhr, formData){
                    formData.append('id', '5');
                }
            });