Dropzone signed direct upload to Cloudinary

Question

I would like to be able to use DropZone to upload to Cloudinary without using an upload_preset. There is a StackOverflow example that explains how to do it with an upload preset here, The approach used in that answer is to add the Cloudinary required parameters to the FormData object available in the 'sending' event, which will not work in my use case (using signed uploads).

To upload without using an upload_preset, I would need to make a server API call during the sending event. This is required because the upload signature is generated using most of the parameters Cloudinary supports for image uploads as well as a timestamp. So if I want to set any Cloudinary upload options based on the actual files that are dropped, I need to make this API call somewhere in the Dropzone event handling workflow.

I could in theory do this with a synchronous XMLHttpRequest within the function I register to listen for the 'sending' event. That doesn't seem like the best possible approach.

The Cloudinary Ajax upload widget has a uploadSignature parameter that takes a function argument with a callback (documented here) so that the required server API call can be done with an asynchronous call (assuming I understand the sample code correctly). Is there any equivalent capability for Dropzone that I've missed in the docs?

Any other suggested approaches?

Answer 1

First, you should initialize your Dropzone in a way that it won't start the upload automatically, by setting autoProcessQueue: false. Then use the addedfile event to send an Ajax call for generating the signature on your server. The callback from the Ajax should inject the signature and timestamp to the upload params (e.g. myDropzone.options.params[signature]=signature etc) and then fire the upload by calling myDropzone.processQueue();