React: Multer image and data upload with using firebase function, node multer

Question

Basically I am using firebase function and hosting with node and react. I can upload image courtesy of How to perform an HTTP file upload using express on Cloud Functions for Firebase (multer, busboy) but how do you upload image and data at the same time?

export const addProduct = (product, imageUrl) => {
  return (dispatch) => {
    return new Promise((resolve, reject) => {
      const fileData = new FormData();
      fileData.append("imageUrl", imageUrl);
      fileData.append("productData", product);
      axios({
        method: "post",
        url: "/api/products/add-product",
        data: fileData,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
    });
  };
};

NodeJS

const router = express.Router();
const Busboy = require("busboy");

router.post("/api/products/add-product", async (req, res, next) => {
  if (req.method === "POST") {
    const busboy = new Busboy({ headers: req.headers });
    const uploads = {};
    busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
      console.log(
        `File [${fieldname}] filename: ${filename}, encoding: ${encoding}, mimetype: ${mimetype}`
      );
    });
  }
});

score 2 · Accepted Answer · answered Sep 05 '20 at 08:00

Your client-side code looks OK.
On the server-side you can tell busboy to extract fields as well as files:

const fields = {};
const files = [];
const busboy = new Busboy({headers: req.headers});
busboy.on("field", (key, value) => (fields[key] = value));
busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {/*...*/});
busboy.end(req.rawBoy);

This way you can access fields["productData"] later in your code.

Note that you need to use rawBody to access the unparsed body in Cloud Functions: https://firebase.google.com/docs/functions/http-events#read_values_from_the_request

React: Multer image and data upload with using firebase function, node multer

1 Answers1