Adding more data to Dropzone.js post

Question

So I have my implementation of this tutorial here: http://www.dropzonejs.com/bootstrap.html

It is working great, and I'm uploading files just fine. What I want to do now is be able to send a user id along with the image in the POST data when Dropzone uploads the image. I did find enyo's tutorial here which explains how to add hidden form data to the dropzone, but using the bootstrap tutorial dropzone provides, there is no form and therefore no hidden post data can be sent.

How can I use the code from the bootstrap tutorial linked to above, and yet still send hidden input data to the upload script? Do I have to somehow convert the code provided into a form, and if so, how would I do that?

Solution 1

It's been a while since you asked this question but based on the dropzone website tips

http://www.dropzonejs.com/#tips

you should be able to do one of 3 things -

1. if there is a form add hidden params.

2. you can use params like so -

new Dropzone({
    url: "/",
    params: {
         foo: "bar"
    }
});

3. handle the on sending event like so -

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

// Will sendthe filesize along with the file as POST data.

 formData.append("filesize", file.size);  

});

Solution 2

I know this is a pretty old post but I tried to make the answer of SolarBear to work and it worked for me when adding the parameter "value" to the hidden input like this;

<form action="/action.php" class="dropzone">
<input type="hidden" name="additionaldata" value="valueToPass" />
</form>

Thanks for your help!

Solution 3

I find the tutorial you're providing a bit confusing since, indeed, there's no form involved. Simply create a form with class="dropzone" and add hidden inputs. It only shows the default template for dropped files and some JS code for basic event handling. I recommend checking out the main Dropzone page for examples.

For instance, in our code, it looks somewhat like this (redacted a bit) :

<form action="myAction"
      class="dropzone"
      id="dropzoneId"
      name="pictures">
    <input type="hidden" name="id">
</form>

And, really, that's it. We have some Javascript code to handle the hidden id field and some fancier features but the id gets posted along with the picture data.

Comments

[Djomla]

I can confirm, params: { foo: "bar" } is working

[Kasnady]

if i use dynamic value.. it won't working with params: {foo: dynamicValue}

[Mohammed Noureldin]

Is it some how possible to send an html form array?

[Akbar Noto]

The number 1 solution is explained on NorahKSakal answer below, i guess

[Don Viegues]

Arrays goes as string. you will need to stringy it I guess.

[Sumit Kumar Gupta]

This is the best way.