Uploading files in Firebase - Commands & Configuration

Introduction

Uploading files to Firebase Storage lets you save images, documents, or other files in the cloud. This helps your app share and access files easily without using your own server.

When you want users to upload profile pictures to your app.

When your app needs to save documents or reports for later access.

When you want to store images for a gallery that all users can see.

When you want to back up files from a device to the cloud automatically.

When you want to share files between different parts of your app securely.

Config File - firebase.json

firebase.json

{
  "storage": {
    "rules": "storage.rules"
  }
}

This file tells Firebase to use the storage.rules file to control who can upload or download files.

Commands

This command sets up Firebase Storage in your project and creates the necessary configuration files.

Terminal

firebase init storage

Expected Output

=== Storage Setup ===

✔ Firebase Storage: Configure security rules and indexes files for Cloud Storage

✔ storage.rules file has been created.

Firebase initialization complete.

This command uploads your storage rules and configuration to Firebase so your storage is ready to use.

Terminal

firebase deploy --only storage

Expected Output

=== Deploying to 'your-project-id'...

✔  storage: storage.rules



✔  Deploy complete!



Project Console: https://console.firebase.google.com/project/your-project-id/overview

→

--only storage - Deploys only the storage part without affecting other Firebase services.

Uploads the local file 'local-image.jpg' to Firebase Storage under the path 'images/profile.jpg'.

Terminal

firebase storage:upload ./local-image.jpg images/profile.jpg

Expected Output

✔ Uploaded ./local-image.jpg to images/profile.jpg

Lists all files stored under the 'images' folder in Firebase Storage to verify the upload.

Terminal

firebase storage:list images

Expected Output

images/profile.jpg

Key Concept

If you remember nothing else from this pattern, remember: you must initialize Firebase Storage, set rules, deploy them, then upload files to the correct path.

Common Mistakes

Trying to upload files before running 'firebase init storage' and deploying rules.

Firebase Storage won't accept uploads without proper initialization and deployed rules, causing errors.

Always run 'firebase init storage' and 'firebase deploy --only storage' before uploading files.

Uploading files to a wrong or non-existent path.

Files may not be found later or overwrite important data if paths are incorrect.

Use clear folder paths like 'images/profile.jpg' and verify with 'firebase storage:list'.

Summary

Initialize Firebase Storage with 'firebase init storage' to create config files.

Deploy storage rules using 'firebase deploy --only storage' to enable uploads.

Upload files with 'firebase storage:upload' specifying local and cloud paths.

Verify uploads by listing files with 'firebase storage:list' command.

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