Lovable prompt to build a file upload endpoint
File uploads are an attack surface first and a feature second. This prompt has Lovable put validation in an edge function before any bytes move, scope storage paths to the uploader, and track metadata in a files table, so you finish with uploads that reject spoofed types and survive dropped connections.
Last updated
Build a file upload flow backed by Supabase Storage with server-side validation. Bucket and paths: a private bucket named user-files, objects written under a path prefixed with the uploader's user id, and storage policies allowing each user to read, write, and delete only inside their own prefix. Upload path: an edge function named request-upload checks the declared MIME type against an allow list of pdf, png, and jpeg, enforces a size ceiling, and returns a signed upload URL plus the final path. The browser uploads directly to storage with that URL, then calls a confirm step that inserts a row into a files table with name, size, mime, and path. UI: a drop zone that also accepts click-to-browse, a per-file progress bar, image thumbnails after upload, a generic icon for pdfs, and a delete action that removes both the storage object and the files row. Validation edge cases: a file renamed to fake its extension gets caught by checking actual content type at the confirm step, zero-byte files are rejected with a message, and duplicate names receive a suffix rather than overwriting. Failure states: an expired signed URL triggers a fresh request automatically, a mid-upload network drop leaves a retry chip on the file card, and a scheduled function cleans storage objects that have no matching files row. Acceptance: a signed-out call to request-upload returns 401, user A cannot fetch user B's file even with the raw path, an oversized file is refused before any bytes move, and deleting a file makes its old signed URL stop working.
Same task in other tools
Questions about this prompt
Why request a signed URL instead of uploading through the edge function?
Routing bytes through a function adds a size ceiling and a slow extra hop. The function's job is deciding whether the upload may happen, then storage takes the bytes directly under policies that scope the path.
How do I allow more file types?
Extend the allow list in request-upload and the confirm-step content check together, updating only one of them recreates the spoofing gap. Name both spots in your follow-up prompt.
Files upload but never appear in the app. What is missing?
The confirm call that inserts the files row failed or was dropped in a later edit, leaving objects without metadata. Check the files table, then have Lovable re-wire the confirm step and run the orphan cleanup.