Uploading files from frontend in Supabase - Mini Project: Build & Apply

Uploading files from frontend using Supabase

📖 Scenario: You are building a simple web app where users can upload images to your cloud storage using Supabase. You want to create a basic frontend that lets users select a file and upload it to Supabase storage.

🎯 Goal: Build a frontend JavaScript code snippet that uploads a selected file to Supabase storage bucket named user-uploads.

📋 What You'll Learn

Create a file input element to select files

Initialize Supabase client with a placeholder URL and anon key

Write a function to upload the selected file to the user-uploads bucket

Handle upload success and error states

💡 Why This Matters

🌍 Real World

Uploading files from a web frontend to cloud storage is common in apps like photo galleries, document managers, and social media platforms.

💼 Career

Knowing how to integrate frontend file uploads with cloud storage services like Supabase is a valuable skill for frontend and full-stack developers.

1

Create file input and initialize Supabase client

Create a constant called supabaseUrl and set it to the string "https://xyzcompany.supabase.co". Then create a constant called supabaseKey and set it to the string "public-anonymous-key". Next, create a constant called supabase and initialize it by calling createClient(supabaseUrl, supabaseKey). Finally, create an HTML file input element with id="fileInput".

Supabase

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseKey);

// Create a file input element with id "fileInput"
// Your code here

Hint

Use const to declare variables. Use document.body.innerHTML to add the file input element.

2

Add a config variable for the storage bucket name

Create a constant called bucketName and set it to the string "user-uploads".

Supabase

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseKey);

const bucketName = "user-uploads";

// Your code here

Hint

Just declare a constant with the exact name and value.

3

Write the upload function to send the file to Supabase storage

Write an async function called uploadFile that takes a parameter file. Inside, call supabase.storage.from(bucketName).upload(file.name, file) and store the result in a constant called result. Then return result.

Supabase

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseKey);

const bucketName = "user-uploads";

async function uploadFile(file) {
  // Your code here
}

Hint

Use await to wait for the upload. Use the exact method chain supabase.storage.from(bucketName).upload(file.name, file).

4

Add event listener to upload file on selection

Add an event listener to the element with id="fileInput" for the change event. Inside the listener, get the first selected file from event.target.files[0]. Then call uploadFile(file) and store the result in uploadResult. Finally, check if uploadResult.error exists; if yes, set document.body.innerHTML to "Upload failed", else set it to "Upload successful".

Supabase

const supabaseUrl = "https://xyzcompany.supabase.co";
const supabaseKey = "public-anonymous-key";
const supabase = createClient(supabaseUrl, supabaseKey);

const bucketName = "user-uploads";

async function uploadFile(file) {
  const result = await supabase.storage.from(bucketName).upload(file.name, file);
  return result;
}

const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", async (event) => {
  // Your code here
});

Hint

Use addEventListener on the file input. Use event.target.files[0] to get the selected file.

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