How to Upload and Download from/to Firebase Storage in Node.js?

Part 3: Easy configuration for connecting your Node.js app with Firebase Storage

Hi, I’m Pandhu. I am a Software Engineer. For this time, I will continue part 3 from my series about Firebase Storage.

If you guys are not reading yet the part 1 and 2, please visit the early article before you finishing this part.

Link on below.

Part 1 : https://blog.devgenius.io/how-to-upload-and-download-from-to-firebase-storage-in-node-js-part-1-7306da4bd3fa

Part 2 : https://blog.devgenius.io/how-to-upload-and-download-from-to-firebase-storage-in-node-js-part-2-4d0242ee219a

The last section we told about how to create project on Firebase and create node.js project on your local machine. For the next step, we will how to configure the Firebase project in your local project. Let’s get into it!

I will start and write again how to create new node.js project.

First thing first, create new folder in your local.

mkdir gstorage-app
cd gstorage-app

After that, let’s open the text editor. I will open with Visual Studio Code. Assuming you has been inside gstorage-app directory.

code .

Ok, the next step we will create project.

 npm init -y

Disclaimer: I will not you figured out about how to install the node and npm. Because It can be easy for you to installed directly from the official website.

The interface of my text editor looks like.

And then, before you install any of external packages, try initial installment such of this.

npm install

It will be empty.

Ok, then you shoul install the dependency. Only one that you need to connecting your local with the firebase project.

Via npm.

npm install firebase

You have successfully installed it. Then, you already start the configuration.

Create new file, you can name it. Let’s say connection.js . Keep it on root.

And put the script into it.

const { initializeApp } = require("firebase/app");
const { getStorage } = require("firebase/storage");

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  apiKey: "AIzaSyAwMToLpiINwLvevaRkmuZQ72eWnkKuWos",
  authDomain: "beneteen-dev.firebaseapp.com",
  projectId: "beneteen-dev",
  storageBucket: "beneteen-dev.appspot.com",
  messagingSenderId: "537452487968",
  appId: "1:537452487968:web:6c663618e2311404cd2345"
};

const app = initializeApp(firebaseConfig);

const storage = getStorage(app);
module.exports = {
  storage,
};

You have been configured it. Congrats!!. The next step, we will create upload service to upload some image to your Firebase Storage.

Let’s create new file, the name is index.js. Copy the script into your file.

Disclaimer (again): For the details, you can find inside this page. For this section I only figure out one way, the simple way. If you ask about the performance, we could talk later, in different article or in this article box comment may be.

import { storage } from "./connection";

import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

// Create the file metadata
/** @type {any} */
const metadata = {
  contentType: "image/jpeg",
};

// Upload file and metadata to the object 'images/mountains.jpg'
const storageRef = ref(storage, "images/" + file.name);
const uploadTask = uploadBytesResumable(storageRef, file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(
  "state_changed",
  (snapshot) => {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log("Upload is " + progress + "% done");
    switch (snapshot.state) {
      case "paused":
        console.log("Upload is paused");
        break;
      case "running":
        console.log("Upload is running");
        break;
    }
  },
  (error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case "storage/unauthorized":
        // User doesn't have permission to access the object
        break;
      case "storage/canceled":
        // User canceled the upload
        break;

      // ...

      case "storage/unknown":
        // Unknown error occurred, inspect error.serverResponse
        break;
    }
  },
  () => {
    // Upload completed successfully, now we can get the download URL
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log("File available at", downloadURL);
    });
  }
);

All right, I think it will be succeed to upload and download to/from Firebase Storage. If any question around this topic, you can reach out me on box comment below. Cheers mate.

Thanks for your time. Oiya you can upload anything about the format, videos, images, or other files.

See yaa!

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.