NicolasMoise NicolasMoise -4 years ago 113
AngularJS Question

Sending additional data with programatically created Dropzone using the sending event

I have the following (simplified for example) angular directive which creates a dropzone

directives.directive('dropzone', ['dropZoneFactory', function(dropZoneFactory){
'use strict';
return {
restrict: 'C',
link : function(scope, element, attrs){

new Dropzone('#', {url: attrs.url});

var myDropZone = Dropzone.forElement('#';

myDropZone.on('sending', function(file, xhr, formData){
//this gets triggered

As you can see the the
event handler I'm trying to send the username ("bob") along with the uploaded file. However, I can't seem to retrieve it in my route middleware as
comes back as an empty array (I've also tried

My node route

path: '/uploads',
httpMethod: 'POST',
middleware: [express.bodyParser({ keepExtensions: true, uploadDir: 'uploads'}),function(request,response){
// comes back as []

//this sees the files fine

response.end("upload complete");

Here is what the docs say on the

Called just before each file is sent. Gets the xhr object and the formData objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data.


I dropped the programmatic approach for now. I have two forms submitting to the same endpoint, a regular one with just post and a dropzone one. Both work, so I don't think it's an issue with the endpoint rather with how I handle the 'sending' event.

//Receives the POST var just fine
form(action="", method="post", id="mydz")
input(type="hidden", name="additionaldata", value="1")

//With this one I can get the POST var
form(action="", method="post", id="mydz2", class="dropzone")
input(type="hidden", name="additionaldata", value="1")

Answer Source

OK, I've actually figured it out, thanks to Using Dropzone.js to upload after new user creation, send headers

The sending event:

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

As opposed to formData.userName = 'bob' which doesn't work for some reason.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download