Bootstrap Progress Bar with Vue

The below example uses Bootstrap 4.5, Vue 2 and Axios.

In order to get your real-time progress bar to show the correct values on upload or download, you will need to do the following:

Html:

//For upload

    




 Upload

//For Download

    



 Upload

Vue.js:

export default {

data() {
       return {
             videoUploadPercentage: 0,
             videoDownloadPercentage: 0
       }},
YourMethodName: function (id) {
    let formData = new FormData();
    const config = {
        //Choose upload
        onUploadProgress: event => {
            this.videoUploadPercentage = Math.round(
                (event.loaded * 100) / event.total
            );
        },
        //Or download
       onDownloadProgress: event => {
           this.videoDownloadPercentage = Math.round(
               (event.loaded * 100) / event.total
          );
        },
    };

    formData.append('_method', 'patch');
    axios.post('/admin/videos/' + id, formData, config).then((response) => {
        }).catch((error) => {});
},
}

Things to remember, if you test this upload on a tiny file (less than 10mb) you may not see the percentage moving up.

I experienced this issue when trying to test my progress bar with Vue on a file of about 9mb. But when I change the file from a 9mb to a 40mb, I started to see the difference.

Make sure you do not use the download or upload methods together, it is either one or the other :-)

I hope this will work out for you and you can thank us at Kollox.com by resharing this article to social networking websites.

Thanks!