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.