Node JS / Firebase Admin SDK / Firebase Storage - base64 image uploaded to firebase storage is not generating preview

Question

I'm trying to save a base64 image received from angular frontend into firebase storage directory. but the image that is saved in the firebase folder is not generating a preview for some reason. also i cannot get a signed URL for the image file when trying to retrieve it.

I'm using the firebase admin-sdk to generate the bucket reference - 'storageRef'.

The image data received in the node backend seems to be fine and i tested the same with online base64 decoders and is properly regenerated into the original image. Can someone tell me what is going wrong here?

exports.createContent = async(req, res, next) => {

  // Add a new document with a generated id.
  const writer = await db.collection('feeds').doc(req.body.language).collection(req.body.type).add({
  author: req.body.author,
  cat: req.body.cat,
  content: req.body.content,
  createdAt: admin.firestore.Timestamp.fromDate(new Date(req.body.createdAt)),
  excerpt: req.body.excerpt,
  lastEdit: admin.firestore.Timestamp.fromDate(new Date(req.body.lastEdit)),
  media: req.body.media,
  os_android: req.body.os_android === 'true' ? true : false,
  os_ios: req.body.os_ios === 'true' ? true : false,
  region: req.body.region,
  status: req.body.status,
  title: req.body.title,
  type: req.body.type
}).then((docRef) => {

  let bufferStream = new stream.PassThrough();
  base64EncodedImageString = req.body.imageSrc.replace(/^data:image\/\w+;base64,/, '');
  bufferStream.end(Buffer.from(base64EncodedImageString, 'base64'));

  var file = storageRef.file('thumbnail/' + req.body.type + '/' + docRef.id + '.png');
  //Pipe the 'bufferStream' into a 'file.createWriteStream' method.
  bufferStream.pipe(file.createWriteStream({
      metadata: {
        contentType: 'image/png',
        metadata: {
          custom: 'metadata'
        }
      },
      public: true,
      validation: "md5"
    }))
    .on('error', function(err) {
      console.log(err);
    })
    .on('finish', function() {
      res.json({
        message: "Feeds Added Successfully",
        feeds: docRef.id
      });
    });
})

};

Possible duplicate: File upload not completing / In-memory file upload to GCS — samthecodingman

Jefin George Jose Jefin George Jose · Accepted Answer · 2021-05-11T16:22:43

The issue was, i was using firebase-admin SDK in NodeJS and i was trying to make the file public in my code against the access rules of my storage bucket. So i turned the public access key to false and generated an access token for the file while i uploaded it. this fixed the issue. I'm including my working code below.

var stream = require('stream');
const uuidv4 = require('uuid/v4');

const uuid = uuidv4();
let bufferStream = new stream.PassThrough();
var base64EncodedImageString = req.body.imageSrc.replace(/^data:image\/\w+;base64,/, '');
bufferStream.end(new Buffer.from(base64EncodedImageString, 'base64'));
    
var file = storageRef.file('thumbnail/' + req.body.type + '/' + docRef.id + '.png');
//Pipe the 'bufferStream' into a 'file.createWriteStream' method.
        bufferStream.pipe(file.createWriteStream({
          metadata: {
            contentType: 'image/png',
            metadata :{
              firebaseStorageDownloadTokens: uuid
           }
          },
          public: false,
          validation: 'md5'
        }))
        .on('error', function(err) {
          console.log(err);
        })
        .on('finish', function() {
          res.json({
            message: "Feeds Added Successfully",
            feeds: docRef.id
          });
        });

Node JS / Firebase Admin SDK / Firebase Storage - base64 image uploaded to firebase storage is not generating preview

1 Answers