How to use firebase storage for view and import?

💬 Queries and Resources
1

Hello, I don't see anything related to firebase storage (especially this, not "google cloud storage").

My expectations : have a create/edit form that update firebase documents containing arrays of images URL, these images URL are stored in firebase storage.

I'd like to have 3 file pickers, and after upload store each image into my firebase storage, and fill the array with the public URL.

However, I don't really find how to do. Seems that it's not possible natively and I don't find any documentation for an API or whatever.

3

you can try to add resourse of firebase database and then add workflows based on services like firestore, realtime database.

this will help you to create /edit form.

image
image705×204 7.51 KB

1 Like
4

@floran if you want any help regarding google cloud storage this will help you a lot:

5

Hi @floran,

We don't have a Firebase Storage integration, unfortunately. We have a generic rest api integration and the Google Cloud Storage integration that ahsan recommends.

You'd likely be able to connect to an api like Cloud Storage for Firebase API with our generic rest integration. It seems like that rest api will not support your use case though.

If there is a library that supports your use case, you could try importing that in an app or custom React component.

6

@floran did you find a viable library or solution to implement this? I'm facing the same situation and would appreciate it if you could share some insights. Thank you!

7

It seems rather straightforward to achieve using Firebase Functions.. Below is a sample code.

const {onRequest} = require("firebase-functions/v2/https");
const {initializeApp} = require("firebase-admin/app");
const {getStorage} = require("firebase-admin/storage");
const crypto = require("crypto");

initializeApp();
const storage = getStorage();
const bucketName = "gs://your-project-name.firebasestorage.app";

exports.uploadFile = onRequest(async (req, res) => {
  try {
    const {fileName, base64Data, contentType} = req.body;

    // Return error if missing parameters
    if (!fileName || !base64Data || !contentType) {
      return res.status(400).json({ error: "Missing parameters" });
    }

    // Return error if file is not an image
    if (!contentType.startsWith("image/")) {
      return res.status(400).json({ error: "This is not an image" });
    }

    const bucket = storage.bucket(bucketName);
    const file = bucket.file(fileName);
    const buffer = Buffer.from(base64Data, 'base64');

    await file.save(buffer, {
      contentType,
      resumable: false,
      metadata:{
        metadata: {
          firebaseStorageDownloadTokens: crypto.randomUUID()
        }
      },
    });

    // Get metadata to extract the download token
    const [metadata] = await file.getMetadata();
    const token = metadata.metadata.firebaseStorageDownloadTokens;

    const baseUrl = `https://firebasestorage.googleapis.com/v0/b/${bucket.name}/o`;
    const encodedPath = encodeURIComponent(file.name);
    const publicUrl = `${baseUrl}/${encodedPath}?alt=media&token=${token}`;

    return res.status(200).json({ url: publicUrl });

  } catch (error) {
      return res.status(500).json({ error: "Upload failed" });
  }
});