Sending array to node is taken as object using formData

Question

I am performing an update where, in addition to other data, I need to send Node an array that includes the information of one or more images, but only their path and ID, not the image itself.

I am performing an update where, in addition to other data, I need to send Node an array that includes the information of one or more images to be deleted, but I only pass its path as well as ID, not the image itself since the images are in Cloudinary.

I use formData because among these data I send the new images in case new ones are required, but I receive all the data except for the images to be deleted, since instead of receiving an array I only receive [Object Object] and I cannot work with it. This is my code:


    const putProduct = async (productToUpdate, filesToDelete) => {

        console.log(filesToDelete) // Array

        const formData = new FormData()
        const imageArr = Array.from(productToUpdate.pictures)

        imageArr.forEach(image => {
          formData.append('pictures', image)
        })

        formData.append('filesToDelete', filesToDelete)
        formData.append('barCode', productToUpdate.barCode)

        try {
            const dataOnLs = localStorage.getItem('cmtjs')
            const config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    apiKey: dataOnLs
                }                
            } 

            const { data } = await axiosClient.put(`/products/${productToUpdate.id}`, formData, config )

I receive in Node and go through the console req.body.filesToDelete but it always indicates [Object Object]

let updateProduct = async ( req, res = response ) => {


    const filesToDelete = req.body.filesToDelete;
    console.log(filesToDelete); // [object Object]
    return

What request body middleware have you registered? To support multipart/form-data, you need something like Multer — Phil
– Phil, Commented May 19, 2022 at 1:26

Oscar Hurst · Accepted Answer · 2022-05-19 01:29:01Z

2

FormData requires objects to be strings. Here's the replacements:

Frontend
Replace:

formData.append('filesToDelete', filesToDelete)

With:

formData.append('filesToDelete', JSON.stringify(filesToDelete))

Backend
Replace:

const filesToDelete = req.body.filesToDelete

With:

const filesToDelete = JSON.parse(req.body.filesToDelete)

answered May 19, 2022 at 1:29

Oscar Hurst

631 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phil · Accepted Answer · 2022-05-19 01:39:02Z

0

You should treat the filesToDelete array the same way you treat productToUpdate.pictures.

If you want filesToDelete to appear as an array in req.body.filesToDelete, use this...

filesToDelete.forEach((f) => {
  formData.append("filesToDelete", f);
});

Multer automatically handles repeated fields as an array. You can optionally add [] to the field name for clarity in your code...

formData.append("filesToDelete[]", f);

but the result will be the same.

On the client-side, you can remove the content-type header. Your browser will handle this automatically for you.

edited May 19, 2022 at 1:39

answered May 19, 2022 at 1:33

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

Sending array to node is taken as object using formData

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related