from.upload()

Uploads a file to an existing bucket.

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

Parameters#

  • pathrequired
    string

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

  • fileBodyrequired
    string
    |
    ArrayBuffer
    |
    ArrayBufferView
    |
    Blob
    |
    Buffer
    |
    File
    |
    FormData
    |
    ReadableStream
    |
    ReadableStream
    |
    URLSearchParams

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

      Properties

    • URLSearchParamsrequired
      object

      No description provided.

    • stringrequired
      object

      No description provided.

    • ReadableStreamrequired
      object

      No description provided.

    • ReadableStreamrequired
      object

      No description provided.

    • FormDatarequired
      object

      No description provided.

    • Filerequired
      object

      No description provided.

    • Bufferrequired
      object

      No description provided.

    • Blobrequired
      object

      No description provided.

    • ArrayBufferViewrequired
      object

      No description provided.

    • ArrayBufferrequired
      object

      No description provided.

  • FileOptionsrequired
    object

    No description provided.

      Properties

    • cacheControloptional
      string

      The number of seconds the asset is cached in the browser and in the Supabase CDN. This is set in the Cache-Control: max-age=<seconds> header. Defaults to 3600 seconds.

    • contentTypeoptional
      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.

    • upsertoptional
      boolean

      When upsert is set to true, the file is overwritten if it exists. When set to false, an error is thrown if the object already exists. Defaults to false.

Notes#

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

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

Upload file using ArrayBuffer from base64 file data#

1import { decode } from 'base64-arraybuffer'
2
3const { data, error } = await supabase
4  .storage
5  .from('avatars')
6  .upload('public/avatar1.png', decode('base64FileData'), {
7    contentType: 'image/png'
8  })