Uploading files from frontend in Supabase - Step-by-Step Execution

Process Flow - Uploading files from frontend

User selects file

↓

Frontend reads file

↓

Frontend sends file to Supabase Storage

↓

Supabase stores file

↓

Supabase returns file URL or status

↓

Frontend shows upload result

The user picks a file, the frontend sends it to Supabase Storage, which saves it and returns a result to the frontend.

Execution Sample

Supabase

const file = event.target.files[0];
const { data, error } = await supabase.storage
  .from('avatars')
  .upload('public/avatar.png', file);
if (error) console.error(error);
else console.log('Upload success', data);

This code uploads a selected file to the 'avatars' bucket in Supabase Storage and logs the result.

Process Table

Step	Action	Input/Condition	Result	Next Step
1	User selects file	File chosen in input	File object created	Frontend reads file
2	Frontend reads file	File object	File ready for upload	Send file to Supabase Storage
3	Send file to Supabase Storage	Call upload API with file	Upload request sent	Wait for response
4	Supabase stores file	File received	File saved in bucket	Return upload result
5	Supabase returns result	Upload success or error	Response with data or error	Frontend handles response
6	Frontend shows result	Response data or error	User sees success or error message	End

💡 Upload completes when Supabase returns success or error and frontend shows result

Status Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
file	undefined	File object from input	File object sent to upload	Upload response received	Upload response handled
data	undefined	undefined	undefined	Upload metadata or null	Logged or used in UI
error	undefined	undefined	undefined	Error object or null	Logged or shown to user

Key Moments - 3 Insights

Why do we get a File object after selecting a file?

When the user picks a file, the browser creates a File object representing it, as shown in step 1 of the execution_table.

What happens if the upload API returns an error?

The error is captured in the 'error' variable at step 5 and then logged or shown to the user in step 6.

Why do we wait after sending the upload request?

Because uploading is asynchronous, the frontend waits for Supabase to confirm success or failure before proceeding, as shown between steps 3 and 5.

Visual Quiz - 3 Questions

Look at the execution_table, what variable holds the file after user selection?

A error

B data

C file

D upload

💡 Hint

Check variable_tracker column 'After Step 1' for 'file'

At which step does Supabase confirm the file is saved?

A Step 4

B Step 2

C Step 5

D Step 6

💡 Hint

See execution_table row where 'Supabase stores file' action happens

If the upload fails, which variable will contain the error?

A file

B error

C data

D response

💡 Hint

Check variable_tracker for error after Step 5

Concept Snapshot

Uploading files from frontend to Supabase:
1. User picks file -> browser creates File object
2. Frontend calls supabase.storage.from(bucket).upload(path, file)
3. Supabase stores file and returns success or error
4. Frontend handles response and shows result
Always handle errors and confirm upload success.

Full Transcript

Uploading files from the frontend to Supabase Storage involves the user selecting a file, which the browser turns into a File object. The frontend then sends this file to Supabase using the upload API. Supabase stores the file in the specified bucket and returns a response indicating success or failure. The frontend receives this response and updates the user interface accordingly. Key variables include 'file' for the selected file, 'data' for upload metadata, and 'error' for any upload issues. The process is asynchronous, so the frontend waits for Supabase's confirmation before proceeding.

Practice

1. What does the supabase.storage.from(bucket).upload(path, file) method do in a frontend app?

easy

A. Downloads a file from the storage bucket

B. Uploads a file to the specified storage bucket at the given path

C. Deletes a file from the storage bucket

D. Lists all files in the storage bucket

Solution

1. Step 1: Understand the method purpose

   The method upload(path, file) is used to send a file from the frontend to the backend storage.

2. Step 2: Identify the action on storage

   Since it uses upload, it means adding or saving a file, not deleting or downloading.

3. Final Answer:

   Uploads a file to the specified storage bucket at the given path -> Option B

4. Quick Check:

   Upload method = Upload file [OK]

Hint: Upload method means sending file to storage [OK]

Common Mistakes:

• Confusing upload with download or delete
• Thinking it lists files instead of uploading
• Ignoring the bucket and path parameters

2. Which of the following is the correct syntax to upload a file named myFile to the bucket avatars at path user1/profile.png using Supabase storage in frontend JavaScript?

easy

A. supabase.storage.from('avatars').upload('user1/profile.png', myFile)

B. supabase.storage.upload('avatars', 'user1/profile.png', myFile)

C. supabase.storage.from('avatars').upload(myFile, 'user1/profile.png')

D. supabase.upload.storage.from('avatars').file('user1/profile.png', myFile)

Solution

1. Step 1: Check method chaining and parameters

   The correct method chain is supabase.storage.from(bucket).upload(path, file).

2. Step 2: Match parameters order

   The first argument to upload is the path string, second is the file object.

3. Final Answer:

   supabase.storage.from('avatars').upload('user1/profile.png', myFile) -> Option A

4. Quick Check:

   Correct method and parameter order = supabase.storage.from('avatars').upload('user1/profile.png', myFile) [OK]

Hint: Remember: from(bucket).upload(path, file) [OK]

Common Mistakes:

• Swapping file and path arguments
• Using upload directly on storage without from()
• Incorrect method chaining order

3. Given this code snippet, what will be logged if the upload succeeds?

const { data, error } = await supabase.storage.from('docs').upload('file.txt', fileInput.files[0]);
if (error) {
  console.log('Upload failed');
} else {
  console.log('Upload succeeded:', data);
}

medium

A. Upload succeeded: { path: 'file.txt', ... }

B. SyntaxError due to await usage

C. Upload succeeded: undefined

D. Upload failed

Solution

1. Step 1: Understand the upload response

   On success, data contains info about the uploaded file, including its path.

2. Step 2: Check error handling

   If error is null, the else block runs and logs success with data.

3. Final Answer:

   Upload succeeded: { path: 'file.txt', ... } -> Option A

4. Quick Check:

   Success logs data object = Upload succeeded: { path: 'file.txt', ... } [OK]

Hint: Success logs data object, error logs failure [OK]

Common Mistakes:

• Assuming data is undefined on success
• Confusing error presence with success
• Thinking await causes syntax error outside async

4. You wrote this code to upload a file but it always logs 'Upload succeeded' even though the file wasn't uploaded. What is the likely mistake?

const { data, error } = supabase.storage.from('images').upload('pic.png', file);
if (error) {
  console.log('Upload failed');
} else {
  console.log('Upload succeeded');
}

medium

A. Wrong bucket name 'images'

B. File variable 'file' is not defined

C. Missing await before supabase.storage.from(...).upload(...)

D. Upload method does not exist on storage

Solution

1. Step 1: Check async usage

   The upload method returns a promise and must be awaited to get data and error.

2. Step 2: Identify missing await effect

   Without await, { data, error } destructures the unresolved Promise, leaving both undefined. Thus if (error) is false, incorrectly logging success.

3. Final Answer:

   Missing await before supabase.storage.from(...).upload(...) -> Option C

4. Quick Check:

   Async calls need await to get results [OK]

Hint: Always await async upload calls [OK]

Common Mistakes:

• Not awaiting the upload promise
• Assuming upload is synchronous
• Ignoring file variable existence

5. You want to upload multiple files selected by the user to the bucket uploads and keep their original filenames. Which approach correctly uploads all files and handles errors properly?

hard

A. Use upload with a fixed filename for all files to overwrite previous uploads

B. Upload all files at once by passing the array to upload method

C. Upload files without awaiting and ignore errors for faster UI

D. Use a loop with await inside to upload each file and check errors after each upload

Solution

1. Step 1: Understand multiple file uploads

   Supabase storage upload handles one file at a time, so loop over files.

2. Step 2: Handle async and errors properly

   Use await inside the loop to wait for each upload and check for errors to inform the user.

3. Final Answer:

   Use a loop with await inside to upload each file and check errors after each upload -> Option D

4. Quick Check:

   Upload files one by one with await and error check [OK]

Hint: Upload files one by one with await and check errors [OK]

Common Mistakes:

• Passing array directly to upload method
• Not awaiting uploads causing race conditions
• Overwriting files by using same filename