Build a Drag-and-Drop File Upload with Next.js Easily

Over 70% of modern apps now include drag-and-drop uploads, increasing user engagement, improving UX, and simplifying file management across various digital platforms worldwide.

Key Points

Drag-and-drop uploads improve user satisfaction by 40%, reducing upload errors and support tickets.
Over 60% of developers prefer Next.js for interactive file handling and dynamic uploads.
Mobile adoption drives 55% of drag-and-drop file uploads in modern digital applications today.

Overview

Adding a drag-and-drop file upload feature to a Next.js application is a vital component for modern web solutions. It not only improves user experience but also remains a key requirement in many projects managed by app development services, especially when creating highly interactive features for web or mobile app development platforms. Whether you’re a solo developer or part of an app development team, this guide will assist you in integrating a smooth file upload component into your custom application.

Prerequisites

Before you get started, ensure you have the following ready, as these tools are commonly leveraged by professionals providing web app development services:

A working Next.js project
Tailwind CSS is installed and configured
Node.js installed (v16+ recommended)

Such tools and frameworks are frequently part of the tech stack chosen by a web app development company to deliver fast, scalable, and visually appealing applications.

Step 1: Install Required Package

Install react-dropzone, a powerful and flexible drag-and-drop utility for React, widely used in on-demand development projects.

npm install react-dropzone

This package makes it easy for developers to implement intuitive file upload experiences in mobile apps and web projects as well.

Step 2: Create the Upload Component

Create a new component file:

/components/DragAndDrop.jsx

Here’s the complete code to build your drag-and-drop component, which is a popular feature across apps built by leading web development companies:

                                        "use client";


import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";


export default function DragAndDrop() {
  const [files, setFiles] = useState([]);


  const onDrop = useCallback((acceptedFiles) => {
    setFiles((prev) => [...prev, ...acceptedFiles]);
  }, []);


  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    multiple: true,
    accept:{
        "image/*":[]
    }
  });


  return (
    <div className="w-full max-w-md mx-auto mt-10">
      <div
        {...getRootProps()}
        className={`border-2 border-dashed p-6 rounded-lg cursor-pointer transition
          ${isDragActive ? "bg-blue-100 border-blue-500" : "border-gray-300"}`}
      >
        <input {...getInputProps()} />
        <p className="text-center text-gray-500">
          {isDragActive
            ? "Drop the files here ..."
            : "Drag & drop some files here, or click to select files"}
        </p>
      </div>


      <ul className="grid grid-cols-2 gap-4 mt-4">
  {files.map((file, index) => {
    const isImage = file.type.startsWith("image/");
    const previewUrl = isImage ? URL.createObjectURL(file) : null;


    return (
      <li key={index} className="flex flex-col items-center space-y-2">
        {isImage && previewUrl && (
          <img
            src={previewUrl}
            alt={file.name}
            className="w-32 h-32 object-cover rounded border"
            onLoad={() => URL.revokeObjectURL(previewUrl)} // avoid memory leaks
          />
        )}
        <p className="text-sm text-center">
          {file.name} ({Math.round(file.size / 1024)} KB)
        </p>
      </li>
    );
  })}
</ul>
    </div>
  );
}

Such components are important in web app development, where users often expect intuitive and fast interactions with file uploads, especially on mobile devices.

Step 3: Use the Component in a Page

Now import and use the drag-and-drop component in a page of your Next.js application:

                                        import DragAndDrop from "@/component/DragAndDrop";


export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-gray-100">
      <DragAndDrop />
    </main>
  );
}

Integrating such features helps differentiate your applications, an important factor for any app development company competing in the fast-paced world of on-demand app development.

Final Words

Once implemented, your Next.js app will feature a sleek, modern drag-and-drop interface, ideal for projects developed by professional teams offering app development services. Users can easily upload files, significantly improving the user experience an essential aim in both custom web app development.

Whether you’re building enterprise solutions or innovative platforms, integrating file upload features like this ensures your app meets modern usability standards, helping your app development company deliver exceptional results.