Problem in implementing file Upload in Reactjs - reactjs

Question

I am Implementing a file upload feature to get resume of job applicants in my Reactjs form.
Now whenever I click on Upload everything works fine but while the file is uploading browser throws an error.
Here is my fileUpload.js.
import React, { useState, useRef } from "react";
import axios, { CancelToken, isCancel } from "axios";
import { LinearProgressWithLabel } from "./ProgressBar";
const FileUpload = () => {
const [uploadPercentage, setUploadPercentage] = useState(0);
const cancelFileUpload = useRef(null);
const uploadFile = ({ target: { files } }) => {
let data = new FormData();
data.append("file", files[0]);
const options = {
onUploadProgress: progressEvent => {
const { loaded, total } = progressEvent;
let percent = Math.floor((loaded * 100) / total);
if (percent < 100) {
setUploadPercentage(percent);
}
},
cancelToken: new CancelToken(
cancel => (cancelFileUpload.current = cancel)
)
};
const BASE_URL = "https://api.quantel.in"
axios
.post(
`${BASE_URL}/api/v1/jobs/resume`,
data,
options
)
.then(res => {
console.log(res);
setUploadPercentage(100);
setTimeout(() => {
setUploadPercentage(0);
}, 1000);
})
.catch(err => {
console.log(err);
if (isCancel(err)) {
alert(err.message);
}
setUploadPercentage(0);
});
};
const cancelUpload = () => {
if (cancelFileUpload.current)
cancelFileUpload.current("User has canceled the file upload.");
};
return (
<>
<p>
<input
type="file"
className="form-control-file"
onChange={uploadFile}
/>
</p>
{uploadPercentage > 0 && (
<div className="row mt-3">
<div className="col pt-1">
<LinearProgressWithLabel value={uploadPercentage} />
</div>
<div className="col-auto">
<span
className="text-primary cursor-pointer"
onClick={() => cancelUpload()}
>
Cancel
</span>
</div>
</div>
)}
</>
);
};
export default FileUpload;
When I click on the browse button the browser throws the following error. And I am confused why is it so?

Answer 1

When you check for uploadPercentage > 0 change that to this
{uploadPercentage > 0 ? (
<div className="row mt-3">
<div className="col pt-1">
<LinearProgressWithLabel value={uploadPercentage} />
</div>
<div className="col-auto">
<span
className="text-primary cursor-pointer"
onClick={() => cancelUpload()}
>
Cancel
</span>
</div>
</div>
) : null }
All your code inside { ... } is treated as a function (inside JSX) and in your case when uploadPercentage === 0 it is returning undefined.