File Upload with Progress React

user_15295640 0
Viewed 896

I am trying to Upload the file and save the file in the state of the component as file.originFileObj, I want my output to be like while uploading the file the progress should be Shown

for Uploading

And while uploading the file after selection

After

I have used antd upload but it does not provide the round and file size status and that kind of percentage, I have also tried simple HTML input tag but it also does not work, the last thing I got near to the requirement was uploading the file to certain URL and displaying that progress but I need to be saved in my state and uploading status to be shown as shown in the image 2

antd reactjs upload file-upload file
1 Answers

add options to your api request

    const options = {
        onUploadProgress: (progressEvent) => {
            const {loaded, total} = progressEvent
            let percent = Math.floor(loaded * 100 / total)
            this.setState({
                uploadPercentage: percent
            })
        },
    }
user_139364980
Related