react-drag-drop-upload v0.0.9

React Drag Drop Upload

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

Installation

npm:

npm install react-drag-drop-upload

yarn:

yarn add react-drag-drop-upload

Example

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;

Features

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

API

ReactDragDropUpload Component

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

Props

ChildrenUploaderProps Interface

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

Usage

<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>

UploadWrapper Component

A styled wrapper for the file upload component.

Props

• 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.

Usage

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

DescriptionWrapper Component

A wrapper component for the file upload description.

Props

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

Usage

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

Description Component

A component to display the file upload description.

Props

• 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.

Usage

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

DrawTypes Component

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

Props

• 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.

Usage

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

License

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

Contributing

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