react js fetch API using file upload not being sent to body

Question

Here is my code:

let formData = new FormData(); 
 
  // Update the formData object 
  formData.append( 
    "myFile", 
    this.state.product_picture, 
    this.state.product_picture.name 
  ); 
  var options = { content: formData };
    const token =  JSON.parse(localStorage.getItem('token'));
    const requestOptions = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            product_name:this.state.product_name,
            product_description:this.state.product_description,
            product_picture:formData,
            category_name:this.state.category_choosen,
          })
    };
    fetch('http://cms.test/api/products/insert_supplier_product?token='+token, requestOptions)
        .then(response => response.json())
        .then(data => {
            this.setState({ product: data.product})
        })
        .catch(error =>{
            console.log("Product creation error", error);
        });

I have this fetch API its always giving a 422 response. I think what is happening is that its not reading a file as I want to upload a file. It all works in Postman but when using react it crashes. The body here is the problem; inside the state there are some strings but inside the this.state.product_picture there is a file.

Hope someone can help!

SOLUTION: Using axios to call the API solved my problem

Naveen Chahar · Accepted Answer · 2020-11-20 13:15:38Z

1

You cannot send a file in a JSON object in a request( atleast not without Base64 encoding it). Change your code in the following way to send a file with your form.

    let formData = new FormData(); 
 
   // Update the formData object 
   formData.append( 
    "myFile", 
    this.state.product_picture, 
    this.state.product_picture.name 
    ); 

   formData.append("product_name",this.state.product_name);
   formData.append("product_description",this.state.product_description);
   formData.append("category_name",this.state.category_choosen);

   var options = { content: formData };
    const token =  JSON.parse(localStorage.getItem('token'));
    const requestOptions = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data',
          },
          body: formData
    };
    fetch('http://cms.test/api/products/insert_supplier_product?token='+token, requestOptions)
        .then(response => response.json())
        .then(data => {
            this.setState({ product: data.product})
        })
        .catch(error =>{
            console.log("Product creation error", error);
        });

answered Nov 20, 2020 at 13:15

Naveen Chahar

5713 silver badges11 bronze badges

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

2 Comments

marcsabeh Over a year ago

the data is still not getting parsed it saying that all the data is invalid

Naveen Chahar Over a year ago

Happy to help!!

Collectives™ on Stack Overflow

react js fetch API using file upload not being sent to body

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related