@dracu/uploaders

A versatile collection of uploaders and media handling components for React applications.

Features

• 🖼️ Image upload with drag-and-drop support
• ✂️ Image cropping with customizable aspect ratio
• 🚀 Built-in validation options
• 🎨 Fully customizable dimensions
• 🌙 Dark mode compatible
• 📤 Upload function integration

Installation

npm install @dracu/uploaders

or

yarn add @dracu/uploaders

Dependencies

This package requires the following dependencies:

"peerDependencies": {
  "react": ">=17.0.0",
  "react-dom": ">=17.0.0",
  "react-easy-crop": "^5.0.0",
  "lucide-react": "^0.263.0"
}

If you don't have these dependencies installed, you'll need to install them:

npm install react-easy-crop lucide-react

Quick Start

import { ImageCrop } from "@dracu/uploaders";

function App() {
  const handleCropComplete = (croppedImageDataURL) => {
    console.log("Cropped image:", croppedImageDataURL);
    // Do something with the cropped image
  };

  const handleUploadResponse = (response) => {
    console.log("Upload response:", response);
    // Handle the upload response
  };

  const uploadFunction = async (file) => {
    // Example upload function
    const formData = new FormData();
    formData.append("image", file);

    const response = await fetch("https://your-upload-endpoint.com/upload", {
      method: "POST",
      body: formData,
    });

    return response.json();
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Image Upload Example</h1>

      <ImageCrop
        uploadFunction={uploadFunction}
        onCropComplete={handleCropComplete}
        onUploadResponse={handleUploadResponse}
        uploadLimit={5}
        aspect={16 / 9}
      />
    </div>
  );
}

export default App;

Components

ImageCrop

The main component for image uploading and cropping.

Props

| Prop | Type | Default | Description | | ------------------- | ----------------------------------------------- | ----------- | ------------------------------------------- | | uploadFunction | (file: File) => Promise<unknown> | undefined | Function to handle the image upload | | uploadLimit | number | 4 | Maximum file size in MB | | aspect | number | 1 | Aspect ratio for the cropper (width/height) | | cropperWidth | string | "50vw" | Width of the cropper container | | cropperHeight | string | "50vw" | Height of the cropper container | | uploaderWidth | string | "50vw" | Width of the uploader container | | uploaderHeight | string | "50vw" | Height of the uploader container | | onUploadResponse | (response: unknown) => void | undefined | Callback when upload completes | | onCropComplete | (croppedImageDataURL: string \| null) => void | undefined | Callback when crop is applied | | validationOptions | ValidationOptions | undefined | Options for image validation | | onError | (message: string) => void | undefined | Error handling callback | | disableCrop | boolean | false | Disable cropping functionality |

ValidationOptions

You can provide validation options to ensure uploaded images meet specific requirements:

interface ValidationOptions {
  minWidth?: number;
  minHeight?: number;
  maxWidth?: number;
  maxHeight?: number;
  acceptedFormats?: string[];
}

Styling

The component uses Tailwind CSS classes for styling. If you're using Tailwind CSS in your project, the component will use your custom theme. If not, you'll need to include the base Tailwind CSS styles.

Icons

The component uses Lucide React for icons. Make sure you have it installed:

npm install lucide-react

Advanced Usage

Custom Validation

<ImageCrop
  validationOptions={{
    minWidth: 800,
    minHeight: 600,
    acceptedFormats: ["image/jpeg", "image/png"],
  }}
  onError={(errorMessage) => {
    toast.error(errorMessage); // Using your preferred toast library
  }}
  // other props...
/>

Disabling Crop Functionality

<ImageCrop
  disableCrop={true}
  // Use it as a simple image uploader
  // other props...
/>

Custom Dimensions

<ImageCrop
  cropperWidth="400px"
  cropperHeight="300px"
  uploaderWidth="400px"
  uploaderHeight="300px"
  // other props...
/>

Custom Aspect Ratio

<ImageCrop
  aspect={4 / 3} // 4:3 aspect ratio
  // other props...
/>

Handling Uploads

The uploadFunction prop should be a function that takes a File object and returns a Promise. This function is responsible for sending the file to your server or storage service.

const uploadToServer = async (file) => {
  const formData = new FormData();
  formData.append("file", file);

  const response = await fetch("https://your-api.com/upload", {
    method: "POST",
    body: formData,
  });

  if (!response.ok) {
    throw new Error("Upload failed");
  }

  return response.json();
};

<ImageCrop uploadFunction={uploadToServer} />;

Upcoming Features

• More upload components for different file types
• Video uploading and trimming
• File progress uploaders
• Multiple file upload support
• And more!

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT