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
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" v-bind:style="{width: videoDownloadPercentage + '%'}"></div>
</div>


 <button class="btn btn-info" type="button" @click="yourMethodName(1)">Upload</button>

//For Download
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" v-bind:style="{width: videoDownloadPercentage + '%'}"></div>
</div>

 <button class="btn btn-info" type="button" @click="yourMethodName(1)">Upload</button>

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!