Upload image files from node js app to already existing collection in firebase storage

Question

I'm working on a project with an Android Developer who uses Flutter and firebase. He has an already existing Database on Firebase where images from user uploads are stored. Now, I'm building an admin dashboard using Node js and it is required that the admin should also be able to upload posts directly from the dashboard.

We are using a SQL database for the posts and other parts of the project, so every other thing is working. The only challenge I've been having is how to upload images from the admin's end.

Now, Flutter has a plugin, StreamBuilder, which reads all the images from the collection where the user's posts are uploaded. So we have a collection, "Articles" in our storage. The StreamBuilder reads the images like so:

StreamBuilder<QuerySnapshot>(
                      stream: Firestore.instance
                          .collection("articles")
                          .document(
                              "${post.reposted == "true" ? post.repostId : post.id}")
                          .collection("images")
                          .snapshots(),

I'm trying to find a way to upload images using this same structure so that posts made from the admin's dashboard can also be visible in the app, alongside every other post. Now, I've followed many Tutorials and the one I've finally settled for is here. The issue is that this just uploads the image to the Storage, but not to the "Articles" collection. Here is the code base for the file upload:

const express = require('express')
const bodyParser = require('body-parser')
const multer = require('multer')
const util = require('util')
const gc = require('../config/')
const bucket = gc.bucket(bucketname)
const uploadImage = require('./helpers/helpers')

const app = express()

const multerMid = multer({
  storage: multer.memoryStorage(),
  limits: {
    // no larger than 5mb.
    fileSize: 5 * 1024 * 1024,
  },
});

app.disable('x-powered-by')
app.use(multerMid.single('file'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))

const { format } = util

const uploadImage = (file) => new Promise((resolve, reject) => {
  const { originalname, buffer } = file

  const blob = bucket.file(originalname.replace(/ /g, "_"))
  const blobStream = blob.createWriteStream({
    resumable: false
  })

  blobStream.on('finish', () => {
    const publicUrl = format(
      `https://storage.googleapis.com/${bucket.name}/${blob.name}`
    )
    resolve(publicUrl)
  })
  .on('error', () => {
    reject(`Unable to upload image, something went wrong`)
  })
  .end(buffer)

})

app.post('/uploads', async (req, res, next) => {
  try {
    const myFile = req.file
    const imageUrl = await uploadImage(myFile)

    res
      .status(200)
      .json({
        message: "Upload was successful",
        data: imageUrl
      })
  } catch (error) {
    next(error)
  }
})

app.use((err, req, res, next) => {
  res.status(500).json({
    error: err,
    message: 'Internal server error!',
  })
  next()
})

app.listen(9001, () => {
  console.log('app now listening for requests!!!')
})

I need to structure the upload request so that the image uploaded from the Admin's dashboard is uploaded to an "Articles" collection, within which there will be a folder named by the "Post Id" within which there will be another collection, "Images" and then it's the Images folder that the image uploaded will be stored to.

Anybody can help? I've been having sleepless nights over this small issue as I can't seem to find any solution online.

"The issue is that this just uploads the image to the Storage, but not to the 'Articles' collection." Can you show the Node.js code that you've written that doesn't work? — Frank van Puffelen, Sep 26 '21 at 03:55

score 0 · Answer 1 · answered Oct 02 '21 at 11:06

I finally found a fix for this after many days and nights of googling things to no avail.

I found a way to upload the images directly from the html file instead of from the Nodejs route. That way, I can specify the folder the image will be uploaded to, instead of just uploading it to the main STORAGE.

And it was a simple fix too:

I just added 2 scripts to the head of the html file:

<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-storage.js"></script>

Then I wrote another script myself:


<script>
    var firebaseConfig = {
        apiKey: "MYFIREBASEAPIKEY",
        authDomain: "MYFIREBASEAUTHDOMAIN",
        databaseURL: "MYFIREBASEDATABASEURL",
        projectId: "MYFIREBASEPROJECTID",
        storageBucket: "MYFIREBASESTORAGEBUCKET",
        messagingSenderId: "MYFIREBASEMESSAGINGSENDERID",
        appId: "MYFIREBASEAPPID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    function uploadImage() {
        const ref = firebase.storage().ref("article/300/images");
        const file = document.querySelector("#file").files[0];
        const name = +new Date() + "-" + file.name;
        const metadata = {
            contentType: file.type
        };

        const task = ref.child(name).put(file, metadata);
        task
            .then(snapshot => snapshot.ref.getDownloadURL())
            .then(url => {
                console.log(url);
            })
            .catch(console.error);
    }
</script>

Upload image files from node js app to already existing collection in firebase storage

1 Answers1