Skip to main content

from.upload()

Uploads a file to an existing bucket.

const avatarFile = event.target.files[0]
const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('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: insert
  • For React Native, using either Blob, File or FormData does not work as intended. Upload file using ArrayBuffer from base64 file data instead, see example below.

Examples​

Upload file​

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

Upload file using ArrayBuffer from base64 file data​

import { decode } from 'base64-arraybuffer'

const { data, error } = await supabase
  .storage
  .from('avatars')
  .upload('public/avatar1.png', decode('base64FileData'), {
    contentType: 'image/png'
  })