Sending additional data with programatically created Dropzone using the sending event

Question

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 1

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.

Answer 2

I would like to add to NicolasMoise's answer. As a beginner in webdev I got stuck on how to obtain an instance of Dropzone. I wanted to retrieve an instance of Dropzone that had been generated by the autodiscovery feature. But it turns out that the easiest way to do this is to manually add a Dropzone instance after first telling Dropzone not to auto-discover.

<input id="pathInput"/>
<div id="uploadForm" class="dropzone"/> 
<script>
  $(document).ready(function(){
    Dropzone.autoDiscover = false;
    var dZone = new Dropzone("div#uploadForm", {url: "/api/uploads"});
    dZone.on("sending", function(file, xhr, data){
      data.append("uploadFolder", $("#pathInput")[0].value);
    });
  });
</script>

Serverside the data will be in request.body.uploadFolder

Answer 3

Nicolas answer is one possible solution to the problem. It is especially useful if you need to alter the file object prior to sending.

An alternative is to use the params option:

var myDropzone = new Dropzone("div#myId", 
                              { url: "/file/post", params: { 'param_1': 1 }});

cf. the documention

Answer 4

For those that are using thatisuday/ng-dropzone the callback methods are done as such:

    <ng-dropzone class="dropzone" options="dzOptions" callbacks="dzCallbacks" methods="dzMethods"></ng-dropzone>

In a controller:

    $scope.dzCallbacks = {
        sending: function(file, xhr, form) {
            console.log('custom sending', arguments);
            form.append('a', 'b');
        }
    };