LovableSupabaseBeginner7 min read

How to Add File Storage to Your Lovable App with Supabase

Let users upload and manage files like profile pictures, documents, and images in your Lovable app using Supabase Storage.

Before you start

✓A Lovable app connected to Supabase
✓Supabase project with Storage enabled

Step by step

Create a storage bucket

In your Supabase dashboard, go to Storage and create a new bucket for user uploads.

# Supabase Dashboard → Storage → New Bucket
# Name: avatars (or 'uploads')
# Public: Yes (for profile pictures) or No (for private docs)

Set up storage policies

Create RLS policies so users can only upload and access their own files.

-- Allow authenticated users to upload:
CREATE POLICY "Users can upload" ON storage.objects
FOR INSERT TO authenticated
WITH CHECK (bucket_id = 'avatars');

-- Allow public read access:
CREATE POLICY "Public read" ON storage.objects
FOR SELECT USING (bucket_id = 'avatars');

Create the upload component

Ask Lovable to build a file upload component that sends files to Supabase Storage.

Paste this into Lovable:

Create a profile picture upload component that:
1. Shows the current avatar as a circle with a camera icon overlay
2. Clicking opens a file picker (images only, max 5MB)
3. Uploads the file to the 'avatars' bucket in Supabase Storage
4. Uses the user's ID as the filename to overwrite old avatars
5. Shows upload progress
6. Updates the user's avatar_url in the profiles table after upload

Display uploaded files

Show the uploaded images in your app by getting the public URL from Supabase.

Paste this into Lovable:

Show the user's profile picture everywhere in the app by:
1. Getting the public URL from Supabase Storage using getPublicUrl
2. Using the avatar_url from the profiles table as fallback
3. Showing a default avatar icon if no picture exists
4. Adding proper image sizing and lazy loading

Add file management

Let users delete old uploads and manage their files.

Paste this into Lovable:

Add a 'Remove photo' button to the profile picture component that:
1. Deletes the file from Supabase Storage
2. Sets avatar_url to null in the profiles table
3. Shows the default avatar icon
4. Asks for confirmation before deleting