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
| Variable | Replace 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.