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('#'+attrs.id, {url: attrs.url});

var myDropZone = Dropzone.forElement('#'+attrs.id);


myDropZone.on('sending', function(file, xhr, formData){
//this gets triggered
console.log('sending');
formData.userName='bob';
});
}
}
}]);


As you can see the the
sending
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
req.params
comes back as an empty array (I've also tried
req.body
).

My node route

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

//this sees the files fine
console.log(request.files);

response.end("upload complete");
}]
}


Here is what the docs say on the
sending
event


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.


EDIT

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="http://127.0.0.1:3000/uploads", method="post", id="mydz")
input(type="hidden", name="additionaldata", value="1")
input(type="submit")

//With this one I can get the POST var
form(action="http://127.0.0.1:3000/uploads", 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