Skip to main content
Hostwares

How to Upload Images to Supabase Storage

sowad sheikh··1 min read

Modern applications often need image uploads. Profile pictures, product images, blog images, documents, and other files can be stored using Supabase Storage.

Create a Storage Bucket

Open the Storage section of your Supabase project. Create a bucket for the type of files your application needs. For example:

avatars

or

product-images

Add an Upload Form

Your frontend can use a file input to allow users to select an image. Before uploading, check the file type and size.

Upload the File

Use the Supabase Storage client to upload the selected file to the appropriate bucket. It's useful to give files unique names so users don't accidentally overwrite each other's uploads.

Store the File Reference

Your application can store the file path or URL in a database record. For example, a user's profile record can contain the path to their avatar.

Configure Access

Decide whether the files should be public or private. Private files should require appropriate authorization before users can access them.

Test Uploads

Test small files, large files, invalid file types, and duplicate names. Once the storage rules are working correctly, connect the feature to your production application.

Ready to deploy?

Launch your app on Hostwares — start for $1.00/mo with auto-scaling & global CDN.

Start for $1.00/mo

Ready to deploy? Start for $1.00/mo

Deploy now