CODEWITHSUNDEEP
javascripthtmlxmlhttprequest
ActionJackson
ActionJackson

Reputation: 59

XMLHttpRequest upload progress not firing correctly

I'm trying to send a file using XMLHttpRequest, which is working, but my progress monitor is not working.

I've tried uploading a 700KB file and a 3MB file and I get the same issue. the "progress" event fires once, and only once, and it says that the event.loaded and event.total is always the same. It takes an adequate amount of time to upload but the event only fires once.

Tested in chrome and firefox with the same issues. Below is a console log of the event

XMLHttpRequestProgressEvent {totalSize: 764277, position: 764277, total: 764277, loaded: 764277, lengthComputable: true…}
bubbles: false
cancelBubble: false
cancelable: true
clipboardData: undefined
currentTarget: XMLHttpRequestUpload
defaultPrevented: false
eventPhase: 0
lengthComputable: true
loaded: 764277
position: 764277
returnValue: true
srcElement: XMLHttpRequestUpload
target: XMLHttpRequestUpload
timeStamp: 1390945794935
total: 764277
totalSize: 764277
type: "progress"
__proto__: XMLHttpRequestProgressEvent

And here's my source javascript

var formData = new FormData();
formData.append('file', file);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {
    console.log(e);
}, false);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log('done');
    } 
    else if (xhr.status == 403) {
        console.log('forbidden');
    }
    else {
        console.log('error');
    }
};

xhr.open("POST", '/upload.php');
xhr.send(formData);

Upvotes: 3

Views: 2361

Answers (1)

Frank W
Frank W

Reputation: 891

Alright, I had this issue too and was really suprised why it did not work after spending many hours on this with many examples from the net. Funny or depressing thing was, that it did work perfectly on other machines with almost the same setup.

I found out that my antivirus program was causing this issue. For example if you use AVG, there is a feature called LinkScanner. If this is enabled it will not call the XMLHttpRequest.upload.progress event properly. I am sure there are other web based features in other antivirus programs that can influence this functionality.

Hope this might help others who face the same issue and spent hours of pain...

Upvotes: 4

Related Questions