How to send in Angular http post request with data + image? - node.js

Question

In a post request (in Angular), I usually send data (for example like 'product' data) using an 'object':
product: any = {}; // filled of proprieties (code, barcode, name, description...)
and then pass this in the request:
return this.http
.post<any>( Url , product)
.pipe(catchError(this.errorHandler));
using ExpressJS I can easly retrieve the proprieties 'req.body.<< propriety >>' :
router.post("/newProduct", function (req, res, next) {
const code = req.body.code;
const barcode = req.body.barcode;
const nameProduct = req.body.name;
const description = req.body.description;
//.. here other code - mySql to insert data in the DB ..
});
THE PROBLEM
Now I would like to send the same data (like in the example) and also an image to save on the server.
PS
I tried to use FormData:
var formData = new FormData();
formData.append('image', imageFile);
formData.append('product', product);
return this.http
.post<any>(this.newProductUrl, formData )
.pipe(catchError(this.errorHandler));
So in the backend, I can retrieve and save the image using the npm package 'multer' but then I don't know how to get the 'product' data.

Answer 1

You can access your image data added in formData with 'request.file' and your others data will be available on 'request.body'
To Upload the image in backend multer.upload('image') will be used. Here image is the key that you have in your formdata.
// frontend
var formData = new FormData();
formData.append('image', imageFile);
formData.append('product', product);
// backend
var upload = multer({ dest: 'uploads/' }) // uploads your destination folder
app.post('/profile', upload.single('image'), function (req, res, next) {
// req.file is the `image` file
// req.body will hold the text fields, if there were any
});