Overview

The Shadcn Image Uploader is an innovative and reusable React component designed to streamline the process of uploading and editing images. Building on the sleek and intuitive Shadcn UI framework, this component offers users both a robust image selection tool and an engaging image cropping experience. Whether you're a developer looking to enhance your application or a user wishing to seamlessly manage images, this component provides the essential features to meet those needs.

This uploader supports drag-and-drop functionality, allowing users to easily upload images while also ensuring proper validation of file types and sizes. With interactive cropping options that include zoom and pan, users have complete control over their images. This makes the Shadcn Image Uploader an excellent choice for anyone needing a reliable image uploading solution.

Features

Drag & Drop or File Selection: Effortlessly upload images using simple drag-and-drop or traditional file selection methods.
File Type Validation: Ensures that only allowed file types, such as JPEG, PNG, and WEBP, are uploaded, maintaining data integrity.
File Size Validation: Configurable maximum file size (default is 5MB) to prevent oversized uploads.
Image Preview: Displays a real-time preview of the selected image for instant feedback before finalizing uploads.
Interactive Crop with Zoom and Pan: Users can accurately adjust their cropping area, zoom in, and pan around for precise edits.
Customizable Aspect Ratio: Allows for tailored cropping based on specific width-to-height ratios, fitting the needs of various applications.
Blob or File Output: Provides cropped images as a Blob through a callback function, making it easy to integrate into other workflows.
Fully Customizable: Built with Shadcn UI components which allow for extensive customization to match different project styles.

0xrasla

Dropit React

Shadcn Dnd Kit

Shadcn Image Uploader