Sending Array of files to the server in React

user_18283023 0
Viewed 144

i am trying to send array of files like this to the server but i have a problem it always sent to the server by this format [Object file] how can i send the files to the server and get its data or is it normal here is what i get in console when I console.log the state :

enter image description here

and i get this when i use this code :

for (var [key, value] of formData.entries()) {
        console.log(key, value);
 }

and this is its output :

enter image description here

but when i send the files to the server using formData library the output is [Object file] and i cannot get access to its values in the backend , my backend is express :

    const formData = new FormData();
    for (let i = 0; i < setFiles.length; i++) {
        formData.append('lessonFiles', setFiles[i])
    }

     try {
        const { data } = await axios.post("/lessons", formData);
     } catch(error) { console.log(error) }

why formData sending the values [Object file] ?

here is the final output :

enter image description here

in the backend i just console.log(req.body) and this is the backend :

enter image description here

is this a frontend ( react ) issue or is it from the backend express issue ?

form-data reactjs express arrays
1 Answers

Node cant process form data out of the box. you will need something like busboy or multer.

there are also several errors in your code such as setFiles.length being used as the condition in your for loop instead of files.length.

I highly recommend you install one of the libraries i have mentioned above on your server and then use postman to confirm everything is working correctly and then try to tackle your front end.

user_92216980
Related