How to get progress from XMLHttpRequest

Question

Is it possible to get the progress of an XMLHttpRequest  bytes uploaded  bytes downloaded     This would be useful to show a progress bar when the user is uploading a large file  The standard API doesn t seem to support it  but maybe there s some non-standard extension in any of the browsers out there  It seems like a pretty obvious feature to have after all  since the client knows how many bytes were uploaded downloaded   note  I m aware of the  poll the server for progress  alternative  it s what I m doing right now   the main problem with this  other than the complicated server-side code  is that typically  while uploading a big file  the user s connection is completely hosed  because most ISPs offer poor upstream  So making extra requests is not as responsive as I d hoped  I was hoping there d be a way  maybe non-standard  to get this information  which the browser has at all times

User · Answer

If you have access to your apache install and trust third-party code, you can use the apache upload progress module (if you use apache; there's also a nginx upload progress module).

Otherwise, you'd have to write a script that you can hit out of band to request the status of the file (checking the filesize of the tmp file for instance).

There's some work going on in firefox 3 I believe to add upload progress support to the browser, but that's not going to get into all the browsers and be widely adopted for a while (more's the pity).

User · Answer

One of the most promising approaches seems to be opening a second communication channel back to the server to ask it how much of the transfer has been completed

User · Answer

The only way to do that with pure javascript is to implement some kind of polling mechanism  You will need to send ajax requests at fixed intervals  each 5 seconds for example  to get the number of bytes received by the server   A more efficient way would be to use flash  The flex component FileReference dispatchs periodically a  progress  event holding the number of bytes already uploaded   If you need to stick with javascript  bridges are available between actionscript and javascript   The good news is that this work has been already done for you     swfupload  This library allows to register a javascript handler on the flash progress event   This solution has the hudge advantage of not requiring aditionnal resources on the server side

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   lt p id  demo  gt result lt  p gt  x000D   lt button type  button  onclick  get post ajax     gt Change Content lt  button gt  x000D   lt script type  text javascript  gt  x000D   function update progress e  x000D     x000D     if  e lengthComputable  x000D       x000D       var percentage   Math round  e loaded e total  100   x000D       console log  percent     percentage          x000D       x000D     else  x000D       x000D      console log  Unable to compute progress information since the total size is unknown    x000D       x000D     x000D   function transfer complete e  console log  The transfer is complete      x000D   function transfer failed e  console log  An error occurred while transferring the file      x000D   function transfer canceled e  console log  The transfer has been canceled by the user      x000D   function get post ajax   x000D     x000D      var xhttp  x000D      if  window XMLHttpRequest  xhttp   new XMLHttpRequest      code for modern browsers   x000D     else xhttp   new ActiveXObject  Microsoft XMLHTTP       code for IE6  IE5     x000D      xhttp onprogress   update progress  x000D    xhttp addEventListener  load   transfer complete  false   x000D    xhttp addEventListener  error   transfer failed  false   x000D    xhttp addEventListener  abort   transfer canceled  false       x000D      xhttp onreadystatechange   function   x000D        x000D        if  xhttp readyState    4  amp  amp  xhttp status    200  x000D          x000D           document getElementById  demo   innerHTML   xhttp responseText  x000D          x000D         x000D     xhttp open  GET    http   it-tu com ajax test php   true   x000D     xhttp send    x000D     x000D   lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

The only way to do that with pure javascript is to implement some kind of polling mechanism  You will need to send ajax requests at fixed intervals  each 5 seconds for example  to get the number of bytes received by the server   A more efficient way would be to use flash  The flex component FileReference dispatchs periodically a  progress  event holding the number of bytes already uploaded   If you need to stick with javascript  bridges are available between actionscript and javascript   The good news is that this work has been already done for you     swfupload  This library allows to register a javascript handler on the flash progress event   This solution has the hudge advantage of not requiring aditionnal resources on the server side

User · Answer

The only way to do that with pure javascript is to implement some kind of polling mechanism  You will need to send ajax requests at fixed intervals  each 5 seconds for example  to get the number of bytes received by the server   A more efficient way would be to use flash  The flex component FileReference dispatchs periodically a  progress  event holding the number of bytes already uploaded   If you need to stick with javascript  bridges are available between actionscript and javascript   The good news is that this work has been already done for you     swfupload  This library allows to register a javascript handler on the flash progress event   This solution has the hudge advantage of not requiring aditionnal resources on the server side

User · Answer

Firefox supports XHR download progress events

User · Answer

For the total uploaded there doesn t seem to be a way to handle that  but there s something similar to what you want for download  Once readyState is 3  you can periodically query responseText to get all the content downloaded so far as a String  this doesn t work in IE   up until all of it is available at which point it will transition to readyState 4  The total bytes downloaded at any given time will be equal to the total bytes in the string stored in responseText   For a all or nothing approach to the upload question  since you have to pass a string for upload  and it s possible to determine the total bytes of that  the total bytes sent for readyState 0 and 1 will be 0  and the total for readyState 2 will be the total bytes in the string you passed in  The total bytes both sent and received in readyState 3 and 4 will be the sum of the bytes in the original string plus the total bytes in responseText

User · Answer

One of the most promising approaches seems to be opening a second communication channel back to the server to ask it how much of the transfer has been completed

User · Answer

For the bytes uploaded it is quite easy  Just monitor the xhr upload onprogress event  The browser knows the size of the files it has to upload and the size of the uploaded data  so it can provide the progress info   For the bytes downloaded  when getting the info with xhr responseText   it is a little bit more difficult  because the browser doesn t know how many bytes will be sent in the server request  The only thing that the browser knows in this case is the size of the bytes it is receiving    There is a solution for this  it s sufficient to set a Content-Length header on the server script  in order to get the total size of the bytes the browser is going to receive    For more go to https   developer mozilla org en Using XMLHttpRequest    Example  My server script reads a zip file  it takes 5 seconds     filesize filesize  test zip     header  Content-Length       filesize      set header length    if the headers is not set then the evt loaded will be 0 readfile  test zip    exit 0    Now I can monitor the download process of the server script  because I know it s total length   function updateProgress evt        if  evt lengthComputable            evt loaded the bytes the browser received          evt total the total bytes set by the header          jQuery UI progress bar to show the progress on screen      var percentComplete    evt loaded   evt total    100             progressbar   progressbar   option    value   percentComplete               function sendreq evt           var req   new XMLHttpRequest             progressbar   progressbar            req onprogress   updateProgress      req open  GET    test php   true         req onreadystatechange   function  aEvt              if  req readyState    4                              run any callback here                          req send

User · Answer

The only way to do that with pure javascript is to implement some kind of polling mechanism  You will need to send ajax requests at fixed intervals  each 5 seconds for example  to get the number of bytes received by the server   A more efficient way would be to use flash  The flex component FileReference dispatchs periodically a  progress  event holding the number of bytes already uploaded   If you need to stick with javascript  bridges are available between actionscript and javascript   The good news is that this work has been already done for you     swfupload  This library allows to register a javascript handler on the flash progress event   This solution has the hudge advantage of not requiring aditionnal resources on the server side

User · Answer

One of the most promising approaches seems to be opening a second communication channel back to the server to ask it how much of the transfer has been completed

User · Answer

Firefox 3 5 will support upload progress event

User · Answer

If you have access to your apache install and trust third-party code, you can use the apache upload progress module (if you use apache; there's also a nginx upload progress module).

Otherwise, you'd have to write a script that you can hit out of band to request the status of the file (checking the filesize of the tmp file for instance).

There's some work going on in firefox 3 I believe to add upload progress support to the browser, but that's not going to get into all the browsers and be widely adopted for a while (more's the pity).

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   lt p id  demo  gt result lt  p gt  x000D   lt button type  button  onclick  get post ajax     gt Change Content lt  button gt  x000D   lt script type  text javascript  gt  x000D   function update progress e  x000D     x000D     if  e lengthComputable  x000D       x000D       var percentage   Math round  e loaded e total  100   x000D       console log  percent     percentage          x000D       x000D     else  x000D       x000D      console log  Unable to compute progress information since the total size is unknown    x000D       x000D     x000D   function transfer complete e  console log  The transfer is complete      x000D   function transfer failed e  console log  An error occurred while transferring the file      x000D   function transfer canceled e  console log  The transfer has been canceled by the user      x000D   function get post ajax   x000D     x000D      var xhttp  x000D      if  window XMLHttpRequest  xhttp   new XMLHttpRequest      code for modern browsers   x000D     else xhttp   new ActiveXObject  Microsoft XMLHTTP       code for IE6  IE5     x000D      xhttp onprogress   update progress  x000D    xhttp addEventListener  load   transfer complete  false   x000D    xhttp addEventListener  error   transfer failed  false   x000D    xhttp addEventListener  abort   transfer canceled  false       x000D      xhttp onreadystatechange   function   x000D        x000D        if  xhttp readyState    4  amp  amp  xhttp status    200  x000D          x000D           document getElementById  demo   innerHTML   xhttp responseText  x000D          x000D         x000D     xhttp open  GET    http   it-tu com ajax test php   true   x000D     xhttp send    x000D     x000D   lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Firefox supports XHR download progress events

User · Answer

One of the most promising approaches seems to be opening a second communication channel back to the server to ask it how much of the transfer has been completed

User · Answer

For the total uploaded there doesn t seem to be a way to handle that  but there s something similar to what you want for download  Once readyState is 3  you can periodically query responseText to get all the content downloaded so far as a String  this doesn t work in IE   up until all of it is available at which point it will transition to readyState 4  The total bytes downloaded at any given time will be equal to the total bytes in the string stored in responseText   For a all or nothing approach to the upload question  since you have to pass a string for upload  and it s possible to determine the total bytes of that  the total bytes sent for readyState 0 and 1 will be 0  and the total for readyState 2 will be the total bytes in the string you passed in  The total bytes both sent and received in readyState 3 and 4 will be the sum of the bytes in the original string plus the total bytes in responseText

User · Answer

If you have access to your apache install and trust third-party code, you can use the apache upload progress module (if you use apache; there's also a nginx upload progress module).

Otherwise, you'd have to write a script that you can hit out of band to request the status of the file (checking the filesize of the tmp file for instance).

There's some work going on in firefox 3 I believe to add upload progress support to the browser, but that's not going to get into all the browsers and be widely adopted for a while (more's the pity).

User · Answer

For the bytes uploaded it is quite easy  Just monitor the xhr upload onprogress event  The browser knows the size of the files it has to upload and the size of the uploaded data  so it can provide the progress info   For the bytes downloaded  when getting the info with xhr responseText   it is a little bit more difficult  because the browser doesn t know how many bytes will be sent in the server request  The only thing that the browser knows in this case is the size of the bytes it is receiving    There is a solution for this  it s sufficient to set a Content-Length header on the server script  in order to get the total size of the bytes the browser is going to receive    For more go to https   developer mozilla org en Using XMLHttpRequest    Example  My server script reads a zip file  it takes 5 seconds     filesize filesize  test zip     header  Content-Length       filesize      set header length    if the headers is not set then the evt loaded will be 0 readfile  test zip    exit 0    Now I can monitor the download process of the server script  because I know it s total length   function updateProgress evt        if  evt lengthComputable            evt loaded the bytes the browser received          evt total the total bytes set by the header          jQuery UI progress bar to show the progress on screen      var percentComplete    evt loaded   evt total    100             progressbar   progressbar   option    value   percentComplete               function sendreq evt           var req   new XMLHttpRequest             progressbar   progressbar            req onprogress   updateProgress      req open  GET    test php   true         req onreadystatechange   function  aEvt              if  req readyState    4                              run any callback here                          req send

User · Answer

For the total uploaded there doesn t seem to be a way to handle that  but there s something similar to what you want for download  Once readyState is 3  you can periodically query responseText to get all the content downloaded so far as a String  this doesn t work in IE   up until all of it is available at which point it will transition to readyState 4  The total bytes downloaded at any given time will be equal to the total bytes in the string stored in responseText   For a all or nothing approach to the upload question  since you have to pass a string for upload  and it s possible to determine the total bytes of that  the total bytes sent for readyState 0 and 1 will be 0  and the total for readyState 2 will be the total bytes in the string you passed in  The total bytes both sent and received in readyState 3 and 4 will be the sum of the bytes in the original string plus the total bytes in responseText

User · Answer

For the total uploaded there doesn t seem to be a way to handle that  but there s something similar to what you want for download  Once readyState is 3  you can periodically query responseText to get all the content downloaded so far as a String  this doesn t work in IE   up until all of it is available at which point it will transition to readyState 4  The total bytes downloaded at any given time will be equal to the total bytes in the string stored in responseText   For a all or nothing approach to the upload question  since you have to pass a string for upload  and it s possible to determine the total bytes of that  the total bytes sent for readyState 0 and 1 will be 0  and the total for readyState 2 will be the total bytes in the string you passed in  The total bytes both sent and received in readyState 3 and 4 will be the sum of the bytes in the original string plus the total bytes in responseText

User · Answer

Firefox 3 5 will support upload progress event

User · Answer

If you have access to your apache install and trust third-party code, you can use the apache upload progress module (if you use apache; there's also a nginx upload progress module).

Otherwise, you'd have to write a script that you can hit out of band to request the status of the file (checking the filesize of the tmp file for instance).

There's some work going on in firefox 3 I believe to add upload progress support to the browser, but that's not going to get into all the browsers and be widely adopted for a while (more's the pity).

[javascript] How to get progress from XMLHttpRequest

Examples related to javascript

Examples related to ajax

Examples related to progress-bar