CODEWITHSUNDEEP
javascriptreactjsfetch-api
M_W
M_W

Reputation: 66

How to pass uploaded files(images, pdf) and JSON data to the backend at the same time using fetch API?

I'm using React JS as the frontend framework. I have a form with different inputs. Some of those are text inputs and the others are file uploads. Here's the post request.

        const formData = new FormData();
        const imgUpload = document.querySelector('#imgUpload');
        const mouUpload = document.querySelector('#mouUpload');
        
        //-------setting the form data----------
        formData.append('oName', formValues.oName);
        formData.append('oWeb', formValues.oWeb);
        formData.append('oVC', formValues.oVC);
        formData.append('oVP', formValues.oVP);
        formData.append('oImg', imgUpload.files[0]);
        formData.append('oMou', mouUpload.files[0]);
        

        //---------fetch post request--------------
        fetch('https://httpbin.org/post', {
          method: 'POST',
          body: formData
        })
        .then(response => response.json())
        .then(result => {
          console.log('Success:', result);
        })
        .catch(error => {
          console.error('Error:', error);
        });

This is a successful post request and I can see this as the result.

enter image description here

But I want to be able to see text input filed data under data and the file uploads under files in this success result. I know that I'm passing those values to formData , I did that because I wanted to get text input data to be shown in the result somehow. How can I implement this ? Please guide me if I'm doing something wrong here. Appreciate your help.

Upvotes: 1

Views: 943

Answers (1)

Quentin
Quentin

Reputation: 944256

An HTTP request body has to be encoded somehow. Then the server-side code has to decode it.

From your comments we can infer that if you encode the body as JSON then it will decode it and put it in data. If you encode it as multi-part, then it will decode it and put the files in files and the rest of the data in forms.

If you want it to put the rest of the data in data then you'll need to change the server-side code.

I'd just read it from form myself.

Upvotes: 2

Related Questions