Image Uploader Component

A flexible React component for handling single and multiple image uploads with built-in image editing capabilities.

Features

• Single Upload Mode: Traditional single image upload with preview
• Multiple Upload Mode: Upload multiple images with grid display
• Image Editing: Built-in image editor with crop, rotate, filters, and more
• Drag & Drop: Support for drag and drop file uploads
• File Validation: File type and size validation
• Responsive Design: Mobile-friendly interface
• Customizable: Configurable icons, texts, and styling
• SVG Support: Special handling for SVG files

Installation

npm install your-package-name

Basic Usage

Single Upload Mode

import { ImageUploader } from 'your-package-name';

const MyComponent = () => {
  const handleUpload = async (file: File) => {
    // Your upload logic here
    const uploadedUrl = await uploadToServer(file);
    return uploadedUrl;
  };

  const handleDelete = () => {
    // Handle deletion
  };

  return (
    <ImageUploader
      onUpload={handleUpload}
      onDelete={handleDelete}
      uploadMode="single"
      texts={{
        dragDropText: 'Drag and drop your image here, or',
        selectFileText: 'select a file',
        maxFileSizeText: 'Maximum file size:',
        supportedFormatsText: 'Supported formats: JPEG, PNG, GIF, SVG, WebP',
        uploadButtonText: 'Upload',
        loadingText: 'Loading...',
        errorText: 'An error occurred during upload',
        supportedFormatsError: 'Unsupported file format',
      }}
      icons={{
        deleteIcon: '/path/to/delete-icon.svg',
        editIcon: '/path/to/edit-icon.svg',
        // ... other icons
      }}
    />
  );
};

Multiple Upload Mode

import { ImageUploader } from 'your-package-name';

const MyComponent = () => {
  const [images, setImages] = useState([]);

  const handleUpload = async (file: File) => {
    // Your upload logic here
    const uploadedUrl = await uploadToServer(file);
    return uploadedUrl;
  };

  const handleImagesChange = (newImages) => {
    setImages(newImages);
    console.log('Images updated:', newImages);
  };

  return (
    <ImageUploader
      onUpload={handleUpload}
      onDelete={() => {}} // Not used in multiple mode
      uploadMode="multiple"
      maxUploadCount={6} // Optional: limit total images
      onMultipleImagesChange={handleImagesChange}
      texts={{
        dragDropText: 'Drag and drop your images here, or',
        selectFileText: 'select files',
        maxFileSizeText: 'Maximum file size:',
        supportedFormatsText: 'Supported formats: JPEG, PNG, GIF, SVG, WebP',
        uploadButtonText: 'Upload',
        loadingText: 'Loading...',
        errorText: 'An error occurred during upload',
        supportedFormatsError: 'Unsupported file format',
      }}
      icons={{
        deleteIcon: '/path/to/delete-icon.svg',
        editIcon: '/path/to/edit-icon.svg',
        // ... other icons
      }}
    />
  );
};

Props

ImageUploaderProps

| Prop | Type | Default | Description | | ------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------- | ----------------------------------------------------- | | uploadMode | 'single' \| 'multiple' | 'single' | Upload mode for single or multiple images | | maxUploadCount | number | undefined | Maximum number of images allowed (multiple mode only) | | onMultipleImagesChange | (images: UploadedImage[]) => void | undefined | Callback when multiple images change | | onUpload | (file: File, event?) => Promise<string \| null> | undefined | Upload handler function | | maxFileSizeKB | number | 1000 | Maximum file size in KB | | allowedFileTypes | string[] | ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'] | Allowed MIME types | | icons | IconProps | undefined | Custom icons for the interface | | isRectangular | boolean | false | Use rectangular instead of circular shape | | isEditable | boolean | true | Enable image editing | | initialImage | string \| null | null | Initial image URL (single mode only) | | loading | boolean | false | Show loading state | | texts | TextProps | Required | Text labels for the interface | | onDelete | () => void | Required | Delete handler (single mode only) | | id | string | undefined | Unique identifier for the component | | skipEditorForSvg | boolean | true | Skip editor for SVG files | | disabled | boolean | false | Disable the component |

IconProps

interface IconProps {
  uploadIcon?: string;
  deleteIcon: string;
  editIcon: string;
  resetRotate: string;
  xMark: string;
  cropIcon: string;
  fineTuneIcon: string;
  rotateLeft: string;
  flipHorizontally: string;
  redoIcon: string;
  undoIcon: string;
  loadingIcon?: string | React.ReactNode;
}

TextProps

interface TextProps {
  dragDropText: string;
  selectFileText: string;
  maxFileSizeText: string;
  supportedFormatsText: string;
  uploadButtonText: string;
  loadingText: string;
  errorText: string;
  supportedFormatsError?: string;
}

UploadedImage

interface UploadedImage {
  id: string;
  url: string;
  file?: File;
  isEditing?: boolean;
}

Multiple Upload Mode Features

When uploadMode is set to "multiple":

• Grid Display: Images are displayed in a responsive grid layout
• Individual Controls: Each image has its own edit and delete buttons
• Add More Button: Shows an "Add More" button when under the limit
• Upload Count Limit: Respects maxUploadCount if specified
• Batch Processing: Can handle multiple file selections at once
• Image Management: Individual image editing and deletion

Image Editor Features

The built-in image editor provides:

• Crop Tool: Interactive cropping with resize handles
• Rotation: Rotate images left/right
• Flip: Horizontal flip functionality
• Fine Tuning: Brightness, contrast, saturation, exposure, temperature, gamma, clarity, vignette
• Undo/Redo: History management for all changes
• Reset: Reset all changes to original
• Mobile Support: Touch-friendly interface

Styling

The component uses Tailwind CSS classes and can be customized through:

• isRectangular prop for shape
• Custom CSS classes
• Icon customization
• Text customization

Browser Support

• Modern browsers with ES6+ support
• File API support
• Canvas API support
• Touch events for mobile devices

License

MIT License