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']);