✨ Features

• 📁 Supports All File Types: Documents (pdf, docx, xlsx, pptx, txt, zip, dcm) and Images (png, jpg, jpeg, gif)
• 🖼️ Image Previews: Displays previews for images
• ❌ File Removal: Users can remove selected files before uploading
• 🖱️ Click or Drag & Drop: Supports both file selection methods
• 💡 Customizable UI: Easy customization of drag text, accepted formats, and modal titles
• 🎨 Professional Modal: Includes a stylish, responsive modal for file uploads
• ⚙️ Built with TypeScript & Rollup: Ensures type safety and optimized bundling

🚀 Getting Started

npm install @eduvitech/DragDrop

import React, { useState } from "react";
import { DragDrop } from "@my-organization/my-react-lib";

const handleFileUpload = (files: File[]) => {
  console.log("Uploaded Files:", files.map((file) => file.name));
  alert(`Uploaded files: ${files.map((file) => file.name).join(", ")}`);
};

const App = () => {
  const [showDragDrop, setShowDragDrop] = useState(false);

  return (
    <div style={{ padding: "20px", textAlign: "center" }}>
      <button
        onClick={() => setShowDragDrop(true)}
        style={{
          padding: "10px 20px",
          fontSize: "16px",
          borderRadius: "5px",
          backgroundColor: "#007bff",
          color: "#fff",
          border: "none",
          cursor: "pointer",
          marginBottom: "20px"
        }}
      >
        Upload Files
      </button>

      {showDragDrop && <DragDrop onFileUpload={handleFileUpload} />}
    </div>
  );
};

export default App;

🎨 Customization Options

The component comes with various props for easy customization:

| Prop | Type | Default Value | Description | | --- | --- | --- | --- | | onFileUpload | function | undefined | Callback when files are uploaded | | acceptedFormats | string[] | ['png', 'jpg', 'jpeg', 'gif', 'pdf', 'docx', 'xlsx', 'pptx', 'txt', 'zip', 'dcm'] | Allowed file formats | | maxFileSizeMB | number | 20 | Maximum file size in megabytes | |showPreview |boolean true |Display file preview| |dragText |string |"Drag & Drop files here or Click to Upload"| Text displayed in the drag area| |modalTitle| |string| "Upload Files"| Title of the upload modal|

Example with Custom Props

<DragDrop
  onFileUpload={handleFileUpload}
  acceptedFormats={["png", "jpg", "pdf", "docx", "xlsx", "zip", "dcm"]}
  maxFileSizeMB={50}
  showPreview={true}
  dragText="Drop your files here!"
  modalTitle="Custom Upload Modal"
/>

💡 Advanced Usage

Dynamically Display Drag & Drop Component

You can conditionally render the component by managing its state:

const [showDragDrop, setShowDragDrop] = useState(false);

<button onClick={() => setShowDragDrop(true)}>Upload Files</button>

{showDragDrop && <DragDrop onFileUpload={handleFileUpload} />}

📁 Supported File Types

The DragDrop component supports a wide range of file formats:

• Documents: pdf, docx, xlsx, pptx, txt, zip, dcm
• Images: png, jpg, jpeg, gif

You can customize the accepted file types by setting the acceptedFormats prop:

acceptedFormats={["png", "jpg", "jpeg", "gif", "pdf", "docx", "xlsx", "pptx", "txt", "zip", "dcm"]}

🎨 UI Design

• Responsive & Modern Design: Fits perfectly in all screen sizes
• Sleek Modal: Stylish modal with a close button (×)
• File Previews: Shows image previews, and file icons for documents
• Error Handling: Displays error messages for unsupported or large files
• Remove Files: Users can remove files before uploading

📦 Build & Deployment

This library is built using:

• TypeScript: For type safety
• Rollup: For optimized bundling
• React: Compatible with React versions 16, 17, 18, and 19

🎯 Roadmap

• [ ✅ ] Basic Drag & Drop functionality
• [ ✅ ] File previews for images
• [ ✅ ] Support for all document types (pdf, docx, xlsx, pptx, txt)
• [ ✅ ] Support for zip and dcm (DICOM medical images)
• [ ✅ ] Professional modal for file uploads
• [ ✅ ] Customizable drag text and modal title
• [ ✅ ] File deselect functionality
• [] Multi-language support (i18n)
• [] Upload progress indicator
• [] Integration with cloud storage (AWS S3, Firebase)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.