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:

1
// @noImplicitAny: false
2
3
// ---cut---
4
import { createClient } from '@supabase/supabase-js'
5
6
// Create Supabase client
7
const supabase = createClient('your_project_url', 'your_supabase_api_key')
8
9
// Upload file using standard upload
10
async function uploadFile(file) {
11
  const { data, error } = await supabase.storage.from('bucket_name').upload('file_path', file)
12
  if (error) {
13
    // Handle error
14
  } else {
15
    // Handle success
16
  }
17
}

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
import { createClient } from '@supabase/supabase-js'
2
const file = new Blob()
3
4
// ---cut---
5
// Create Supabase client
6
const supabase = createClient('your_project_url', 'your_supabase_api_key')
7
8
await supabase.storage.from('bucket_name').upload('file_path', file, {
9
  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, pass the contentType option during upload.

1
import { createClient } from '@supabase/supabase-js'
2
const file = new Blob()
3
4
// ---cut---
5
// Create Supabase client
6
const supabase = createClient('your_project_url', 'your_supabase_api_key')
7
8
await supabase.storage.from('bucket_name').upload('file_path', file, {
9
  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.