Upload files through cloud functions Admin SDK - Broken Files

Question

I have been trying to upload files (mostly images) to firebase storage through firebase cloud function (onRequest method). I had to upload files from its base64 form. With the below code, i was able to achieve it, yet the file seems to be broken after upload.

const functions = require('firebase-functions');
const admin = require('firebase-admin');

const bucket = admin.storage().bucket();
const database = admin.database();
const express = require('express');
const cors = require('cors');

const safetyLogsAPI = express();
safetyLogsAPI.use(cors({ origin: true }));

safetyLogsAPI.post('/', async (req, res) => {
    try {
        const { 
            attachments,
            projectId
        } = req.body;
        const safetyKey = database.ref('safetyLogs')
          .child(projectId)
          .push().key;
        if(attachments && Array.isArray(attachments)) {
          if (attachments.length > 0) {
            for (let index = 0; index < attachments.length; index++) {
              const base64Obj = attachments[index];
              const { content, fileName, contentType } = base64Obj;
              const stream = require('stream');
              const bufferStream = new stream.PassThrough();
              bufferStream.end(Buffer.from(content, 'base64'));
              const fullPath = `SafetyIncidentLog/Images/${projectId}/${safetyKey}/${fileName}`;
              const file = bucket.file(fullPath);
              const metadata = {
                projectId,
                safetyLogId: safetyKey,
                createdTimestamp: Date.now(),
                systemGenerated: 'false',
                fileType: 'Image',
                fileName,
                path: fullPath
              };
              bufferStream.pipe(file.createWriteStream({
                metadata: {
                  contentType,
                  metadata
                },
                public: true,
                validation: "md5"
              }))
                .on('error', (err) => {
                  console.log('Error Occured');
                  console.log(err);
                })
                .on('finish', () => {
                  console.log('File Upload Successfull');
                });
            }
          }
        }
        return res.status(200).send({
            code: 200,
            message: 'Success'
        });
        
    } catch (error) {
        console.log(error);
        return res.status(500).send({
            code:500,
            message: 'Internal Server Error',
            error: error.message
        });
    }
});

module.exports = functions.https.onRequest(safetyLogsAPI);

I have tried this approach with both the prefix part data:image/png;base64 present and eliminated. In both ways i see broken image. So where have I gone wrong. Is there a better way to make it?

Thanks in advance.

Also, is the approach i try to do so is a recommended way?. For use cases like, profile picture upload, and conversation image attachments, is this way recommended, or the a direct upload from client is recommended?

Answer 1

With Cloud Functions HTTP triggers, the request is terminated and the function is shut down as soon as you send a respond to the client. Any asynchronous work that isn't finished might never finish.

What I'm seeing in your code is that you send a response before the upload is complete. I can see that your call to res.status(200).send() happens immediately after you start the upload. Instead, your code should wait to send the response until after it completes, perhaps using on('finish') and on('error').