nextjs-multi-image-upload

Responsive Multi-Image Upload Component for Next.js

This project provides a reusable, responsive multi-image upload component built for Next.js applications. Leveraging TypeScript, Tailwind CSS, shadcn/ui, and React Hook Form, it offers a type-safe solution for managing multiple image uploads. Developers can implement sophisticated image handling with features like progress tracking, visual deletion feedback, and seamless form validation integration, streamlining the development process for user-facing applications requiring robust file upload capabilities.

Features:

• Multi-Image Upload: Allows uploading multiple files with a configurable maximum limit.
• Responsive Design: Adapts layout to various screen sizes using Tailwind CSS.
• Progress Tracking: Displays upload progress as an overlay on each image.
• Deletion Feedback: Features a glow-and-dim animation during image deletion.
• React Hook Form Integration: Compatible with react-hook-form for validation and error handling.
• Type-Safe: Developed in TypeScript with comprehensive type definitions.
• Customizable Styling: Easily styled using Tailwind CSS classes and extensible via props.
• API Integration: Supports signed URL generation and file upload/deletion APIs for cloud storage.
• Configurable Image Regex: Customize regex for previewing initial image URLs based on format.
• Configurable Accept Types: Restrict file picker to specific MIME types or extensions during upload.
• Cloud Storage Support: Facilitates integration with services like AWS S3/Cloudflare R2 via signed URLs.
• Custom Animations: Includes a 'glow-effect' deletion animation, configurable via Tailwind CSS keyframes.

Summary:

The Next.js Multi-Image Upload component simplifies adding advanced image upload functionality to web projects. It handles multiple files, displays progress, provides user feedback on deletions, and integrates with React Hook Form. With server-side API support for signed URLs (e.g., S3/R2), it's a comprehensive, customizable, and developer-friendly solution for modern Next.js applications needing efficient image management and a polished user experience.