CODEWITHSUNDEEP
extjs
megadruck
megadruck

Reputation: 437

Progressbar in XHttpRequest does not work

I have the following xHttpRequest and trying to get the progressbar working. The progress Event is triggered. But it seems to be done once and is not updated anymore

uploadFile: function (file, progressBar, infoText, count) {
     var xhr = new XMLHttpRequest(),
         me = this;

     progressBar = progressBar || 0;
     infoText = infoText || null;

     xhr.open("post", me.requestURL, true);

     xhr.addEventListener('progress', function(evt) {
         // debugger;
         progressBar.update( { percent: (evt.loaded / file.size)*100 } );
     });

     // Upload complete
     xhr.addEventListener('load', function(e) {
         var target = e.target,
             response = Ext.decode(target.responseText);

         if (response.success == false && response.blacklist == true) {
             Shopware.Notification.createGrowlMessage(me.snippets.blackListTitle, Ext.String.format(me.snippets.blackListMessage, response.extension));
         }
         if (response.return == "check") {

             me.infoMessageBox(response,count);

         }

Does anybody have an idea ?

Upvotes: 0

Views: 77

Answers (1)

Makha
Makha

Reputation: 337

If you are uploading the file you must listen to xhr.uploads progress:

 xhr.upload.addEventListener('progress', function(evt) {
     progressBar.update( { percent: (evt.loaded / file.size)*100 } );
 });

Or like this:

 xhr.upload.onprogress = function(evt) {
     progressBar.update( { percent: (evt.loaded / file.size)*100 } );
 }

It's better to use evt.total instead of file.size. More: link to MDN

Upvotes: 1

Related Questions