1. Introduction

Firebase is a comprehensive mobile and web app development platform backed by Google. Firebase Cloud Storage is a powerful, simple, and cost-effective object storage service that allows you to store and serve user-generated content such as photos and videos.

In this tutorial, we will build a simple HTML form to upload files to Firebase Cloud Storage. You will learn how to:

• Set up Firebase in a web project
• Upload files to Firebase Cloud Storage
• Handle upload events

Prerequisites:

• Basic knowledge of HTML, CSS, and JavaScript
• A Firebase account
• A text editor, such as Visual Studio Code

2. Step-by-Step Guide

In the first step, we will create a Firebase project and set up Firebase in our web project. Then, we will create an HTML form for file upload and write JavaScript code to handle file upload events.

2.1 Firebase Project Setup

Go to the Firebase console, click on "Add project", and follow the instructions to create a new project. Once the project is ready, click on "Project settings" and then "Add Firebase to your web app". Copy the config object.

2.2 Firebase in Your Web Project

Include the Firebase libraries in your HTML file. Replace <your-config> with your Firebase project's config object.

<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-storage.js"></script>

<script>
  var firebaseConfig = <your-config>;
  firebase.initializeApp(firebaseConfig);
</script>

2.3 HTML Form

Create an HTML form for file upload. We will use a simple form with an input field of type file.

<form id="upload-form">
  <input type="file" id="file-field">
  <button type="submit">Upload</button>
</form>

2.4 File Upload

To upload a file, we will listen to the form's submit event, get the file from the input field, and upload it to Firebase Cloud Storage.

document.getElementById('upload-form').addEventListener('submit', function(e) {
  e.preventDefault();

  // Get the file
  var file = document.getElementById('file-field').files[0];

  // Create a storage ref
  var storageRef = firebase.storage().ref('uploads/' + file.name);

  // Upload file
  var task = storageRef.put(file);

  // Update progress bar
  task.on('state_changed', function progress(snapshot) {
    var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
    console.log('Upload is ' + percentage + '% done');
  });
});

3. Code Examples

Let's see two examples with different types of files. Make sure you replace <your-config> with your Firebase project's config object.

3.1 Uploading an Image

<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-storage.js"></script>

<script>
  var firebaseConfig = <your-config>;
  firebase.initializeApp(firebaseConfig);
</script>

<form id="upload-form">
  <input type="file" id="file-field">
  <button type="submit">Upload</button>
</form>

<script>
document.getElementById('upload-form').addEventListener('submit', function(e) {
  e.preventDefault();

  // Get the file
  var file = document.getElementById('file-field').files[0];

  // Create a storage ref
  var storageRef = firebase.storage().ref('uploads/' + file.name);

  // Upload file
  var task = storageRef.put(file);

  // Update progress bar
  task.on('state_changed', function progress(snapshot) {
    var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
    console.log('Upload is ' + percentage + '% done');
  });
});
</script>

3.2 Uploading a Video

The code to upload a video is the same as the code to upload an image. The only difference is the file you select.

4. Summary

In this tutorial, you learned how to:

• Set up Firebase in a web project
• Upload files to Firebase Cloud Storage
• Handle upload events

As next steps, you could learn how to download files from Firebase Cloud Storage, delete files, and list all files in a folder.

5. Practice Exercises

1. Modify the code to allow uploading multiple files at once.
2. Add a progress bar to visually show the upload progress.
3. Add error handling to the file upload process.