How to add a progress bar to file upload using javascript and ajax call?

Question

I need a progress bar in my file uploader. This is the ajax call I am using for file upload and progress bar

$(function() {

        $('button[type=button]').click(function(e) {
            e.preventDefault();
            //Disable submit button
            $(this).prop('disabled',true);

            var form = document.forms[0];
            var formData = new FormData(form);

            // Ajax call for file uploaling
            var ajaxReq = $.ajax({
                url : URI.file.multipleFileUploadUrl(),
                type : 'POST',
                data : formData,
                cache : false,
                contentType : false,
                processData : false,
                xhr: function(){
                    //Get XmlHttpRequest object
                     var xhr = $.ajaxSettings.xhr() ;

                    //Set onprogress event handler

                     xhr.upload.onprogress = function(event){
                        var perc = Math.round((event.loaded / event.total) * 100);
                        $('#progressBar').text(perc + '%');
                        $('#progressBar').css('width',perc + '%');
                     };

                     return xhr ;
                },
                beforeSend: function( xhr ) {
                    //Reset alert message and progress bar
                    $('#alertMsg').text('');
                    $('#progressBar').text('');
                    $('#progressBar').css('width','0%');
                }
            });

            // Called on success of file upload
            ajaxReq.done(function(msg) {
                $('#alertMsg').text(msg);
                $('input[type=file]').val('');
                $('button[type=submit]').prop('disabled',false);
            });

            // Called on failure of file upload
            ajaxReq.fail(function(jqXHR) {
                $('#alertMsg').text(jqXHR.responseText+'('+jqXHR.status+
                        ' - '+jqXHR.statusText+')');
                $('button[type=submit]').prop('disabled',false);
            });
        });
    });

Find below is the file upload which works correctly without integrating the progress bar.

function multipleFileUpload(form) {
    var uploadSuccess = true;
    var data = new FormData(form);

    var csrf_headerName  = $("meta[name='_csrf_header']").attr("content");
    var csrf_paramValue  = $("meta[name='_csrf']").attr("content");
    ShowLoad();
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: URI.file.multipleFileUploadUrl(),
        data: data,
        beforeSend: function (request) {
            request.setRequestHeader(csrf_headerName, csrf_paramValue);
        },
         processData: false,
         contentType: false,
         cache: false,
         timeout: 6000000,
         success: function (data) {
            HideLoad();
            data.forEach(function(d, index){
                if(d.status === 'ERROR'){
                    // HideLoad();
                    uploadSuccess = false;
                    toastr.error('Error has occurred while uploading image file '+d.data.name);
                }else if( d.data.id != null ){
                    //HideLoad();
                    //toastr.success('Successfully updated '+d.data.name, 'Upload Success');
                }
            });

            if(uploadSuccess){
                mediaFileMetaDataSave(data[0],data[1]);
            }
         },
         error: function (e) {
            HideLoad();
            toastr.error('Error has occurred while uploading attachments.');
         }
    });
 }

WHen I use the above code in my script I can do file upload properly although the progress bar reach 100% immediately before file upload is complete. What is wrong here?

Well lets my get my mining hat, a pick axe and a torch and start digging through this code heap. Please update and show us where the exact problem is --> minimal reproducible example. — Mouser
– Mouser, Commented Oct 20, 2017 at 10:51
Are you testing this locally, A file upload could be instantanously. — Mouser
– Mouser, Commented Oct 20, 2017 at 10:56
yes. I tested with a large file. And also I see progress changes immediately from 0 to 100% — sndu
– sndu, Commented Oct 20, 2017 at 10:57

sndu · Accepted Answer · 2017-10-24 06:40:34Z

This works fine.

function submitForm(form) {
        ShowLoad();
        var data = new FormData(form);
        var csrf_headerName  = $("meta[name='_csrf_header']").attr("content");
        var csrf_paramValue  = $("meta[name='_csrf']").attr("content");

    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: URI.file.singleFileUploadUrl(),
        data: data,
        beforeSend: function (request, xhr) {
            request.setRequestHeader(csrf_headerName, csrf_paramValue);
             //Reset alert message and progress bar
            $('#alertMsg').text('');
            $('#progressBar').text('');
            $('#progressBar').css('width','0%');
        },
        processData: false,

        contentType: false,
        cache: false,
        timeout: 6000000,
        success: function (data) {
            HideLoad();
        },

        xhr: function(){
            //Get XmlHttpRequest object
             var xhr = $.ajaxSettings.xhr() ;
            //Set onprogress event handler
             xhr.upload.onprogress = function(data){
                var perc = Math.round((data.loaded / data.total) * 100);
                $('#progressBar').text(perc + '%');
                $('#progressBar').css('width',perc + '%');
             };
             return xhr ;
        },
        error: function (e) {
            HideLoad();
            toastr.error('Error has occurred while uploading the media file.');
        }
    });
 }

Collectives™ on Stack Overflow

How to add a progress bar to file upload using javascript and ajax call?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related