dropzone-react-sortable-dnd v1.0.1

DropZone Component

DropZone is a flexible and customizable React component for file uploading with sortable drag-and-drop functionality. It supports image compression, custom thumbnail rendering. Perfect for building modern file upload experiences based on tailwindcss styling.

Features

• Drag-and-Drop: Easily drag and drop files to upload.
• Image Compression: Optionally compress images before uploading.
• Sortable Drag N Drop: Implemented sortable drag-and-drop functionality without relying on external libraries.
• Custom Thumbnails: Render custom thumbnails using a provided function.
• Multiple Files: Support for uploading multiple files.
• Customizable File Types: Control which file types can be uploaded.
• Lightweight: Minimal dependencies and easy to integrate.

Props

Example Usage

<div className="w-[80%]">
  <h1>Upload Your Images</h1>
  <DropZone
  multiple
  onUpload={setFiles}
  images={files}
  maxFiles={5}
  maxWidth={800}
  compressImages={true}
  compressionOptions={{ maxSizeMB: 0.5 }}
  acceptedFileTypes={{ 'image/jpeg': ['.jpeg', '.jpg'], 'image/png': ['.png'], 'application/pdf': ['.pdf'] }}
 // renderThumbnail={customRenderThumbnail}
/>

  <div className="uploaded-files">
    <h2>Uploaded Files:</h2>
    {files && files.length > 0 ? (
      <ul>
        {files.map((file, index) => (
          <li key={index}>{file.id}</li>
        ))}
      </ul>
    ) : (
      <p>No files uploaded yet.</p>
    )}
  </div>
</div>

Custom Render Thumbnail Function

You can pass a custom function to render the thumbnails in the DropZone component. Here's an example of a custom render thumbnail function:

const customRenderThumbnail = (file, index, handleDragStart, handleDragEnter, handleDragEnd, removeFile) => (
    <div
      key={file.id}
      draggable
      onDragStart={() => handleDragStart(index)}
      onDragEnter={() => handleDragEnter(index)}
      onDragEnd={handleDragEnd}
      className="custom-thumbnail-class"
    >
      {/* Custom thumbnail rendering logic */}
      <img src={file.preview} alt={file.file.name} />
      <button onClick={() => removeFile(file.id)}>Remove</button>
    </div>
);

Acknowledgments

This project is made possible thanks to the following libraries and tools:

• React - A JavaScript library for building user interfaces.
• react-dropzone - Simple React hook to create a HTML5-compliant drag'n'drop zone.
• browser-image-compression - JavaScript library for image compression in browsers.
• lucide-react - Beautiful & consistent icon toolkit made by the community.

Thank you to the open-source community for providing these valuable resources!

License

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

Contributing

Please open an issue or submit a pull request on GitHub if you have ideas, bug reports, or improvements.

How to Contribute

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes (git commit -am 'Add new feature').
5. Push to the branch (git push origin feature-branch).
6. Open a pull request.

Thank you for your contributions!