JavaScript: Replace an existing file

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

• RLS policy permissions required:
  • buckets table permissions: none
  • objects table permissions: update and select
• Refer to the Storage guide on how access control works
• 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.

Parameters

• path

  (Required)

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

• fileBody

  (Required)

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

• fileOptions

  (Optional)

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: true
  \})

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'
  \})