Lovablefeatureintermediate

Add Image Upload to Lovable App

Add image uploads to Supabase Storage with drag-and-drop, progress indicators, compression, and preview.

What you'll get

A reusable image upload component with drag-drop, compression, progress bar, and Supabase Storage integration.

The Prompt

Add image upload functionality to my Lovable app using Supabase Storage.

REQUIREMENTS:
1. Create a reusable ImageUpload component with drag-and-drop zone and click-to-browse. Accept images only (jpg, png, webp, gif) with a 5MB size limit.
2. Show an image preview immediately after selection (before upload) using URL.createObjectURL.
3. Compress images client-side before upload using browser-image-compression library. Target max 1MB and 1920px width.
4. Upload to Supabase Storage bucket with progress indicator (percentage bar).
5. Generate a unique filename using UUID to prevent collisions. Organize in folders by date (uploads/2024/03/uuid.jpg).
6. After successful upload, return the public URL and save it to the relevant table column.
7. Support multiple file uploads with a grid preview of selected images.
8. Add error handling for: file too large, wrong format, upload failure, and storage quota exceeded.
9. Include a delete button on uploaded images that removes from both Storage and database.

DATABASE:
- Create Supabase Storage bucket "uploads" with public access for images.
- RLS on storage: authenticated users can upload, anyone can read.

ENVIRONMENT VARIABLES:
- SUPABASE_URL (already set)
- SUPABASE_ANON_KEY (already set)

SECURITY:
- Validate file type server-side, not just client-side.
- Set max file size in Storage bucket policies.
- Use signed URLs for private uploads if needed.

Replace these variables

VariableReplace with
[BUCKET_NAME]Supabase Storage bucket name (e.g., uploads, avatars)
[MAX_FILE_SIZE]Maximum file size in MB (e.g., 5)

Tips for best results

Create the Storage bucket in Supabase Dashboard first and set the correct policies.

Always compress images client-side before upload — it saves bandwidth and storage costs.

Follow-up prompts

Add image cropping

Add an image cropping modal that opens after file selection. Let users crop to preset ratios (1:1, 16:9, 4:3) before uploading.

Add gallery manager

Add a gallery management interface where users can reorder uploaded images with drag-and-drop, add captions, and set a cover image.

Related prompts