Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

147
Views
Ajax upload progress fires in different way than AjaxForm plugin

With this code:

$("#myform").ajaxForm({
    beforeSubmit: function() {
        let percentVal = '0%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    uploadProgress: function(event, position, total, percentComplete) {
        let percentVal = percentComplete + '%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    success: function(response) {
        let percentVal = '100%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    complete: function(xhr) {
    }
});

I get a nice and smooth progress of the upload even with quite small files (i.e. 1-2 MB). Instead with this other code:

const formData = new FormData($("#myform")[0]);

$.ajax({
    xhr: function() {
        xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = Math.floor(e.loaded / e.total) * 100;
                const percentVal = percentComplete + '%';
                bar.width(percentVal)
                bar.html(percentVal).attr('aria-valuenow', percentVal);
            }
        }, false);
        return xhr;
    },
    type: 'POST',
    url: action,
    data: formData,
    contentType: false,
    processData: false,
    cache: false,

    beforeSend: function() {
        let percentVal = '0%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
    },

    success: function(data, status, xhr) {
        let percentVal = '100%';
        bar.width(percentVal)
        bar.html(percentVal).attr('aria-valuenow', percentVal);
        alertOk.show();
    },

    complete: function(xhr) {
    }
});

The progress event fires only at the end of the upload even with quite large files (> 10 MB) that takes several seconds to be completed.

What am I missing in the pure JQuery implementation in order to get progress updates in small chunks like the AjaxForm plugin does?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!