Uploading an Image to Firebase Storage with JavaScript: Showing Upload Progress and Retrieving URL

Photo by Markus Spiske on Unsplash

In this tutorial, we will be showing you how to upload an image to Firebase Storage with JavaScript, and also how to compress the image before uploading it. Additionally, we’ll show you how to track the upload progress and retrieve the URL of the uploaded image.

Let’s get started!

Setting Up Firebase

Before we can start uploading images, we need to set up a Firebase project. If you haven’t already, sign up for a free Firebase account here.

Once you have a Firebase project, you can find your API key, auth domain, and storage bucket in the Firebase Console under Project Settings > General.

To use Firebase Storage in your project, you will need to include the Firebase libraries in your HTML file. You can use the following CDN links to include the required libraries in your project:

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

Finally, you’ll need to initialize Firebase in your JavaScript code, using your API key, auth domain, and storage bucket.

var firebaseConfig = {…