Uploading files in Firebase - Step-by-Step Execution

Process Flow - Uploading files

User selects file

↓

Start upload to Firebase Storage

↓

Upload in progress

↓

Upload success?

No→Show error message

Yes↓

Get file URL

↓

Use or display file URL

The user picks a file, it uploads to Firebase Storage, then the app checks if upload succeeded and gets the file URL for use.

Execution Sample

Firebase

const file = input.files[0];
const storageRef = firebase.storage().ref('uploads/' + file.name);
storageRef.put(file).then(() => storageRef.getDownloadURL()).then(url => console.log(url));

This code uploads a selected file to Firebase Storage and logs the file's download URL after upload.

Process Table

Step	Action	State Change	Result
1	User selects a file	file variable set to selected file	File ready to upload
2	Create storage reference	storageRef points to 'uploads/filename'	Ready to upload to this path
3	Start upload with put(file)	Upload starts, progress begins	Uploading...
4	Upload completes successfully	Upload state changes to success	File stored in Firebase Storage
5	Get download URL	Retrieve URL from storageRef	URL obtained for file
6	Log URL	URL printed to console	User can access file via URL

💡 Upload completes successfully and URL is retrieved for file access

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
file	undefined	File object	File object	File object	File object	File object	File object
storageRef	undefined	undefined	Reference to 'uploads/filename'	Reference to 'uploads/filename'	Reference to 'uploads/filename'	Reference to 'uploads/filename'	Reference to 'uploads/filename'
uploadState	none	none	none	uploading	success	success	success
downloadURL	undefined	undefined	undefined	undefined	undefined	URL string	URL string

Key Moments - 3 Insights

Why do we need to create a storage reference before uploading?

The storage reference tells Firebase where to store the file. Without it, Firebase doesn't know the upload location. See step 2 in the execution_table.

What happens if the upload fails?

If upload fails, the uploadState won't become 'success' and the code should handle errors (not shown here). Step 4 shows success; if no success, error handling is needed.

Why do we get the download URL after upload?

The download URL lets us access the uploaded file from anywhere. It is only available after successful upload, as shown in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of uploadState after step 3?

A uploading

B none

C success

D failed

💡 Hint

Check the 'uploadState' variable in variable_tracker after step 3

At which step do we get the download URL for the uploaded file?

A Step 3

B Step 5

C Step 2

D Step 6

💡 Hint

Look at the 'Action' column in execution_table for when URL is retrieved

If the user does not select a file, what happens to the 'file' variable?

A It is set to null

B It becomes an empty string

C It remains undefined

D It causes an error immediately

💡 Hint

See variable_tracker 'file' variable at Start and After Step 1

Concept Snapshot

Uploading files to Firebase Storage:
1. User selects a file.
2. Create a storage reference with a path.
3. Upload file using put(file).
4. Wait for upload success.
5. Get download URL to access the file.
Always handle errors for failed uploads.

Full Transcript

Uploading files in Firebase involves the user selecting a file, then the app creating a storage reference to specify where to store the file. The file is uploaded using the put method. During upload, the state changes from none to uploading, and finally to success if the upload completes. After a successful upload, the app retrieves the download URL to access the file. Variables like 'file', 'storageRef', 'uploadState', and 'downloadURL' change their values step by step as the upload progresses. Beginners often wonder why a storage reference is needed, what happens if upload fails, and why the download URL is retrieved after upload. The execution table and variable tracker help visualize these steps clearly.

Practice

1. What is the main purpose of uploading files to Firebase Storage?

easy

A. To save files in the cloud for easy access and backup

B. To delete files from the user's device

C. To convert files into text format

D. To run files as programs on Firebase servers

Solution

1. Step 1: Understand file upload purpose

   Uploading files to Firebase Storage means saving them remotely in the cloud.

2. Step 2: Identify the benefit

   Files saved in the cloud can be accessed anytime and are backed up safely.

3. Final Answer:

   To save files in the cloud for easy access and backup -> Option A

4. Quick Check:

   Uploading files = cloud storage [OK]

Hint: Uploading means saving files online for backup and access [OK]

Common Mistakes:

• Thinking upload deletes local files
• Confusing upload with file conversion
• Believing upload runs files on server

2. Which Firebase Storage method is used to create a reference to a file location before uploading?

easy

A. firebase.storage().ref()

B. firebase.storage().upload()

C. firebase.storage().download()

D. firebase.storage().delete()

Solution

1. Step 1: Identify method to create file location

   firebase.storage().ref() creates a reference to a storage path.

2. Step 2: Confirm usage before upload

   You must create a reference before uploading a file to specify where it goes.

3. Final Answer:

   firebase.storage().ref() -> Option A

4. Quick Check:

   Reference method = ref() [OK]

Hint: Use ref() to point where file will be stored [OK]

Common Mistakes:

• Using upload() directly without ref()
• Confusing download() with upload process
• Trying to delete before uploading

3. What will the following code print if the upload is successful?

const storageRef = firebase.storage().ref('images/photo.jpg');
storageRef.put(file).then(() => console.log('Upload complete')).catch(() => console.log('Upload failed'));

medium

A. Upload failed

B. No output

C. Upload complete

D. SyntaxError

Solution

1. Step 1: Analyze the upload promise

   storageRef.put(file) returns a promise that resolves on success.

2. Step 2: Check the then() handler

   On success, it logs 'Upload complete' to the console.

3. Final Answer:

   Upload complete -> Option C

4. Quick Check:

   Successful upload logs 'Upload complete' [OK]

Hint: Successful upload triggers then() logging 'Upload complete' [OK]

Common Mistakes:

• Assuming catch() runs on success
• Confusing promise syntax
• Expecting no output on success

4. Identify the error in this Firebase file upload code:

const ref = firebase.storage().ref('docs/report.pdf');
ref.put(file).then(() => console.log('Done'));
console.log('Upload started');

medium

A. console.log('Upload started') should be inside then()

B. ref.put() should be ref.upload()

C. ref() is not a valid method

D. Missing catch() to handle upload errors

Solution

1. Step 1: Check upload method correctness

   ref.put(file) is correct to upload files in Firebase Storage.

2. Step 2: Look for error handling

   There is no catch() to handle possible upload failures, which is a best practice.

3. Final Answer:

   Missing catch() to handle upload errors -> Option D

4. Quick Check:

   Always add catch() for upload errors [OK]

Hint: Always add catch() after then() to catch errors [OK]

Common Mistakes:

• Using ref.upload() instead of ref.put()
• Placing console.log before upload completion
• Thinking ref() is invalid method

5. You want to upload a user profile picture and ensure the file is stored under 'users/{userId}/profile.jpg'. Which code snippet correctly sets the storage reference and uploads the file for user ID 'abc123'?

hard

A. const ref = firebase.storage().ref('profile.jpg/users/abc123'); ref.put(file);

B. const ref = firebase.storage().ref('users/abc123/profile.jpg'); ref.put(file);

C. const ref = firebase.storage().ref('users/profile.jpg/abc123'); ref.put(file);

D. const ref = firebase.storage().ref('abc123/users/profile.jpg'); ref.put(file);

Solution

1. Step 1: Understand the required path format

   The file must be stored under 'users/{userId}/profile.jpg', so 'users/abc123/profile.jpg' is correct.

2. Step 2: Verify the code snippet

   const ref = firebase.storage().ref('users/abc123/profile.jpg'); ref.put(file); uses the correct path and calls ref.put(file) to upload.

3. Final Answer:

   const ref = firebase.storage().ref('users/abc123/profile.jpg'); ref.put(file); -> Option B

4. Quick Check:

   Correct path format = users/abc123/profile.jpg [OK]

Hint: Use 'users/{userId}/profile.jpg' path format for user files [OK]

Common Mistakes:

• Mixing folder order in path
• Placing userId after filename
• Using incorrect slashes or order