I am using Axios to handle the file upload. I am facing a problem showing the upload progress of the file upload. The file upload view I am using is "picture-card".
HTML
<Upload
accept="image/*"
customRequest={uploadImage}
onChange={handleOnChange}
listType="picture-card"
fileList={defaultListOfFiles}
className="image-upload-grid"
>
{defaultListOfFiles.length >= 8 ? null : <div>Upload Button</div>}
</Upload>
OnChangeHandler
const handleOnChange = ({ file, fileList, event }) => {
console.log(file, fileList, event);
//Using Hooks to update the state to the current filelist
setDefaultFileList(fileList);
//filelist - [{uid: "-1",url:'Some url to image'}]
};
CustomRequest handler
const uploadImage = options => {
const { onSuccess, onError, file, onProgress } = options;
const fmData = new FormData();
const config = {
headers: { "content-type": "multipart/form-data" },
onUploadProgress: event => {
console.log((event.loaded / event.total) * 100);
onProgress({ percent: (event.loaded / event.total) * 100 },file);
}
};
fmData.append("image", file);
axios
.post("http://localhost:4000/upload", fmData, config)
.then(res => {
onSuccess(file);
console.log(res);
})
.catch(err=>{
const error = new Error('Some error');
onError({event:error});
});
}
antd
Upload
uses rc-upload
under the hood. onProgress
accepts only one argument. I have also used antd
Progress
for an alternative way of showing progress. Read more about customRequest.
JSX
import { Upload, Progress } from "antd";
const App = () => {
const [defaultFileList, setDefaultFileList] = useState([]);
const [progress, setProgress] = useState(0);
const uploadImage = async options => {
const { onSuccess, onError, file, onProgress } = options;
const fmData = new FormData();
const config = {
headers: { "content-type": "multipart/form-data" },
onUploadProgress: event => {
const percent = Math.floor((event.loaded / event.total) * 100);
setProgress(percent);
if (percent === 100) {
setTimeout(() => setProgress(0), 1000);
}
onProgress({ percent: (event.loaded / event.total) * 100 });
}
};
fmData.append("image", file);
try {
const res = await axios.post(
"https://jsonplaceholder.typicode.com/posts",
fmData,
config
);
onSuccess("Ok");
console.log("server res: ", res);
} catch (err) {
console.log("Eroor: ", err);
const error = new Error("Some error");
onError({ err });
}
};
const handleOnChange = ({ file, fileList, event }) => {
// console.log(file, fileList, event);
//Using Hooks to update the state to the current filelist
setDefaultFileList(fileList);
//filelist - [{uid: "-1",url:'Some url to image'}]
};
return (
<div class="container">
<Upload
accept="image/*"
customRequest={uploadImage}
onChange={handleOnChange}
listType="picture-card"
defaultFileList={defaultFileList}
className="image-upload-grid"
>
{defaultFileList.length >= 1 ? null : <div>Upload Button</div>}
</Upload>
{progress > 0 ? <Progress percent={progress} /> : null}
</div>
);
};
Here is a demo