Clean Drag & Drop File Input Component – Shadcn Dropzone

Shadcn Dropzone is a production-ready file upload component that combines the popular shadcn/ui design system with react-dropzone functionality.

It provides a clean, accessible file upload experience with built-in drag-and-drop support.

Features

Preview

Use Cases

• Document Management Systems: Allow users to upload contracts, PDFs, and other business documents with a professional interface
• Content Management Platforms: Enable content creators to upload images, videos, and media files for blog posts or websites
• Form Applications: Integrate file uploads into registration forms, job applications, or survey submissions
• E-commerce Platforms: Let sellers upload product images and documentation during listing creation
• Project Management Tools: Allow team members to attach files to tasks, projects, or communication threads

Installation

To get started, make sure you have TailwindCSS configured, as the component relies on Tailwind utility classes for styling.

The component also requires react-dropzone as a peer dependency, which gets installed automatically.

npm install --save shadcn-dropzone

or

yarn add shadcn-dropzone

Usage

1. Import and use the component with default styling:

import Dropzone from 'shadcn-dropzone';
const FileUploadForm = () => {
  const handleFileDrop = (acceptedFiles: File[]) => {
    // Process uploaded files
    acceptedFiles.forEach(file => {
      console.log(`File: ${file.name}, Size: ${file.size}`);
    });
  };
  return (
    <Dropzone onDrop={handleFileDrop} />
  );
};

2. Create a custom interface using the render props pattern:

import Dropzone from 'shadcn-dropzone';
const CustomUploadArea = () => {
  return (
    <Dropzone
      onDrop={(acceptedFiles: File[]) => {
        // Handle file processing
      }}
    >
      {(dropzone: DropzoneState) => (
        <div className="border-2 border-dashed p-6 rounded-lg">
          {dropzone.isDragAccept ? (
            <div className='text-sm font-medium text-green-600'>
              Drop your files here!
            </div>
          ) : (
            <div className='flex items-center flex-col gap-2'>
              <div className='text-sm font-medium'>
                Click or drag files to upload
              </div>
            </div>
          )}
          <div className='text-xs text-gray-500 mt-2'>
            {dropzone.acceptedFiles.length} files selected
          </div>
        </div>
      )}
    </Dropzone>
  );
};

3. Refer to the react-dropzone documentation for a comprehensive list of all available props to customize behavior like file types, size limits, and more.

Related Resources

• shadcn/ui – The component library that provides the base styling and design system for consistent UI components
• react-dropzone – The underlying library that handles drag-and-drop functionality and file validation
• TailwindCSS – The utility-first CSS framework required for component styling

FAQs

Q: How can I restrict the types of files that can be uploaded?
A: You can use the accept prop from react-dropzone. Pass an object specifying the MIME types, for example: accept={{ 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg'] }}.

Q: Is it possible to limit the number or size of files?
A: Yes, react-dropzone (and by extension Shadcn Dropzone) supports props like maxFiles to limit the number of files and maxSize (in bytes) to limit the size of each file.

Q: How do I show previews for uploaded images?
A: react-dropzone provides file objects with a preview property (a URL created using URL.createObjectURL()) when files are images. You can use this URL in an <img> tag to display a preview. Shadcn Dropzone itself does not render previews by default in its basic version, but you can implement this in a custom UI.

Q: Does Shadcn Dropzone handle the actual file upload to a server?
A: No, Shadcn Dropzone, like react-dropzone, only handles the client-side file selection and preparation. You need to implement the logic to send the File objects (received in the onDrop callback) to your server using fetch, axios, or another HTTP client.