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?

Necaise

hello, did you manage to solve the issue? facing the same problem – Inamorato

Answer 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);  

});

Alpert

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

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

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

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

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

This is the best way. – Libava

for dynamic items in "params", can use a function that returns the data – Aweinspiring

To reply to @Kasnady, if you use dynamic value, you must do myDropzone.options.params = {foo: dynamicValue} – Husserl

Answer 2

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.

Encroachment

Answer 3

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!

Alcove