Standard Uploads
Learn how to upload files to Supabase Storage.
Uploading
The standard file upload method is ideal for small files that are not larger than 6MB.
It uses the traditional multipart/form-data
format and is simple to implement using the supabase-js SDK. Here's an example of how to upload a file using the standard upload method:
Though you can upload up to 5GB files using the standard upload method, we recommend using TUS Resumable Upload for uploading files greater than 6MB in size for better reliability.
_14import { createClient } from '@supabase/supabase-js'_14_14// Create Supabase client_14const supabase = createClient('your_project_url', 'your_supabase_api_key')_14_14// Upload file using standard upload_14async function uploadFile(file) {_14 const { data, error } = await supabase.storage.from('bucket_name').upload('file_path', file)_14 if (error) {_14 // Handle error_14 } else {_14 // Handle success_14 }_14}
Overwriting files
When uploading a file to a path that already exists, the default behavior is to return a 400 Asset Already Exists
error.
If you want to overwrite a file on a specific path you can set the upsert
options to true
or using the x-upsert
header.
_10// Create Supabase client_10const supabase = createClient('your_project_url', 'your_supabase_api_key')_10_10await supabase.storage.from('bucket_name').upload('file_path', file, {_10 upsert: true,_10})
We do advise against overwriting files when possible, as our Content Delivery Network will take sometime to propagate the changes to all the edge nodes leading to stale content. Uploading a file to a new path is the recommended way to avoid propagation delays and stale content.
Content type
By default, Storage will assume the content type of an asset from the file extension. If you want to specify the content type for your asset simply pass the contentType
option during upload.
_10// Create Supabase client_10const supabase = createClient('your_project_url', 'your_supabase_api_key')_10_10await supabase.storage.from('bucket_name').upload('file_path', file, {_10 contentType: 'image/jpeg',_10})
Concurrency
When two or more clients upload a file to the same path, the first client to complete the upload will succeed and the other clients will receive a 400 Asset Already Exists
error.
If you provide the x-upsert
header the last client to complete the upload will succeed instead.