why i cant upload file in reactjs-CodePudding

My file is shown in the console but getting a 400 error i.e. Please upload the file.

    function AdminPanel() {
      const [show, setShow] = useState(false);
      const [pdffile, setPdffile] = useState("");

   function handleFileChange(e) {
      const files = e.target.files[0];
       setPdffile(files);
       console.log("Guru4666", pdffile);
   }
  const SubmitPDF = () => {
     axios({
     method: "post",
     url: "url",
     data: {"dataFile" : pdffile }
  }).then(res => {
    console.log("REs", res)
  })
}

<div className="form-group form_aside">
    <input type="file" className="form-control" id="files"
     name="PDF" onChange={handleFileChange} />
</div>

Submit

Console result is

Guru4666 
File {
lastModified: 1634196746000
lastModifiedDate: Thu Oct 14 2021 13:02:26 
GMT 0530 (India Standard Time) {}
name: "barkelou.png"size: 5906type: 
"image/png"webkitRelativePath: ""
[[Prototype]]: File}

And the API result is:

dataFile: {}

400

CodePudding user response：

You should probably use FormData and multipart/form-data

 const SubmitPDF = () => {
   const formData = new FormData();
   formData.append("dataFile", pdffile);
   axios({
     method: "post",
     url: "url",
     data: formData,
     headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    console.log("REs", res)
  })