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