Drag and Drop a File feature in React JS

Drag and Drop interfaces enable web applications to allow users to drag and drop files on a web page. In this article, we will see how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page. Here, we will be using the react-dropzone package. Let's get started.

Example

First of all, create a React project ?

npx create-react-app newproject

Go to the project directory ?

cd newproject

Now download and install the react-dropzone package ?

npm i --save react-dropzone

We will use this library to add a droppable area inside our React element's area. This is used to add a file selection area too.

In this example, we will add the name of a file in a list using drag-and-drag feature. Insert the following lines of code in App.js ?

import React from "react";
import { useDropzone } from "react-dropzone";
function Basic(props) {
   const { acceptedFiles, getRootProps, getInputProps } =
useDropzone();

   const files = acceptedFiles.map((file) => (
      

Explanation

We have created three variables ?

• The first variable stores all the file details,

• The second variable defines the area where this drag-and-drop feature will work, and

• The third variable makes the input field droppable.

Output

On execution, it will produce the following output ?

You can drag-and-drop files onto this page from any folder. It will display the file name along with its size. Also, you can use the "Choose files" button to open a folder location and select a file.