How to Build a File Sharing App with Lovable

1Set up a file sharing system in Supabase:
2
31. Create a PRIVATE Storage bucket named 'user-files' with:
4   - Public: false
5   - File size limit: 50MB
6   - Allowed MIME types: image/*, application/pdf, application/zip, text/*, video/mp4, audio/*
7
82. Storage bucket RLS policies:
9   - SELECT: (auth.uid()::text = (storage.foldername(name))[1])
10   - INSERT: (auth.uid()::text = (storage.foldername(name))[1])
11   - DELETE: (auth.uid()::text = (storage.foldername(name))[1])
12
133. Database tables:
14   - files: id, user_id, storage_path (text, unique), filename (text), folder_path (text default '/'), size_bytes (bigint), mime_type (text), is_starred (bool default false), created_at, updated_at
15   - shared_links: id, file_id, user_id, signed_url (text), token (text), expires_at (timestamptz), is_revoked (bool default false), download_count (int default 0), created_at
16   - user_storage: id (references auth.users), total_bytes_used (bigint default 0), quota_bytes (bigint default 1073741824) -- 1GB default
17
184. RLS on database tables:
19   - files: users can SELECT/INSERT/UPDATE/DELETE their own rows (user_id = auth.uid())
20   - shared_links: users can SELECT/UPDATE their own rows (user_id = auth.uid()). Service role for INSERT.
21   - user_storage: users can SELECT their own row. Service role for INSERT/UPDATE.
22
235. SQL function update_storage_usage(p_user_id uuid, p_delta bigint) RETURNS void:
24   INSERT INTO user_storage (id, total_bytes_used) VALUES (p_user_id, GREATEST(0, p_delta))
25   ON CONFLICT (id) DO UPDATE SET total_bytes_used = GREATEST(0, user_storage.total_bytes_used + p_delta)

1Build a FileUploader component at src/components/FileUploader.tsx.
2
3Requirements:
4- A drop zone div with dashed border that:
5  - Changes border color and background on dragover
6  - Accepts file drops (onDrop event) and click-to-open file input
7  - Shows 'Drop files here or click to browse' text with an upload icon
8- Props: currentFolder: string (the current folder path), onUploadComplete: () => void
9- Multi-file support: handle FileList from both drag and input
10- Before uploading, check quota: fetch user_storage for the current user. If total_bytes_used + sum of new file sizes > quota_bytes, show an Alert: 'Not enough storage. You need X MB but only Y MB available.'
11- For each file:
12  - Generate storage path: {user_id}/{currentFolder}/{filename} (replace spaces with underscores)
13  - Call supabase.storage.from('user-files').upload(storagePath, file, { onUploadProgress: (p) => setProgress(p.loaded / p.total * 100) })
14  - On success, insert a files row: { user_id, storage_path, filename, folder_path: currentFolder, size_bytes: file.size, mime_type: file.type }
15  - Call update_storage_usage(user_id, file.size) RPC
16  - Show a per-file Progress bar component
17  - Show a green check on completion or red X on failure
18- Call onUploadComplete() after all uploads finish

1Build the file browser at src/pages/FileBrowser.tsx.
2
3State:
4- currentFolder: string (starts as '/', updated by navigation)
5
6Requirements:
7- Breadcrumb navigation: split currentFolder by '/' and render each segment as a Button that navigates to that depth. Root shows a Home icon.
8- Folder sidebar: derive unique folder paths from the files table WHERE user_id = auth.uid() AND folder_path LIKE currentFolder + '%'. Extract the immediate subdirectory segment after currentFolder. Render as clickable folder Buttons with folder icon.
9- File list: fetch files WHERE user_id = auth.uid() AND folder_path = currentFolder ORDER BY created_at DESC
10- Each file row in a Table shows: file type icon (image/PDF/zip/text based on mime_type), filename, size (formatted as KB/MB), modified date (relative), a DropdownMenu with actions
11- DropdownMenu actions: Download (calls getSignedUrl for 5 min and triggers download), Share (opens Share Dialog), Rename (inline edit), Star (toggle is_starred), Move to folder, Delete
12- Top right: 'New Folder' Button that shows an Input to type a folder name and creates the first file in that path (or just updates the currentFolder state since folders are virtual)
13- Star filter: a 'Starred' toggle above the file list that filters to is_starred = true across all folders
14- Storage usage indicator at the bottom: 'X.X GB of 1 GB used' with a thin Progress bar

1Build two things:
2
31. Edge Function at supabase/functions/create-share-link/index.ts:
4- Accept POST body: { file_id: string, expires_in_hours: number (1|24|168|720) }
5- Verify the requesting user owns the file (SELECT from files WHERE id = file_id AND user_id = auth.uid() using the user's JWT)
6- Calculate expiresInSeconds = expires_in_hours * 3600
7- Call supabase.storage.from('user-files').createSignedUrl(file.storage_path, expiresInSeconds) using service role client
8- Insert a shared_links row: { file_id, user_id, signed_url: data.signedUrl, token: data.token, expires_at: new Date(Date.now() + expiresInSeconds * 1000).toISOString() }
9- Return { share_url: data.signedUrl, expires_at }
10
112. Share Dialog component at src/components/ShareDialog.tsx:
12- Props: fileId: string, filename: string
13- A Select for expiry: '1 hour', '24 hours', '7 days', '30 days'
14- A 'Generate Link' Button that calls the create-share-link Edge Function
15- After generation, shows the signed URL in a read-only Input with a Copy button
16- Shows expiry time as 'Link expires: [relative time]'
17- A 'Manage all shares' link that navigates to the Shared Links page

1Build a Shared Links page at src/pages/SharedLinks.tsx.
2
3Requirements:
4- Fetch all rows from shared_links WHERE user_id = auth.uid() JOIN files ON file_id = files.id ORDER BY created_at DESC
5- Show links in a Table with columns:
6  - File icon + filename (from joined files row)
7  - Shared link (truncated URL with Copy button)
8  - Downloads (download_count integer)
9  - Expires (relative time, red text if less than 1 hour remaining, 'Expired' badge if past expires_at)
10  - Status (Active badge in green, Revoked in gray, Expired in red)
11  - Revoke button (only for active, non-expired links) with AlertDialog confirmation
12- Revoking sets is_revoked = true on the shared_links row
13- Group links in two sections: 'Active' (not revoked, not expired) and 'Expired / Revoked'
14- Show a count of active shares and a note that shares expire automatically