Home > Enterprise >  How to send array of objects with files via formdata
How to send array of objects with files via formdata

Time:10-22

So i' trying to send an array of objects via axios to the backend ( i'm using express.js ). when i'm sending the object without files i have no problem, but once i tried to send files with it, i faced some problems. I know that i have to use formData to do so and i have already done it before , but this time i have an array of multiple objects that i need to send. So don't know how the append work this time . here's a simplified version of my object

const treatementListe = {
    "id": 0,
    "date": "2021-10-22T09:41:19.678Z",
    "selectedTraitements": "Injection1",
    "selectedZones": "Face",
    "traitementNote": "Careful",
    "files": [
        {
            "upload": {
                "uuid": "be68c533-92d5-4f5d-b9e4-ba338f264641",
                "progress": 100,
                "total": 20261,
                "bytesSent": 20261,
                "filename": "1617826401810IMG-20210211-WA0002.jpg",
                "chunked": false,
                "totalChunkCount": 1
            },
            "status": "success",
            "previewElement": {},
            "previewTemplate": {},
            ...etc
        }
    ]
},

{
    "id": 1,
    "date": "2021-10-22T09:41:19.678Z",
    "selectedTraitements": "Injection2",
    "selectedZones": "Ear",
    "traitementNote": "Careful",
    "files": [
        {
            "upload": {
                "uuid": "be68c533-92d5-4f5d-b9e4-ba338f264641",
                "progress": 100,
                "total": 20261,
                "bytesSent": 20261,
                "filename": "1617826401810IMG-20210211-WA0002.jpg",
                "chunked": false,
                "totalChunkCount": 1
            },
            "status": "success",
            "previewElement": {},
            "previewTemplate": {},
            ...etc
        }
    ]
}

Axios post request

typeForm() {
        const fd = new FormData();
        fd.append('traitementsListe', traitementsListe)
        //isn't working
        console.log(traitementsListe)
        if(traitementsListe.length > 0) {
             const patient = axios.post(`${baseUrl}addOldfolder`, fd)
            .then(response => {
                console.log(response)
                
                 return response.data;
         }).catch(error => ({ error: JSON.stringify(error) }));  
         }
        
    }

Edit : here's my backend code

router.post('/addOldfolder', async(req,res) =>{
    
    try {
        console.log(req.body)
        // output empty object
        res.send(req.body)
        // sends empty object
    } catch(err){
        res.status(400).send(err);
    }
})

CodePudding user response:

do like bellow

fd.append('traitementsListe', JSON.stringify(traitementsListe));

CodePudding user response:

Problem solved. but i really don't why it worked all i had to do is add

router.post('/addOldfolder', upload.array("files"), async(req,res) =>{
    
    try {
        console.log(req.body)
        // output empty object
        res.send(req.body)
        // sends empty object
    } catch(err){
        res.status(400).send(err);
    }
})

since i used that middleware many times when uploading files. i managed to console the object just by adding the middle !

  • Related