JavaScript: Upload a file | Supabase Docs (original) (raw)

• Introduction
• Installing
• Initializing
• TypeScript support
• Database
• Fetch data
• Insert data
• Update data
• Upsert data
• Delete data
• Call a Postgres function
• Using filters
• Column is equal to a value
• Column is not equal to a value
• Column is greater than a value
• Column is greater than or equal to a value
• Column is less than a value
• Column is less than or equal to a value
• Column matches a pattern
• Column matches a case-insensitive pattern
• Column is a value
• Column is in an array
• Column contains every element in a value
• Contained by value
• Greater than a range
• Greater than or equal to a range
• Less than a range
• Less than or equal to a range
• Mutually exclusive to a range
• With a common element
• Match a string
• Match an associated value
• Don't match the filter
• Match at least one filter
• Match the filter
• Using modifiers
• Return data after inserting
• Order the results
• Limit the number of rows returned
• Limit the query to a range
• Set an abort signal
• Retrieve one row of data
• Retrieve zero or one row of data
• Retrieve as a CSV
• Override type of successful response
• Partially override or replace type of successful response
• Using explain
• Auth
• Overview
• Create a new user
• Listen to auth events
• Create an anonymous user
• Sign in a user
• Sign in with ID Token
• Sign in a user through OTP
• Sign in a user through OAuth
• Sign in a user through SSO
• Sign out a user
• Send a password reset request
• Verify and log in through OTP
• Retrieve a session
• Retrieve a new session
• Retrieve a user
• Update a user
• Retrieve identities linked to a user
• Link an identity to a user
• Unlink an identity from a user
• Send a password reauthentication nonce
• Resend an OTP
• Set the session data
• Exchange an auth code for a session
• Start auto-refresh session (non-browser)
• Stop auto-refresh session (non-browser)
• Auth MFA
• Enroll a factor
• Create a challenge
• Verify a challenge
• Create and verify a challenge
• Unenroll a factor
• Get Authenticator Assurance Level
• Auth Admin
• Retrieve a user
• List all users
• Create a user
• Delete a user
• Send an email invite link
• Generate an email link
• Update a user
• Delete a factor for a user
• Edge Functions
• Invokes a Supabase Edge Function.
• Realtime
• Subscribe to channel
• Unsubscribe from a channel
• Unsubscribe from all channels
• Retrieve all channels
• Broadcast a message
• Storage
• Create a bucket
• Retrieve a bucket
• List all buckets
• Update a bucket
• Delete a bucket
• Empty a bucket
• Upload a file
• Download a file
• List all files in a bucket
• Replace an existing file
• Move an existing file
• Copy an existing file
• Delete files in a bucket
• Create a signed URL
• Create signed URLs
• Create signed upload URL
• Upload to a signed URL
• Retrieve public URL
• Misc
• Release Notes

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