Standard Uploads

Uploading#

The standard file upload method is ideal for small files that are not larger than 6MB.

You implement file uploads with the supabase-js SDK using the traditional multipart/form-data format. Here's an example of how to upload a file using the standard upload method:

1
import { createClient } from '@supabase/supabase-js'
2
3
// Create Supabase client
4
const supabase = createClient('your_project_url', 'your_supabase_api_key')
5
6
// Upload file using standard upload
7
async function uploadFile(file) {
8
  const { data, error } = await supabase.storage.from('bucket_name').upload('file_path', file)
9
  if (error) {
10
    // Handle error
11
  } else {
12
    // Handle success
13
  }
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.

1
// Create Supabase client
2
const supabase = createClient('your_project_url', 'your_supabase_api_key')
3
4
await supabase.storage.from('bucket_name').upload('file_path', file, {
5
  upsert: true,
6
})

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, pass the contentType option during upload.

1
// Create Supabase client
2
const supabase = createClient('your_project_url', 'your_supabase_api_key')
3
4
await supabase.storage.from('bucket_name').upload('file_path', file, {
5
  contentType: 'image/jpeg',
6
})

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.