Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
671 Views
