How to Upload Image to Firebase Storage with Express.js

In this article, we will learn how to upload an image to Firebase Storage using Express.js. Firebase Storage is a cloud storage service provided by Firebase, which allows you to store and serve user-generated content like images and videos.

Prerequisites

Before we begin, make sure you have the following:

• Node.js and NPM installed on your machine
• A Firebase project with Firebase Storage enabled
• Express.js installed in your project using npm install express –save
• Firebase Admin SDK installed in your project using npm install firebase-admin –save

Setting up Firebase Admin SDK

To use Firebase Storage with Express.js, we need to initialize the Firebase Admin SDK in our project. You can do this by following these steps:

1. Go to your Firebase project on the Firebase console
2. Click on the gear icon and select Project Settings
3. Under the Service Accounts tab, click on Generate New Private Key
4. Save the JSON file that contains your service account key
5. Require the firebase-admin module in your Express.js app and initialize it with the service account key

Uploading Image to Firebase Storage

Once the Firebase Admin SDK is set up in your project, you can now start uploading images to Firebase Storage. Use the following code snippet as a guide:

      const express = require('express');
      const admin = require('firebase-admin');
      const serviceAccount = require('path/to/serviceAccountKey.json');
      
      const app = express();
      admin.initializeApp({
        credential: admin.credential.cert(serviceAccount),
        storageBucket: 'your-bucket-name.appspot.com'
      });
      const bucket = admin.storage().bucket();
      
      app.post('/upload', (req, res) => {
        const file = req.files.image;
        const filePath = `images/${file.name}`;
        const fileUpload = bucket.file(filePath);
      
        const blobStream = fileUpload.createWriteStream({
          metadata: {
            contentType: file.mimetype
          }
        });
      
        blobStream.on('error', (error) => {
          res.status(500).json({ error: 'Unable to upload image' });
        });
      
        blobStream.on('finish', () => {
          const publicUrl = `https://storage.googleapis.com/${bucket.name}/${fileUpload.name}`;
          res.status(200).json({ publicUrl });
        });
      
        blobStream.end(file.data);
      });
      
      app.listen(3000, () => {
        console.log('Server is running on port 3000');
      });
    

Conclusion

In this article, we have learned how to upload an image to Firebase Storage using Express.js. Firebase Storage is a powerful and easy-to-use platform for storing and serving user-generated content. With the Firebase Admin SDK and the code snippets provided, you can easily integrate Firebase Storage into your Express.js app and start uploading images to the cloud.