from.update()

Replaces an existing file at the specified path with a new one.

const avatarFile = event.target.files[0]
const { data, error } = await supabase
.storage
.from('avatars')
.update('public/avatar1.png', avatarFile, {
cacheControl: 3600,
upsert: false
})

Parameters

  • pathrequiredstring

    The relative file path. Should be of the format folder/subfolder/filename.png. The bucket must already exist before attempting to upload.

  • fileBodyrequiredArrayBuffer | ArrayBufferView | Blob | Buffer | File | FormData | ReadableStream | ReadableStream | URLSearchParams | string

    The body of the file to be stored in the bucket.

  • fileOptionsoptionalFileOptions

    HTTP headers. cacheControl: string, the Cache-Control: max-age=<seconds> seconds value. contentType: string, the Content-Type header value. Should be specified if using a fileBody that is neither Blob nor File nor FormData, otherwise will default to text/plain;charset=UTF-8. upsert: boolean, whether to perform an upsert.

Notes

  • Policy permissions required:
    • buckets permissions: none
    • objects permissions: update and select
  • For React Native, using either Blob, File or FormData does not work as intended. Update file using ArrayBuffer from base64 file data instead, see example below.

Examples

Update file

const avatarFile = event.target.files[0]
const { data, error } = await supabase
.storage
.from('avatars')
.update('public/avatar1.png', avatarFile, {
cacheControl: 3600,
upsert: false
})

Update file using ArrayBuffer from base64 file data

import {decode} from 'base64-arraybuffer'
const { data, error } = await supabase
.storage
.from('avatars')
.update('public/avatar1.png', decode('base64FileData'), {
contentType: 'image/png'
})
Edit this page