Uploading files from frontend in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What happens when you upload a file larger than the allowed size in Supabase Storage?

You try to upload a 15MB file to Supabase Storage, but the maximum allowed file size is 10MB. What will be the result?

A The file uploads successfully but is truncated to 10MB.

B The upload is queued and waits until the file size is reduced.

C The upload succeeds but the file is corrupted.

D The upload fails with an error indicating the file size exceeds the limit.

💡 Hint

Think about how storage services handle files that are too large.

Supabase Storage rejects files that exceed the configured maximum size and returns an error immediately.

❓ Configuration

intermediate

Which code snippet correctly uploads a file from a frontend input to Supabase Storage?

You have a file input in your frontend and want to upload the selected file to Supabase Storage bucket named 'avatars'. Which code snippet correctly performs this upload?

Supabase

const file = event.target.files[0];
const { data, error } = await supabase.storage.from('avatars').upload('public/' + file.name, file);

A const { data, error } = await supabase.storage.from('avatars').upload(file.name, file);

B const { data, error } = await supabase.storage.from('avatars').upload('public/' + file.name, file);

C const { data, error } = await supabase.storage.from('avatars').upload('public/', file);

D const { data, error } = await supabase.storage.upload('avatars/public/' + file.name, file);

💡 Hint

Remember the method chaining and parameters for Supabase Storage upload.

The correct method is supabase.storage.from(bucket).upload(path, file). Option B uses this correctly with a full path including folder and filename.

❓ security

advanced

How to securely restrict file access after uploading to Supabase Storage?

After uploading user profile pictures to Supabase Storage, you want to ensure only the owner can access their picture. Which approach achieves this?

A Make the storage bucket public and rely on frontend code to hide unauthorized files.

B Store files in a public bucket and rename files with random names to prevent guessing.

C Make the storage bucket private and generate signed URLs for authorized users to access files.

D Upload files to a public bucket and restrict access using CORS settings.

💡 Hint

Think about how to control access at the storage level, not just frontend.

Making the bucket private and using signed URLs ensures only authorized users can access files securely. Other options expose files publicly or rely on weak protections.

❓ Architecture

advanced

Best architecture to handle large file uploads from frontend to Supabase Storage?

You expect users to upload large video files (hundreds of MBs). What architecture pattern helps handle this efficiently and reliably?

A Use direct uploads from frontend to Supabase Storage with chunked uploads and progress tracking.

B Upload files first to your backend server, then backend uploads to Supabase Storage synchronously.

C Send files via email to an admin who uploads them manually to Supabase Storage.

D Compress files on frontend and upload them as base64 strings in a single request to backend.

💡 Hint

Consider scalability and user experience for large files.

Direct uploads with chunking reduce backend load and improve upload reliability and user feedback. Backend uploads for large files can cause delays and resource issues.

✅ Best Practice

expert

What is the recommended way to handle file naming to avoid overwriting in Supabase Storage?

You want to upload user files without accidentally overwriting existing files with the same name. Which naming strategy is best?

A Prefix filenames with a unique user ID and a timestamp before uploading.

B Use the original filename as is, trusting users to upload unique names.

C Overwrite existing files with the same name to save storage space.

D Upload all files to the root folder without any prefix or folder structure.

💡 Hint

Think about how to avoid collisions in a shared storage bucket.

Prefixing filenames with unique identifiers like user ID and timestamp ensures uniqueness and prevents overwriting. Other options risk data loss or confusion.

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