upload progress with Vue.js and Laravel

I have followed a tutorial of Maximilian https://www.youtube.com/watch?v=VqnJwh6E9ak to upload my files on S3 I upload different large files of upto 250MB the backend which is written in laravel works fine and uploads the file to S3, the front also works fine and displays a success/failure message as returned by Laravel, but my problem is if I am uploading a file of 100 mb the upload progress should be in sync and display the actual percentage uploaded. but that doesn't happens and I see 30% -> 60% ->100% within a second

Following is my Vue.js code

<script>

export default {
    mounted() {
        console.log('mounted');
        let url = $(location).attr('href');
        let segments = url.split('/');
        this.podcastId = segments[5];

        axios.get(`/api/podcast/${this.podcastId}`).then(response => {
            let podcast = response.data.podcast;
            this.podcast_name = podcast.name;
        });
    },
    data() {
        return {
            podcast_name: '',
            episode_title: '',
            description: '',
            short_summary: '',
            keywords: '',
            selected_file: null,
            uploadPercentage: 0,
            uploading: false,
            podcastId: ''
        }
    },
    methods: {
        toggleSection(podcast_type) {
            if (podcast_type === '2') {
                this.showHosted = false;
                this.showRss = true;
            } else if (podcast_type === '1') {
                this.showRss = false;
                this.showHosted = true;
            }
        },
        onFileChanged(event) {
            this.selected_file = event.target.files[0];
        },
        onSubmit() {
            const formData = new FormData();
            formData.append('title', this.episode_title);
            formData.append('description', this.description);
            formData.append('keywords', this.keywords);
            formData.append('summary', this.short_summary);
            formData.append('audio', this.selected_file);
            this.uploading = true;
            axios.post(`/podcaster/podcast/${this.podcastId}/add-episode`, formData, {
                onUploadProgress: uploadEvent => {
                    this.uploadPercentage = parseInt(uploadEvent.loaded * 100 / uploadEvent.total);
                    console.log(this.uploadPercentage);
                }
            }).then(response => {

                this.uploading = false;
                let status = response.data.status;
                let message = response.data.message;
                let url = response.data.url;

                swal({
                    title: "",
                    text: message,
                    type: status,
                });

                /*if (status === 'success') {
                    window.setTimeout(function () {
                        window.location.href = url;
                    }, 5000);
                }*/


            });

        }
    },
}

from Newest questions tagged laravel-5 - Stack Overflow http://bit.ly/2VMRh5j
via IFTTT