Uploading a file using "fetch" in reactJS

Question

Uploading a file using "fetch" in reactjs

I am trying to upload a file using ReactJS.

handleUploadfile = (event) => {
        event.preventDefault();
        const data = new FormData();
        data.append('photo',event.target.files[0] );
        data.append('name', 'Test Name');
        data.append('desc', 'Test description');
        fetch("http://localhost:3001/todo/upload", {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             body: data
        }).then((response) =>  {
           return response.text();
        })
    }

For some reason I am not able read the files at nodejs(+multer) server using:

req.files

which shows "undefined" at post router.

Use multipart/form-data instead of application/x-www-form-urlencoded — Jayce444
– Jayce444, Commented Apr 6, 2018 at 6:40

Vara Prasad Boddu · Accepted Answer · 2018-04-06 07:21:52Z

9

Finally I found the solution

I had to remove the 'Content-Type' from headers section and it worked out in nodejs using multer.

Using the "multipart/form-data"

'Content-Type': 'multipart/form-data'

requires us to set boundaries and hence it is throwing error at nodejs "Error: Multipart: Boundary not found"

Using the "application/x-www-form-urlencoded"

'Content-Type': 'application/x-www-form-urlencoded'

I am getting the req.body filled but as string but not able to access the individual values.

Hence final solution is removal of 'Content-Type'

answered Apr 6, 2018 at 7:21

Vara Prasad Boddu

1791 gold badge1 silver badge10 bronze badges

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

2 Comments

Aflah Najeeb Over a year ago

Removing 'Content-Type' from header worked for me

artSir Over a year ago

when i remove the header, chrome sends it as plain text and it doesn't work

KARTHIKEYAN.A · Accepted Answer · 2023-05-02 12:05:47Z

0

I'm uploading excel file and passing it to fetch method and working as I expected way

            const formData = new FormData()
            formData.append('file', payload)

            const createXHR = () => new XMLHttpRequest()

            fetch('https://localhost:8080/file/', {
                body: formData,
                createXHR,
                method: 'POST'
            }).then(response => {
                return response.json()
            }).then(res => {
                console.log(res, 'res')
            })

answered May 2, 2023 at 12:05

KARTHIKEYAN.A

20.5k11 gold badges139 silver badges151 bronze badges

Collectives™ on Stack Overflow

Uploading a file using "fetch" in reactJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related