DropFileX

A React component for file uploading with drag-and-drop functionality, built with TypeScript, Tailwind CSS, and Framer Motion.

Features

• 🖱️ Drag and drop file upload
• 🌊 Smooth animations and transitions
• 🖼️ Image preview for image files
• 📄 File icon display for non-image files
• 📊 Upload progress indicator
• 📱 Fully responsive
• 🎭 Interactive states (drag over, hover)
• 🧩 Customizable dimensions and accepted file types

Installation

npm install DropFileX

Usage

import DropFileX from 'DropFileX';
import 'tailwindcss/tailwind.css'; // Make sure you have Tailwind CSS set up

function App() {
  const handleFileChange = (fileInfo:FileInfoInterface) => {
    if (fileInfo) {
      console.log(`File: ${fileInfo.name}, Size: ${fileInfo.size} bytes, Type: ${fileInfo.type}`);
    } else {
      console.log('File removed');
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">File Upload Example</h1>
      <DropFileX 
        width="600px" 
        height="400px" 
        acceptedFiles={["image/png", "image/jpg", "image/jpeg", "application/pdf"]} 
        onFileChange={handleFileChange}
        showProgressBar={true}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | "" | Additional CSS classes | | width | string | "500px" | Width of the component | | height | string | "300px" | Height of the component | | acceptedFiles | string[] | ["image/png", "image/jpg", "image/jpeg", "text/plain", "application/pdf", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-powerpoint"] | Accepted file types | | onFileChange | function | undefined | Callback function called when a file is added or removed | | showProgressBar | boolean | true | Whether to show the progress bar during upload |

File Info Object

The onFileChange callback receives a fileInfo object with the following properties:

interface FileInfoInterface {
  name: string;   // File name
  size: number;   // File size in bytes
  url: string;    // Object URL for the file
  type: string;   // MIME type of the file
}

License

MIT