Sending Array of files to the server in React

Question

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 :

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 :

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 :

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

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

Answer 1

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.