Beyond just storing structured data, Supabase excels at handling unstructured data like images, videos, and documents. The Supabase client libraries provide a seamless way to upload, download, and manage these files within your application. This is powered by Supabase Storage, which acts as an object storage solution, similar to AWS S3 or Google Cloud Storage, but integrated directly into your Supabase project.
To interact with Supabase Storage, you'll primarily use the storage property available on your Supabase client instance. This object gives you access to your storage buckets and the files within them.
const { data, error } = await supabase.storage.from('your-bucket-name').upload('path/to/your/file.jpg', file);The upload method is straightforward. It takes two main arguments: the path where you want to store the file within the bucket (including its name and extension), and the actual file object itself (typically obtained from a file input element in your frontend). It returns data containing information about the uploaded file, or an error object if something goes wrong.
You can also retrieve a public URL for a file to embed it in your HTML or use it directly. This is incredibly useful for displaying images or linking to documents.
const { data, error } = supabase.storage.from('your-bucket-name').getPublicUrl('path/to/your/file.jpg');The getPublicUrl method returns an object with a publicUrl property, which is the URL you can use. Keep in mind that for files to be publicly accessible, you'll need to configure the appropriate access control policies for your storage bucket within the Supabase dashboard.
Deleting files is also a common operation. You can remove files from your storage buckets using the remove method.
const { data, error } = await supabase.storage.from('your-bucket-name').remove(['path/to/your/file.jpg']);The remove method accepts an array of file paths to delete. It returns data indicating the success of the deletion operation.
graph TD
A[User uploads file]
B[Client-side JS captures file]
C[Supabase Storage SDK used]
D[File uploaded to Supabase Bucket]
E[Storage SDK returns upload status/URL]
F[Optional: Save file URL to database]
A --> B
B --> C
C --> D
D --> E
E --> F
This sequence illustrates a typical file upload workflow. The client-side application captures the file, uses the Supabase SDK to upload it to a designated bucket, and then receives confirmation and potentially a public URL. You might then choose to store this URL alongside other metadata in your Supabase database.
Managing file permissions is crucial for security. Supabase Storage allows you to define fine-grained access control policies for your buckets and individual files, ensuring that only authorized users can upload, download, or delete files. You can configure these policies directly in the Supabase dashboard under the 'Storage' section.