React Drag Drop Upload is a lightweight library for uploading files and images with drag and drop, styled with Tailwind CSS and supporting customization.

npm:

npm install react-drag-drop-upload

yarn:

yarn add react-drag-drop-upload

large	small

import { useState } from "react";
import { ReactDragDropUpload } from "react-drag-drop-upload";

function App() {
  const [fileOrFilesData, setFileOrFilesData] = useState(null);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleChange = (data: any) => {
    setFileOrFilesData(data);
    console.log("handleChange", fileOrFilesData);
  };

  return (
    <div className="flex items-center justify-center h-screen w-screen">
      <ReactDragDropUpload
        handleChange={handleChange}
        className="border-zinc-700"
        types={["JPG", "PNG"]}
        multiple={false}
        variant="small"
      />
    </div>
  );
}

export default App;

• Drag and drop file upload
• Customizable components
• Supports Tailwind CSS for styling
• Error handling for file type and size

A component for drag and drop file upload with customizable options.

The ChildrenUploaderProps interface describes the properties expected by the ReactDragDropUpload component.

<ReactDragDropUpload
  name="file"
  types={["jpg", "png"]}
  maxSize={1024 * 1024 * 5} // 5MB
  onSizeError={(error) => console.log(error)}
  onTypeError={(error) => console.log(error)}
  onDrop={(files) => console.log("Files dropped:", files)}
>
  {({ currFiles, uploaded, error, disabled, label, types, maxSize, minSize }) => (
    // Custom rendering based on file upload state
    // e.g., show current file, upload progress, error messages, etc.
  )}
</ReactDragDropUpload>

A styled wrapper for the file upload component.

• disabled?: boolean
• \ - Indicates whether uploading is disabled.
• variant?: "large" | "small" - The variant of the component. Can be "large" or "small".
• uploaded?: boolean - Indicates whether the file was uploaded successfully.
• error?: boolean - Indicates whether an error occurred during the upload.

<UploadWrapper>{/* Render file upload components here */}</UploadWrapper>

A wrapper component for the file upload description.

• error: boolean - Indicates if there is an error with the uploaded file.

<DescriptionWrapper>
  {/* Render file description components here */}
</DescriptionWrapper>

A component to display the file upload description.

• disabled: boolean | undefined
• \ - Indicates whether uploading is disabled.
• label?: string | React.ReactElement - The label for the file input.
• description?: string | React.ReactElement - The description for the file input.
• currFile: File | File[] | null - The currently selected file or files.
• uploaded: boolean | undefined - Indicates whether the file was uploaded successfully.
• types?: Array - An array of allowed file types.
• variant: "large" | "small" - The variant of the component. Can be "large" or "small".
• messageSuccess?: string - The success message displayed after the upload.

<Description
  disabled={false}
  label="Upload file"
  currFile={selectedFile}
  uploaded={true}
/>

A component to display the allowed file types and size limits.

• types?: Array - An array of allowed file types.
• minSize?: number - The minimum allowed file size in bytes.
• maxSize?: number - The maximum allowed file size in bytes.

<DrawTypes types={["jpg", "png"]} minSize={1024} maxSize={1024 * 1024} />

This library is licensed under the MIT license. See the LICENSE file for details.

Feel free to contribute to this project by submitting issues or pull requests on GitHub.