Upload Multiple Files To Cloudinary Using React Dropzone & Axios
Tags: react, cloudinary, axios, javascript
Published: 2017-07-25 13:31:32

---
title: Upload Multiple Files To Cloudinary Using React Dropzone & Axios
published: true
description: We had a requirement in one of our recent client’s project to provide a lot of file uploading. Being a developer we are quite used to the whole uploading process...
tags: react, cloudinary, axios, javascript
canonical_url: https://blog.codeinfuse.com/upload-multiple-files-to-cloudinary-using-react-dropzone-axios-27883c2a5ec6
---
![](https://cloudinary-res.cloudinary.com/image/upload/c_fill,w_770/dpr_2.0/React_Image_Library_2000x1100_v1.jpg)

We had a requirement in one of our recent client’s project to provide a lot of file uploading. Being a developer we are quite used to the whole uploading process & the time it takes on the internet. However, file upload can be a daunting experience for a massive amount of users on the internet so, be mindful when you’re working on one.

We’ve good experience in building file uploadingâ€Š–â€ŠBy leveraging all those experience our aim was to build a delightful user experience around it. I’ve described below the service & libraries we used to build that experience.

[Cloudinary](http://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ihvoxdl9tuoaxpbdrre8)â€Š–â€ŠThis service has become my de facto place to host assets for a long time now, the reason being they not just provide great image processing features on the fly but also provide super simple file uploading process directly from the browser without involving any backend.

[React Dropzone](https://react-dropzone.js.org/)â€Š–â€ŠWe’re big fan of React’s declarative approach towards building UI. Similarly, dropzone provides an intuitive declarative api for enabling file upload across browsers.

[Axios](https://github.com/mzabriskie/axios)â€Š–â€ŠA sleek promise based HTTP robust client library which helps us to talk to third party services & backend without breaking a sweat.

### How To ðŸ‘¨ðŸ¼”ðŸ’»
Firstly register on [Cloudinary](http://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ihvoxdl9tuoaxpbdrre8), (if you don’t have an account already) and obtain your API KEY & Image upload URL

![](https://cdn-images-1.medium.com/max/1600/1*pFHq5wQaIYcqWzrd_AXnhg.png)

Secondly, We will need to enable unsigned upload in our account settings
![](https://cdn-images-1.medium.com/max/1600/1*ixSreGuN55V2XlD0OU_dqA.png)

Once we’ve enabled unsigned uploading, we should see something like this
![](https://cdn-images-1.medium.com/max/1600/1*jSe3M4EfjFN1Iwc3pvx60Q.png)

Note down the preset name we will need it later in the code.

Now, Head over to your projectâ€Š–â€Šadd React Dropzone & Axios

```
npm install --save react-dropzone axios
```

Let’s import these newly added dependencies to the React component where we want to provide uploading feature

```
import Dropzone from 'react-dropzone'
import axios from 'axios'
```

We’ll now add the code for uploading

```
<Dropzone 
  onDrop={this.handleDrop} 
  multiple={true}
  accept="image/*" 
  style={styles.dropzone}
>
  <p>Drop your files or click here to upload</p>
</Dropzone>
```

Dropzone will trigger `handleDrop` function with the first parameter as an array of File when our user is done choosing the files to upload.
Now let’s add code which will upload those files to our Cloudinary Account

```javascript
handleDrop = files => {
  // Push all the axios request promise into a single array
  const uploaders = files.map(file => {
    // Initial FormData
    const formData = new FormData();
    formData.append("file", file);
    formData.append("tags", `codeinfuse, medium, gist`);
    formData.append("upload_preset", "pvhilzh7"); // Replace the preset name with your own
    formData.append("api_key", "1234567"); // Replace API key with your own Cloudinary key
    formData.append("timestamp", (Date.now() / 1000) | 0);
    
    // Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
    return axios.post("https://api.cloudinary.com/v1_1/codeinfuse/image/upload", formData, {
      headers: { "X-Requested-With": "XMLHttpRequest" },
    }).then(response => {
      const data = response.data;
      const fileURL = data.secure_url // You should store this URL for future references in your app
      console.log(data);
    })
  });

  // Once all the files are uploaded 
  axios.all(uploaders).then(() => {
    // ... perform after upload is successful operation
  });
}
```

_(Replace the Cloudinary image upload URL, upload preset, API key with your own)_

Voila! We just got ourselves a completely functional file upload mechanism without any involvement of backend code.

__This article first appeared at https://blog.codeinfuse.com/upload-multiple-files-to-cloudinary-using-react-dropzone-axios-27883c2a5ec6__

> [Codeinfuse](https://www.codeinfuse.com) is full stack development shop. Have a project in mind where we can assist? Feel free to talk to us at hello@codeinfuse.com