React PDF File Upload with Axios not working

Question

im trying to build a pf file upload form. I have tested the post request with postman and it seems to be working fine so i dont know what im doing wrong in my code. Here is an image of the request being sent from postman.

As you can see this is what needs to be sent to the api ^.

And Below is my code:

const UploadForm = () => {
   let token = localStorage.getItem("token") ? localStorage.getItem("token") : 
   sessionStorage.getItem("sessionToken");

   const config = {
       headers: {
           Authorization: `Bearer ${token}`,
       },
   };


   return (
       <div className="upload-file__container">
           <Formik
               initialValues={{ files: "" }}
               onSubmit={(values) => {
                   let formData = new FormData();

                   console.log(values.files);

                   formData.append("files", { genetic_report: values.files });
                   formData.append("data", {});

                   axios
                       .post(
                       `${process.env.REACT_APP_STRAPI}/user-genetic-reports`, 
                       JSON.stringify(formData), 
                       config
                       )
                       .then((response) => {
                           console.log("Genetic Report", response);
                       })
                       .catch((error) => {
                           // Handle error.
                           console.log(error.response);
                       });
               }}
           >
               {(formProps) => (
                   <Form>
                       <input
                           type="file"
                           name="files"
                           onChange={(event) => formProps.setFieldValue("files", 
                                    event.target.files[0])}
                       />
                       <button type="submit">Submit</button>
                   </Form>
               )}
           </Formik>
       </div>
   );
};

export default UploadForm;

I cant figure out how to replicate the post request in postman. Probably the way im dealing with formData is wrong.

From what i see in postman i think the api is expecting something like (although i could be wrong about this):

{
    files: {
        genetic_report: file
    },
    data: {}
}

Any help would be much appreciated.

Answer 1

You need to append filename as well as file in form data

formData.append(name, value);

For example:

 formData.append("image", this.image, this.imagename)