In this article, we are going to learn how we can add File Dropper in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components conditionally.
Approach: To add our File Dropper we are going to use the react-drag-drop-files package. The react-drag-drop-files package helps us to integrate file droppers anywhere in our app. So first, we will install the react-drag-drop-files package and then we will add a file dropper on our homepage.
Create NextJS Application: You can create a new NextJs project using the below command:
npx create-next-app gfg
Install the required package: Now we will install the react-drag-drop-files package using the below command:
npm i react-drag-drop-files
Project Structure: It will look like this.
Adding the File Dropper: After installing the react-drag-drop-files package we can easily add File Dropper in our app. For this example, we are going to add a file dropper to our homepage.
Add the below content in the index.js file:
Javascript
import React, { useState } from "react"; import { FileUploader } from "react-drag-drop-files"; const fileTypes = ["JPG", "PNG", "GIF"]; function DragDrop() { const [file, setFile] = useState(null); const handleChange = file => { setFile(file); }; return ( <div> <h3>neveropen - File Dropper</h3> <FileUploader handleChange={handleChange} name="file" types={fileTypes} /> </div> ); } export default DragDrop; |
Explanation: In the above example first, we are importing our FileUploader component from the installed package. After that, we are creating a new constant variable to store the accepted file types, and then we are using the useState hook to set the file data. Then we are adding our file dropper using the FileUploader component.
Steps to run the application: Run the below command in the terminal to run the app.
npm run dev
Output:
