React Photo Uploader Component

A modern, feature-rich React component for uploading, previewing, and managing photos with built-in compression, validation, and gallery functionality.

Features

✅ Drag and drop file uploads
✅ Image preview gallery with reordering
✅ Automatic image compression
✅ File type validation
✅ Maximum file size validation
✅ Maximum number of files limitation
✅ Full-screen image viewer
✅ TypeScript support
✅ Modern design with customizable styling

Installation

npm install react-photo-uploader-component

Or with yarn:

yarn add react-photo-uploader-component

Basic Usage

import React, { useState } from 'react';
import { PhotoUploader } from 'react-photo-uploader-component';

function App() {
  const handleChange = (files) => {
    console.log('Files changed:', files);
    // Do something with the files
  };

  return (
    <div className="App">
      <h1>Upload Your Photos</h1>
      
      <PhotoUploader
        maxFileSize={5} // 5MB
        allowedTypes={['image/jpeg', 'image/png', 'image/webp']}
        maxFiles={10}
        onChange={handleChange}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | maxFileSize | number | Required | Maximum file size in MB | | allowedTypes | string[] | Required | Array of allowed MIME types (e.g., 'image/jpeg', 'image/png') | | maxFiles | number | Infinity | Maximum number of files allowed to upload | | onChange | (files: PhotoFile[]) => void | undefined | Callback function triggered when files change |

The PhotoFile Object

When files are uploaded, they are transformed into PhotoFile objects with the following structure:

interface PhotoFile {
  id: string;             // Unique identifier for the photo
  file: File;             // The compressed File object
  preview: string;        // Data URL for preview
  name: string;           // Original filename
  originalSize: number;   // Original file size in bytes
}

Advanced Usage

Custom Form Integration

import React, { useState } from 'react';
import { PhotoUploader } from 'react-photo-uploader-component';

function UploadForm() {
  const [photos, setPhotos] = useState([]);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // Create FormData for submission
    const formData = new FormData();
    photos.forEach((photo) => {
      formData.append('photos', photo.file);
    });
    
    try {
      const response = await fetch('https://your-api.com/upload', {
        method: 'POST',
        body: formData,
      });
      
      if (response.ok) {
        alert('Upload successful!');
      } else {
        throw new Error('Upload failed');
      }
    } catch (error) {
      console.error('Error uploading images:', error);
      alert('Failed to upload images');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Product Photos</h2>
      <PhotoUploader
        maxFileSize={2}
        allowedTypes={['image/jpeg', 'image/png', 'image/webp']}
        maxFiles={5}
        onChange={setPhotos}
      />
      
      <button 
        type="submit" 
        disabled={photos.length === 0 || isSubmitting}
        className="submit-button"
      >
        {isSubmitting ? 'Uploading...' : 'Submit'}
      </button>
    </form>
  );
}

Styling Customization

The component uses CSS variables for easy styling customization:

:root {
  --color-primary: #f3f4f6;         /* Main background color */
  --color-secondary: #ef4444;       /* Error/action color */
  --color-background: #ffffff;      /* Background color */
  --color-text: #333333;            /* Text color */
  --color-light-text: #ffffff;      /* Light text color */
}

Individual Components

The package also exports individual components and utilities that you can use separately:

import { 
  PhotoGallery,
  PhotoItem,
  ImageViewer,
  compressImage
} from 'react-photo-uploader-component';

Browser Support

• Chrome, Firefox, Safari, Edge (latest versions)
• Mobile browsers on iOS and Android

License

MIT

Development

To contribute to this project:

1. Clone the repository
2. Install dependencies: npm install
3. Run development server: npm run dev
4. Build: npm run build

Issues and Feedback

Please report any issues or suggestions on the GitHub repository.