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) => (
      <li key={file.path}>
         {file.path} - {file.size} bytes
      </li>
   ));
   return (
   <section className="container">
      <div {...getRootProps({ className: "dropzone" })}>
         <input
            {...getInputProps()}
            style={{ backgroundColor: "black", color: "white" }}
         />
         <br />
         <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
         <h4>Files</h4>
         <ul>{files}</ul>
      </aside>
      </section>
   );
}
export default App

function App() {
   return <Basic />;
}

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.