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, my requirement is that I want to send additional data (DYNAMIC) alongside the file. With the use of params, Only static datas can be sent, but the data I want to send will be changing everytime.

This is how my code looks:

<script>
 Dropzone.autoDiscover = false;
  Dropzone.options.attachment = {
        init: function(){
          this.on('removedfile',function(file){
            // console.log('akjsdhaksj');
            var fileName = file.name;
            $.ajax({
              type: 'POST',
              url: "<?php echo BASE_URL.'index.php/admin/mail_actions/deleteFile' ?>",
              data: "id="+fileName,
              dataType: 'html'
            });
          });
        },
        // params: {
        // customerFolder: $('#toValue').substr(0, toValue.indexOf('@')),
        // },
        dictDefaultMessage:"Click / Drop here to upload files",
        addRemoveLinks: true,
        dictRemoveFile:"Remove",
        maxFiles:3,
        maxFilesize:8,
  }

$(function(){

  var uploadFilePath = "<?php echo BASE_URL.'index.php/admin/mail_actions/uploadFile' ?>";
  var myDropzone     = new Dropzone("div#attachment", { url: uploadFilePath});

});
</script>

Anyway I can achieve it?

score 131 · Accepted Answer · edited Apr 17 '19 at 11:21

131

I got it. This is what I had to use

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

edited Apr 17 '19 at 11:21

Jesper

3,816
2
16
24

answered Mar 16 '15 at 10:04

Abhinav

8,028
12
48
89

i tried using this but no luck..and where to add this code? in init ? – Shiva Feb 01 '17 at 11:27
How have you defined your dropzone? Without a snippet its hard to answer. Create a fiddle – Abhinav Feb 01 '17 at 11:42
1

it is sending but not understanding the way it is sending.Content-Disposition: form-data; name="name" sss Content-Disposition: form-data; name="description" – Shiva Feb 01 '17 at 11:52
Try remove the `sending` method when creating the `dropzone instance`, and bind the sending method using `on` – Abhinav Feb 01 '17 at 11:57
what is username and bob ? is those are form fields ? – Shiva Feb 01 '17 at 12:06
yes, thats just an example, that will be your custom form datas – Abhinav Feb 01 '17 at 12:12
if my input name is first_name & last_name , i need to pass like this na formData.append('first_name', 'last_name'); ? correct me if am wrong.. – Shiva Feb 01 '17 at 13:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134592/discussion-between-abhinav-and-shiva). – Abhinav Feb 01 '17 at 13:21
You are amazing. Thank you so much! After hours this solved all my problems :) – lov2code Aug 04 '17 at 16:55
@Shiva, is it possible to do something similar to what you had presented in the fiddle but in regard to multiple file uploads? I want to send multiple images that I can set for each one of them a title attribute. Is that possible? – W.M. Sep 01 '17 at 21:53
If you are using flask and you are adding a custom event handler like a button press to upload, this works like a charm. You have to do `request.form['userName']` to go get the value `"bob"`. Using some JavaScript You can maybe go ahead and append more to the `.formData` and get amazing results using Dropzone. – Muneeb Ahmad Khurram Feb 26 '22 at 11:04

score 29 · Answer 2 · answered May 20 '16 at 13:26

29

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

answered May 20 '16 at 13:26

Stan

457
5
7

1

I gave your answer an upvote since it shows that there is more than one way to implement this feature – Bron Davies Oct 28 '16 at 15:39
how do you put variable outside dropzone to the form data append? – Abdan Syakuro Oct 05 '21 at 04:04

score 13 · Answer 3 · answered Feb 26 '17 at 09:21

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.

score 2 · Answer 4 · answered Aug 19 '20 at 19:54

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

Send custom data with dropzone.js on each File Upload

4 Answers4

Linked