Write image file to Firebase Storage from HTTP function

Question

I am trying to write an image Firebase Storage via a Cloud Function (for more suitable write access).

My current attempt is to read the file object on the client, send it (the data) to an http firebase function, and then save it to storage from there. After saving the file successfully, I try using the download url as an img src value, but the file does not display. I also see an error in the Storage console (Error loading preview) when attempting to view the file.

If I save the data in Storage as base64, I can copy the contents of the file into the img src attribute, and it displays fine. However, I'd like to simply use the download URL as I could do if I just uploaded the image via the client SDK or directly via the console.

In the client, I'm simply using FileReader to read the uploaded file for sending. I've tried all the ways of reading it (readAsText,readAsBinaryString, readAsDataURL, readAsArrayBuffer), but none seem to solve the issue.

Here is how I am uploading the file via the Firebase Function:

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
import * as path from 'path';
import * as os from 'os';
import * as fs from 'fs-extra';

export default functions.https.onCall(async(req, context) => {
  const filename = req.filename;
  const bucket = admin.storage().bucket(environment.bucket)
  const temp_filename = filename;
  const temp_filepath = path.join(os.tmpdir(), temp_filename);
  await fs.outputFile(temp_filepath, req.data, {});

  // Upload.
  await bucket.upload(temp_filepath, {destination: 'logos'})
    .then((val) => {})
    .catch((err) => {});
});

This uploads the file successfully, however, the Download URL does not work when used as the img src attribute.

One thing I have noticed is that when using the client SDK to send a file (via AngularFireStorage), the payload is the raw png contents. E.g. a snippet of the file:

PNG


IHDRÈÈ­X®¤IDATx^í]  
Eµ¾·{&1,!dù»*yVQ@PTEDPA>ÊâC\P"ÈÄ"
F}òIW÷üCL@BÉL÷}
....

However, reading the file as text does not yield this encoding. I have tried several other encodings.

Any help would be immensely appreciated.

Edit

Here is what I mean about using the download URL:

<img alt='logo' src='https://firebasestorage.googleapis.com/v0/b/y<project-name>/o/logos%2FAnM65PlBGluoIzdgN9F5%2Fuser.png?alt=media&token=<token>' />

The above src url is the one provided in the Firebase Storage console when clicking on the file. It is labeled as 'Download URL' (I believe this is the one retrieved by calling getDownloadUrl() via the sdk).

When using AngularFireStorage to put the file in storage, the Download URL will work. When I say it 'will work', I mean the image will display properly. When using FileReader to pass the data to an http cloud function to upload (as seen above), the image will not display. In other words, after uploading the file via the backend, the download url does in fact provide what was uploaded, it's just not in a format that an img tag can display.

One possible issue may be that I am not getting the encoding correct when using FileReader readAsText. Here is what I am doing with FileReader:

const reader = new FileReader();

reader.onloadend = () => {
  firebase.functions().httpsCallable('http_put_logo')(reader.result);
};

// Have tried various encodings here, as well as all reader methods.
reader.readAsText(file); 

Edit 2

All of the discussion on this question so far seems to be around correctly getting the download URL. I'm not sure if Firebase docs have this information, but the download URL is available in the Storage console. I'm simply copying and pasting that URL to for testing purposes at the moment.

The reason why I am doing this is because I plan to save these image URLs in the DB since they are going to be frequently used and publicly readable. So, I'm not going to use the getDownLoadURL() method to fetch these images, I'm simply just going to link to them directly in img tags.

Here is an image of my console to see what I mean (bottom right):

You just have to click it and copy it. You can then open it in a browser tab, download it, use it as a src value, etc.

Edit 3

Here is an image of what the request payload looks like when using the client sdk:

Here is when I read the file as text and send to backend for upload:

Notice there are differences in the payloads. That's why I'm uncertain if I'm properly reading the file or encoding it incorrectly.

Answer 1

What part of your code is taking care of getting the URL? I recently used a similar approach to uploading images to Firebase Storage using cloud functions. What worked best for me was to execute a different function to get the URL after the upload is complete. Something like this:

const bucket = admin.storage().bucket(environment.bucket)
  const temp_filename = filename;
  const temp_filepath = path.join(os.tmpdir(), temp_filename);
  await fs.outputFile(temp_filepath, req.data, {});

  // Upload.
  await bucket.upload(temp_filepath, {destination: 'images'})
    .then((val) => {retrieveUrl(temp_filename)})
    .catch((err) => {});

retrieveUrl = (imageName) => {
    const storage = firebase.storage();
    storage.ref(`/images/${imageName}.jpg`).getDownloadURL()
      .then( url => {
        /*Save the url to a variable or attach it directly to the src of your image, depending on the structure of your project*/
      })
      .catch(err => console.log(err));
  }

Keep in mind that you need to install firebase in your project in order to call firebase.storage.