Dropzone JS full form and browser support

Posted on Posted in General

Okay, I have been struggling to work with dropzone js trying to implement a dropzone in a div that is separate entity from the form. Or really I just want a specific div to handle the file upload portion but not to submit automatically.

This is also a lesson in diving into the source code for your favorite projects. I discovered a function called Dropzone.isBrowserSupported which isn’t in the docs but is a HUGE help. Why?

So that I can write my own fallback function on a non-form element. Dropzone does a great job of autodetecting a lot of stuff IF all you want to do is upload a file. But for the most part, people want to add meta data to all of the images or documents they upload like titles, tags, descriptions, etc…

You could use hidden input elements automatically but that isn’t very dynamic. So what can you do? There is a nice little tutorial here https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone. However, this tutorial doesn’t really support using Dropzone programmtically attached to a specific div rather than the form. So what can you do?

Well, here you go. Check out this snippet of code.

var myDropzone = new Dropzone('div#my-dropzone',{
                    url: 'newProductUpload.php',
                    paramName: 'docFile',
                    maxFiles: 1,
                    autoProcessQueue: false,
                    uploadMultiple: true,
                    sending: function(file, xhr, formData) {
                        var formValues = $('form#new-product-form').serializeObject();
                        $.each(formValues, function(key, value){
                            formData.append(key,value);
                        });
                    },
                    init: function() {
                        var myDz = this;

                        $('button#saveNewProductBtn').click(function(e){
                            e.preventDefault();
                            e.stopPropagation();
                            myDz.processQueue();
                        });
                    }
                });

There are a couple of things happening here. Create the dropzone programmatically on the div element like you normally could, specificying the end point for the file upload. Don’t worry about creating the form correctly except for fallback purposes. In that case, I have a hidden div that accepts normal file uploads if Dropzone isn’t supported, which is where that fancy Dropzone.isBrowserSupported function comes in.

There is a jquery .serializeObject() function that I have been using for a long time. It basically takes a form and turns into an object of key value pairs. You interject your form data using the sending event of dropzone since dropzone automatically takes care of submitting the form for you. You loop through the object created by serialize and append the key value pairs to the form.

In the init function of dropzone, you can capture the default for the submit button and use dropzone to process everything. If the browser doesn’t support dropzone, then the submit button will act as normal (since you should have this wrapped in a browser check).

In case you were wondering what the HTML markup looks like. The form looks like any other form that has file uploads including the enctype="multipart/form-data" . And the only relevant html for dropzone is a div with a specific height attached to it. Make sure to add the height or else the div won’t be visible.

I hope this helps someone else because the tutorials are simple in nature even though the dropzone js library is pretty robust and can do a lot of things. This should help you go beyond simple file uploads and include meta data and have finer control over when things are executed.