Drag and Drop File Upload in React using react-dropzone-uploader

In this article we’ll show you how to implement drag and drop file upload in React using react-dropzone-uploader. With the help of the npm package we can easily create a react component for handling the dragging and dropping of the documents such as media file, text file, doc file etc.

Previously, we have written an article that explains how to upload an image in React using Node.js file upload API. Therefore in this article, we’ll implement the drag and drop feature in the React application.

Steps to implement drag and drop file upload in React

  1. Setup react application
  2. Install dropzone package
  3. Integrate dropzone package
  4. Design the preview component
  5. Integrate file upload API
  6. Output

1. Setup react application

First, we will set up a react application using create-react-app. If you don’t know then refer this article to create an application.

2. Install dropzone package

As we mentioned, we will use the react-dropzone-uploader npm package to implement drag and drop feature.

Run the following command to install the dropzone package.

3. Integrate dropzone package

To integrate the dropzone package, first we have to import the package along with the style.

Now let’s create a couple of functions that we will use in the dropzone module.

Use the above functions in dropzone for rendering in the component.

4. Design the preview component

We can also modify the dropzone by adding the custom style and components. Please check out the following code to modify the dropzone and display progress of the file upload with status.

Over here we have customized the preview component and that looks like below.

index.css

Check out this link for more information regarding the props.

5. Integrate file upload API

It’s time to upload a file on the server using the rest API. We have already created an API to upload files in Node.js.

We have to update the following functions to integrate API. For now we are using the http://localhost:4000/uploadmultifile Node.js API to upload files on the server.

We are also handling the function on onreadystatechange to receive the response of the rest API.

6. Output

Let’s combine all code together and see how it looks.

App.js

Output - Drag and Drop file upload in React using react-dropzone-uploader - Clue Mediator
Output – Drag and Drop file upload in React using react-dropzone-uploader – Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

1 Response

  1. Akshay kumar says:

    Awesome

Leave a Reply

Your email address will not be published. Required fields are marked *