ephraimduncan / ephraimduncan/blocks

feat: Add Image Cropper Component to File Upload Section

Open
#48 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.8k
Forks
162
Avg merge
3h 11m
Merged PRs (30d)
18

Description

## Overview
Add a new image cropper component to the file upload section that enables users to crop and adjust uploaded images before submission. This enhancement will provide a modern, user-friendly solution for image manipulation.

## Current State
The blocks library currently has 6 file upload variants (file-upload-01 through file-upload-06) that handle basic file uploading with:
- Drag & drop functionality
- Progress tracking
- File status management (uploading/completed)
- Built with React, Tailwind CSS, and shadcn/ui

## Proposed Solution

### New Component: `ImageCropperUpload`
Create a new component that integrates image cropping functionality with the existing file upload pattern.

#### Modern Tech Stack:
1. **React Cropper Library**: Use `react-easy-crop` or `react-image-crop`
- Lightweight and performant
- Touch-friendly interface
- Supports multiple aspect ratios
- CSS-free (Tailwind compatible)

2. **Alternative: Next.js Native Solution**
- Use Canvas API for client-side image manipulation
- Zero external dependencies option

#### Key Features:
- **File Selection**: Drag & drop or click to upload
- **Crop Interface**: Interactive crop area with handles
- **Aspect Ratio Controls**: Predefined ratios (1:1, 16:9, 4:3, free)
- **Zoom & Rotate**: Built-in image manipulation
- **Preview**: Real-time preview of cropped result
- **Export**: Generate cropped image blob for upload
- **Mobile Responsive**: Touch-friendly controls
- **TypeScript Support**: Full type safety

#### Component Structure:
```
file-upload/
├── file-upload-07-cropper.tsx // Main component
├── file-upload-07-with-preview.tsx // Variant with live preview
├── file-upload-07-batch-crop.tsx // Variant for multiple images
```

#### Integration Points:
- Extend existing `UploadItem` interface
- Maintain consistent styling with shadcn/ui
- Follow existing component patterns
- Support markdown documentation

## Dependencies to Consider
- `react-easy-crop` (~23KB) or `react-image-crop` (~25KB)
- No additional peer dependencies required

## Acceptance Criteria
- [ ] Component accepts image files (JPG, PNG, GIF)
- [ ] Cropping canvas with interactive handles
- [ ] Aspect ratio selection (free, 1:1, 16:9, 4:3)
- [ ] Zoom and rotation controls
- [ ] Real-time preview of result
- [ ] Generate cropped image blob
- [ ] Mobile responsive design
- [ ] TypeScript types
- [ ] Tailwind CSS styling
- [ ] Markdown documentation
- [ ] Accessible (WCAG 2.1 AA)

## Resources
- react-easy-crop: https://github.com/ValentinH/react-easy-crop
- react-image-crop: https://github.com/DominicTobias/react-image-crop
- Canvas API: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.