FileUploader - React File Upload Component

Overview

FileUploader is a customizable React component for handling file uploads with drag-and-drop functionality. It supports multiple file selection, previews, and deletion of uploaded files. This package is designed for easy integration into React applications.

Features

• Drag-and-drop file upload
• Click-to-upload functionality
• Supports single and multiple file uploads
• File previews for images
• Customizable appearance
• Restrict file types
• Delete uploaded files

Installation

You can install the package using npm or yarn:

npm install s-image-uploader

or

yarn add s-image-uploader

Usage

Import and use the FileUploader component in your React project:

import { useState } from "react";
import FileUploader from "./FileUploader";
function App() {
  const [isDragging, setIsDragging] = useState(false);
  const [image, setImage] = useState<File[] | []>([]);

  return (
    <div>
      <FileUploader
        multiple={true}
        setDragging={(dragging) => {
          setIsDragging(dragging);
        }}
        onFilesChange={(files) => {
          setImage(files);
        }}
      >
        <div
          style={{
            height: "200px",
            width: "300px",
            fontSize: "16px",
            color: "#666",
            border: "2px dashed #ccc",
            borderRadius: "8px",
            textAlign: "center",
            cursor: "pointer",
            transition: "border 0.3s ease",
            borderColor: isDragging ? "#007bff" : "#ccc",
            padding: "20px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <p>
            {isDragging
              ? "Drop here your content here"
              : "Drag & Drop or Click to Upload"}
          </p>
        </div>
      </FileUploader>
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | --------------- | ------------------------- | --------- | ------------------------------------------------------------ | | background | string | #f9f9f9 | Background color of the drop area | | showOutPut | boolean | true | Whether to display file previews | | accept | string | image | File type filter (e.g., image, video, application/pdf) | | multiple | boolean | false | Allows multiple file selection | | children | React.ReactNode | null | Custom content inside the drop area | | setDragging | (arg0: boolean) => void | Required | Callback function when drag state changes | | onFilesChange | (files: File[]) => void | Required | Callback function to receive uploaded files |

File Preview

• If multiple is enabled, uploaded files will be displayed in a grid.
• If multiple is disabled, only one file will be shown.
• Clicking the delete button (×) will remove a file.