JavaScript: Upload a file

Uploads a file to an existing bucket.

• RLS policy permissions required:
  • buckets table permissions: none
  • objects table permissions: only insert when you are uploading new files and select, insert and update when you are upserting files
• 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.

Parameters

• path

  (Required)

  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.

• fileBody

  (Required)

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

• fileOptions

  (Optional)

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