day 262 — code 365

Thu 01 Sep 2016


Figured out to upload multiple images using React Dropzone and the Cloudinary API. We use the input=”file” HTML element, which opens up the native file dialog (behind the scenes in the React Dropzone component).

Then, we use the FormData constructor, which creates an object that can receive multiple File objects (each attached file is a File object).

We need to use the append() method to attach these to the FormData object — to a specific key. However, we achieve this by doing this:

const data = new FormData(); =>
data.append('customisation.brand.images_upload[]', f)

This is because we can’t directly assign an array to a particular key in the FormData object, we have to perform separate append() calls.

And then, on the server-side, we pass this array to the Cloudinary API, which can process both a single File, or an array of Files!

Quite satisfying to have been able to do this!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.