Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • Next.js Tutorial
  • Next.js Components
  • Next.js Functions
  • Next.js Deployment
  • Next.js Projects
  • Next.js Routing
  • Next.js Styles
  • Next.js Server-Side Rendering
  • Next.js Environment Variables
  • Next.js Middleware
  • Next.js Typescript
  • Next.js Image Optimization
  • Next.js Data Fetching
Open In App
Next Article:
How to add CodeBlock in Next.js ?
Next article icon

How to add File Dropper in Next.js ?

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Adding a file dropper feature in Next.js involves setting up a drag-and-drop interface, handling file uploads on the frontend, and processing the files on the server side. In this article, we are going to learn how we can add File Dropper in NextJS.

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.

Steps to Create NextJS App

Step 1: Initialize a new Next.js Project using the below command:

npx create-next-app gfg

Step 2: Switch to the project directory

cd gfg

Step 3: 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:

The updated dependencies in the package.json file are:

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-drag-drop-files": "^2.3.10"
}

Example: This example demonstrates adding a file dropper in the next.js app with the help of react-drag-drop-files package from the NPM.

JavaScript 
// Filename - pages/index.js  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 = (uploadedFile) => {         setFile(URL.createObjectURL(uploadedFile));     };     return (         <div>             <h3>GeeksforGeeks - File Dropper</h3>             <FileUploader              	handleChange={handleChange}                  name="file"                  types={fileTypes} />             {file && (                 <div style={{ marginTop: "20px" }}>                     <h4>Image Preview:</h4>                     <img                      	src={file}  						alt="Uploaded Preview"                          style={{ maxWidth: "100%", height: "auto" }} />                 </div>             )}         </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:


Next Article
How to add CodeBlock in Next.js ?

I
imranalam21510
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • ReactJS
  • Next.js
  • Next.js - Questions

Similar Reads

  • How to add ESLint in Next.js ?
    ESLint is a popular linting tool for identifying and fixing issues in JavaScript code. Adding ESLint to your Next.js project ensures that your code follows best practices and maintains a consistent style. This enhances code quality, helps catch errors early, and makes the codebase easier to maintain
    3 min read
  • How to add CodeBlock in Next.js ?
    In this article, we are going to learn how we can add CodeBlock 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 conditiona
    2 min read
  • How to add Calendar in Next.js ?
    Adding a calendar to a Next.js application enhances scheduling and event management. We can just install and use the available npm package. In this article, we are going to learn how we can add a calendar loader in NextJS. ApproachTo add our calendar we are going to use the react-calendar package. T
    2 min read
  • How to add Draggable Components in Next.js ?
    In this article, we are going to learn how we can add Draggable Components 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
    2 min read
  • How to add Image Carousel in Next.js ?
    In this article, we are going to learn how we can add an Image Carousel 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. ApproachTo create image carousel in next.js we are going to use a react-r
    2 min read
  • How to add Media Downloader in Next.js ?
    In this article, we are going to learn how we can add Media Downloader 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 con
    2 min read
  • How to customize filters in Next.js ?
    In this article, we will learn How we can add customized filters in the NextJS project using Algolia. 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 N
    3 min read
  • How to Load Data from a File in Next.js?
    Loading Data from files consists of using client-side techniques to read and process files in a Next.js application. In this article, we will explore a practical demonstration of Load Data from a File in Next.js. We will load a validated CSV input file and display its contents in tabular format. App
    3 min read
  • How to Add Simple DatePicker in Next.js ?
    In this article, we are going to learn how we can add a Simple Datepicker 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
    2 min read
  • How to add Text Highlighter in Next.js ?
    In this article, we are going to learn how we can add Text Highlighter 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 con
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences