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! Thank you!

SOLUTION: Using axios to call the api solved my problem

Answer 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);
        });