Detect when browser receives file download

Question

I have a page that allows the user to download a dynamically-generated file  It takes a long time to generate  so I d like to show a  waiting  indicator  The problem is  I can t figure out how to detect when the browser has received the file  so I can hide the indicator   I m making the request in a hidden form  which POSTs to the server  and targets a hidden iframe for its results  This is so I don t replace the entire browser window with the result  I listen for a  load  event on the iframe  in the hope that it will fire when the download is complete   I return a  Content-Disposition  attachment  header with the file  which causes the browser to show the  Save  dialog  But the browser doesn t fire a  load  event in the iframe   One approach I tried is using a multi-part response  So it would send an empty HTML file  as well as the attached downloadable file  For example   Content-type  multipart x-mixed-replace boundary  abcde   --abcde Content-type  text html  --abcde Content-type  application vnd fdf Content-Disposition  attachment  filename foo fdf  file-content --abcde   This works in Firefox  it receives the empty HTML file  fires the  load  event  then shows the  Save  dialog for the downloadable file  But it fails on IE and Safari  IE fires the  load  event but doesn t download the file  and Safari downloads the file  with the wrong name and content-type   and doesn t fire the  load  event   A different approach might be to make a call to start the file creation  then poll the server until it s ready  then download the already-created file  But I d rather avoid creating temporary files on the server   Does anyone have a better idea

User · Answer

Primefaces uses cookie polling  too  https   github com primefaces primefaces blob 32bb00299d00e50b2cba430638468a4145f4edb0 src main resources META-INF resources primefaces core core js L458      monitorDownload  function start  complete  monitorKey            if this cookiesEnabled                  if start                    start                               var cookieName   monitorKey    primefaces download     monitorKey    primefaces download               window downloadMonitor   setInterval function                     var downloadComplete   PrimeFaces getCookie cookieName                    if downloadComplete      true                         if complete                            complete                                              clearInterval window downloadMonitor                       PrimeFaces setCookie cookieName  null                                    1000

User · Answer

When the user triggers the generation of the file  you could simply assign a unique ID to that  download   and send the user to a page which refreshes  or checks with AJAX  every few seconds   Once the file is finished  save it under that same unique ID and      If the file is ready  do the download  If the file is not ready  show the progress    Then you can skip the whole iframe waiting browserwindow mess  yet have a really elegant solution

User · Answer

The core problem is that the web browser does not have an event that fires when page navigation is cancelled but does have an event that fires when a page completes loading   Anything outside of a direct browser event is going to be a hack with pros and cons  There are four known approaches to dealing with detecting when a browser download starts   Call fetch    retrieve the entire response  attach an a tag with a download attribute  and trigger a click event   Modern web browsers will then offer the user the option to save the already retrieved file   There are several downsides with this approach    The entire data blob is stored in RAM  so if the file is large  it will consume that much RAM   For small files  this probably isn t a deal breaker  The user has to wait for the entire file to download before they can save it   They also can t leave the page until it completes  The built-in web browser file downloader is not used  A cross-domain fetch will probably fail unless CORS headers are set    Use an iframe   a server-side cookie   The iframe fires a load event if a page loads in the iframe instead of starting a download but it does not fire any events if the download starts   Setting a cookie with the web server can then be detected by Javascript in a loop   There are several downsides with this approach    The server and client have to work in concert   The server has to set a cookie   The client has to detect the cookie  Cross-domain requests won t be able to set the cookie  There are limits to how many cookies can be set per domain  Can t send custom HTTP headers    Use an iframe with URL redirection   The iframe starts a request and once the server has prepared the file  it dumps a HTML document that performs a meta refresh to a new URL  which triggers the download 1 second later   The load event on the iframe happens when the HTML document loads   There are several downsides with this approach    The server has to maintain storage for the content being downloaded   Requires a cron job or similar to regularly clean up the directory  The server has to dump out special HTML content when the file is ready  The client has to guess as to when the iframe has actually made the second request to the server and when the download has actually started before removing the iframe from the DOM   This could be overcome by just leaving the iframe in the DOM  Can t send custom HTTP headers    Use an iframe   XHR   The iframe triggers the download request   As soon as the request is made via the iframe  an identical request via XHR is made   If the load event on the iframe fires  an error has occurred  abort the XHR request  and remove the iframe   If a XHR progress event fires  then downloading has probably started in the iframe  abort the XHR request  wait a few seconds  and then remove the iframe   This allows for larger files to be downloaded without relying on a server-side cookie   There are several downsides with this approach    There are two separate requests made for the same information   The server can distinguish the XHR from the iframe by checking the incoming headers  A cross-domain XHR request will probably fail unless CORS headers are set   However  the browser won t know if CORS is allowed or not until the server sends back the HTTP headers   If the server waits to send headers until the file data is ready  the XHR can roughly detect when the iframe has started to download even without CORS  The client has to guess as to when the download has actually started to remove the iframe from the DOM   This could be overcome by just leaving the iframe in the DOM  Can t send custom headers on the iframe   Without an appropriate built-in web browser event  there aren t any perfect solutions here   However  one of the four methods above will likely be a better fit than the others depending on your use-case  Whenever possible  stream responses to the client on the fly instead of generating everything first on the server and then sending the response   Various file formats can be streamed such as CSV  JSON  XML  ZIP  etc   It really depends on finding a library that supports streaming content   When streaming the response as soon as the request starts  detecting the start of the download won t matter as much because it will start almost right away  Another option is to just output the download headers up front instead of waiting for all of the content to be generated first   Then generate the content and finally start sending to the client   The user s built-in downloader will patiently wait until the data starts arriving   The downside is that the underlying network connection could timeout waiting for data to start flowing  either on the client or server side

User · Answer

If Xmlhttprequest with blob is not an option then you can open your file in new window and check if eny elements get populated in that window body with interval    x000D   x000D  var form   document getElementById  frmDownlaod    x000D   form setAttribute  action   downoad url    x000D   form setAttribute  target   downlaod    x000D   var exportwindow   window open      downlaod    width 800 height 600 resizable yes    x000D   form submit    x000D   x000D  var responseInterval   setInterval function    x000D   var winBody   exportwindow document body x000D   if winBody hasChildNodes       or  downoad url      exportwindow document location href x000D     x000D    clearInterval responseInterval   x000D       do your work x000D       if there is error page configured your application for failed requests  check for those dom elemets  x000D     x000D     1000  x000D    Better if you specify maximun no of intervals x000D   x000D   x000D

User · Answer

Based on Elmer s example I ve prepared my own solution  After elements click with defined download class it lets to show custom message on the screen  I ve used focus trigger to hide the message   JavaScript    function       download   click function     ShowDownloadMessage            function ShowDownloadMessage              message-text   text  your report is creating  please wait                message   show         window addEventListener  focus   HideDownloadMessage  false      function HideDownloadMessage        window removeEventListener  focus   HideDownloadMessage  false                              message   hide        HTML   lt div id  message  style  display  none  gt       lt div id  message-screen-mask  class  ui-widget-overlay ui-front  gt  lt  div gt       lt div id  message-text  class  ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable waitmessage  gt please wait    lt  div gt   lt  div gt    Now you should implement any element to download    lt a class  download  href  file   www ocelot com pl prepare-report  gt Download report lt  a gt    or   lt input class  download  type  submit  value  Download  name  actionType  gt    After each download click you will see message your report is creating  please wait

User · Answer

I m very late to the party but I ll put this up here if anyone else would like to know my solution   I had a real struggle with this exact problem but I found a viable solution using iframes  I know  I know  It s terrible but it works for a simple problem that I had   I had an html page that launched a separate php script that generated the file and then downloaded it  On the html page  i used the following jquery in the html header  you ll need to include a jquery library as well     lt script gt        function            var iframe       lt iframe gt     name   iframe   id   iframe     appendTo  body   hide                click   on  click   function                    iframe   attr  src    your download script php                           iframe   load function                    iframe   attr  src    your download script php download yes     lt  --on first iframe load  run script again but download file instead-- gt                  iframe   unbind     lt  --unbinds the iframe  Helps prevent against infinite recursion if the script returns valid html  such as echoing out exceptions  -- gt                       lt  script gt    On your download script php  have the following   function downloadFile  file path        if  file exists  file path             header  Content-Description  File Transfer            header  Content-Type  text csv            header  Content-Disposition  attachment  filename     basename  file path            header  Expires  0            header  Cache-Control  must-revalidate            header  Pragma  public            header  Content-Length      filesize  file path            ob clean            flush            readfile  file path           exit                SESSION  your file     path to file    this is just how I chose to store the filepath  if  isset   REQUEST  download     amp  amp    REQUEST  download       yes         downloadFile   SESSION  your file       else        execute logic to create the file      To break this down  jquery first launches your php script in an iframe  The iframe is loaded once the file is generated  Then jquery launches the script again with a request variable telling the script to download the file   The reason that you can t do the download and file generation all in one go is due to the php header   function  If you use header    you re changing the script to something other than a web page and jquery will never recognize the download script as being  loaded   I know this may not necessarily be detecting when a browser receives a file but your issue sounded similar to mine

User · Answer

One possible solution uses JavaScript on the client   The client algorithm    Generate a random unique token  Submit the download request  and include the token in a GET POST field  Show the  waiting  indicator  Start a timer  and every second or so  look for a cookie named  fileDownloadToken   or whatever you decide   If the cookie exists  and its value matches the token  hide the  waiting  indicator    The server algorithm    Look for the GET POST field in the request  If it has a non-empty value  drop a cookie  e g   fileDownloadToken    and set its value to the token s value      Client source code  JavaScript    function getCookie  name       var parts   document cookie split name           if  parts length    2  return parts pop   split      shift       function expireCookie  cName         document cookie            encodeURIComponent cName      deleted  expires     new Date  0   toUTCString       function setCursor  docStyle  buttonStyle         document getElementById   doc    style cursor   docStyle      document getElementById   button-id    style cursor   buttonStyle     function setFormToken         var downloadToken   new Date   getTime        document getElementById   downloadToken    value   downloadToken      return downloadToken     var downloadTimer  var attempts   30      Prevents double-submits by waiting for a cookie from the server  function blockResubmit         var downloadToken   setFormToken        setCursor   wait    wait          downloadTimer   window setInterval  function             var token   getCookie   downloadToken              if   token    downloadToken      attempts    0                  unblockSubmit                       attempts--         1000       function unblockSubmit       setCursor   auto    pointer       window clearInterval  downloadTimer      expireCookie   downloadToken       attempts   30      Example server code  PHP     TOKEN    downloadToken       Sets a cookie so that when the download begins the browser can    unblock the submit button  thus helping to prevent multiple clicks      The false parameter allows the cookie to be exposed to JavaScript   this- gt setCookieToken   TOKEN    GET   TOKEN    false      result    this- gt sendFile      Where   public function setCookieToken       cookieName   cookieValue   httpOnly   true   secure   false             See  http   stackoverflow com a 1459794 59087        See  http   shiflett org blog 2006 mar server-name-versus-http-host        See  http   stackoverflow com a 3290474 59087     setcookie           cookieName           cookieValue          2147483647                expires January 1  2038                                   your path           SERVER  HTTP HOST       your domain          secure                   Use true over HTTPS          httpOnly                 Set true for  AUTH COOKIE NAME

User · Answer

old thread  i know     but those  that are lead here by google might be interested in my solution  it is very simple  yet reliable  and it makes it possible to display real progress messages  and can be easily plugged in to existing processes    the script that processes  my problem was  retrieving files via http and deliver them as zip  writes the status to the session   the status is polled and displayed every second  thats all  ok  its not  you have to take care of a lot of details  eg concurrent downloads   but its a good place to start  -     the downloadpage        lt a href  download php id 1  class  download  gt DOWNLOAD 1 lt  a gt       lt a href  download php id 2  class  download  gt DOWNLOAD 2 lt  a gt               lt div id  wait  gt      Please wait         lt div id  statusmessage  gt  lt  div gt       lt  div gt       lt script gt    this is jquery        a download   each function                      this  click               function                       statusmessage   html  prepare loading                          wait   show                   setTimeout  getstatus     1000                                                       function getstatus            ajax             url    getstatus php             type   POST             dataType   json             success  function data                    statusmessage   html data message               if data status   pending                 setTimeout  getstatus     1000               else                   wait   hide                                     lt  script gt    getstatus php   lt  php session start    echo json encode   SESSION  downloadstatus       gt    download php       lt  php     session start         processing true      while  processing           SESSION  downloadstatus   array  status   gt  pending   message   gt  Processing   someinfo         session write close           processing do what has 2Bdone          session start                  SESSION  downloadstatus   array  status   gt  finished   message   gt  Done      and spit the generated file to the browser       gt

User · Answer

A quick solution if you only want to display a message or a loader gif until the download dialog is displayed is to put the message in a hidden container and when you click on the button that generate the file to be downloaded you make the container visible  Then use jquery or javascript to catch the focusout event of the button to hide the container that contain the message

User · Answer

If you re streaming a file that you re generating dynamically  and also have a realtime server-to-client messaging library implemented  you can alert your client pretty easily     The server-to-client messaging library I like and recommend is Socket io  via Node js    After your server script is done generating the file that is being streamed for download your last line in that script can emit a message to Socket io which sends a notification to the client   On the client  Socket io listens for incoming messages emitted from the server and allows you to act on them   The benefit of using this method over others is that you are able to detect a  true  finish event after the streaming is done   For example  you could show your busy indicator after a download link is clicked  stream your file  emit a message to Socket io from the server in the last line of your streaming script  listen on the client for a notification  receive the notification and update your UI by hiding the busy indicator   I realize most people reading answers to this question might not have this type of a setup  but I ve used this exact solution to great effect in my own projects and it works wonderfully   Socket io is incredibly easy to install and use  See more  http   socket io

User · Answer

Create an iframe when button link is clicked and append this to body                         lt iframe   gt                      attr  src   url                    attr  id   iframe download report                     hide                     appendTo  body       Create an iframe with delay and delete it after download                               var triggerDelay     100                              var cleaningDelay    20000                              var that   this                              setTimeout function                                     var frame       lt iframe style  width 1px  height 1px   class  multi-download-frame  gt  lt  iframe gt                                     frame attr  src   url       Content-Disposition  attachment   filename   that model get  fileName                                       ev target  after frame                                   setTimeout function                                         frame remove                                       cleaningDelay                                  triggerDelay

User · Answer

I have updated the below reference code  Add a proper download URL link and try this out   x000D   x000D   lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta charset  utf-8  gt           lt style type  text css  gt              body                 padding  0                margin  0                             svg not  root                  display  block                              playable-code                 background-color   f4f7f8                border  none                border-left  6px solid  558abb                border-width  medium medium medium 6px                color   4d4e53                height  100px                width  90                 padding  10px 10px 0                              playable-canvas                 border  1px solid  4d4e53                border-radius  2px                              playable-buttons                 text-align  right                width  90                 padding  5px 10px 5px 26px                         lt  style gt                    lt style type  text css  gt               event-log       width  25rem      height  4rem      border  1px solid black      margin   5rem      padding   2rem     input       width  11rem      margin   5rem              lt  style gt                    lt title gt XMLHttpRequest  progress event - Live example - code sample lt  title gt       lt  head gt       lt body gt                        lt div class  controls  gt       lt input class  xhr success  type  button  name  xhr  value  Click to start XHR  success     gt       lt input class  xhr error  type  button  name  xhr  value  Click to start XHR  error     gt       lt input class  xhr abort  type  button  name  xhr  value  Click to start XHR  abort     gt   lt  div gt    lt textarea readonly class  event-log  gt  lt  textarea gt                                 lt script gt                  const xhrButtonSuccess   document querySelector   xhr success    const xhrButtonError   document querySelector   xhr error    const xhrButtonAbort   document querySelector   xhr abort    const log   document querySelector   event-log     function handleEvent e    if  e type   progress    log textContent   log textContent      e type     e loaded  bytes transferred Received   event loaded  of   event total  n         else if  e type   loadstart     log textContent   log textContent      e type   started n     else if   e type   error     log textContent   log textContent      e type   error n     else if  e type   loadend     log textContent   log textContent      e type   completed n         function addListeners xhr        xhr addEventListener  loadstart   handleEvent       xhr addEventListener  load   handleEvent       xhr addEventListener  loadend   handleEvent       xhr addEventListener  progress   handleEvent       xhr addEventListener  error   handleEvent       xhr addEventListener  abort   handleEvent      function runXHR url        log textContent            const xhr   new XMLHttpRequest            var request   new XMLHttpRequest       addListeners request           request open  GET   url  true           request responseType    blob           request onload   function  e            var data   request response          var blobUrl   window URL createObjectURL data           var downloadLink   document createElement  a            downloadLink href   blobUrl          downloadLink download   download zip           downloadLink click                       request send            return request    xhrButtonSuccess addEventListener  click        gt        runXHR  https   abbbbbc com download zip         xhrButtonError addEventListener  click        gt        runXHR  http   i-dont-exist         xhrButtonAbort addEventListener  click        gt        runXHR  https   raw githubusercontent com mdn content main files en-us  wikihistory json   abort                     lt  script gt                lt  body gt   lt  html gt  Return to post x000D   x000D   x000D   Reference https   developer mozilla org en-US docs Web API XMLHttpRequest progress event live example

User · Answer

A very simple  and lame  one line solution is to use the window onblur   event to close the loading dialog  Of course  if it takes too long and the user decides to do something else  like reading emails  the loading dialog will close

User · Answer

Greetings  I know that the topic is old but I leave a solution that I saw elsewhere and it worked          download file  show modal        param uri link     param name file name     function downloadURI uri  name        lt ------------------------------------------       Do someting  show loading      fetch uri           then resp   gt  resp blob             then blob   gt                const url   window URL createObjectURL blob               const a   document createElement  a                a style display    none               a href   url                 the filename you want             a download   name              document body appendChild a               a click                window URL revokeObjectURL url                   lt ----------------------------------------  Detect here  hide loading              alert  File detected                         catch      gt  alert  An error sorry        You can use it  downloadURI  quot www linkToFile com quot    quot file name quot

User · Answer

The question is to have a    waiting    indicator while a file is generated and then return to normal once the file is downloading   The way I like todo this is using a hidden iFrame and hook the frame   s onload event to let my page know when download starts  BUT onload does not fire in IE for file downloads  like with the attachment header token   Polling the server works  but I dislike the extra complexity  So here is what I do    Target the hidden iFrame as usual  Generate the content  Cache it with an absolute timeout in 2 minutes  Send a javascript redirect back to the calling client  essentially calling the generator page a second time  NOTE  this will cause the onload event to fire in IE because it s acting like a regular page  Remove the content from the cache and send it to the client    Disclaimer  don   t do this on a busy site  because of the caching could add up  But really  if your sites that busy the long running process will starve you of threads anyways   Here is what the codebehind looks like  which is all you really need   public partial class Download   System Web UI Page       protected System Web UI HtmlControls HtmlControl Body       protected void Page Load  object sender  EventArgs e                 byte    data          string reportKey   Session SessionID     Report               Check is this page request to generate the content               or return the content  data query string defined          if   Request QueryString   data       null                            Get the data and remove the cache             data   Cache  reportKey   as byte                 Cache Remove  reportKey                 if   data    null                                          send the user some information                 Response Write   Javascript to tell user there was a problem                                      else                               Response CacheControl    no-cache                   Response AppendHeader   Pragma    no-cache                     Response Buffer   true                   Response AppendHeader   content-disposition    attachment  filename Report pdf                     Response AppendHeader   content-size   data Length ToString                       Response BinaryWrite  data                              Response End                                      else                          Generate the data here  I am loading a file just for an example             using   System IO FileStream stream   new System IO FileStream    C  1 pdf   System IO FileMode Open                     using   System IO BinaryReader reader   new System IO BinaryReader  stream                                           data   new byte  reader BaseStream Length                        reader Read  data  0  data Length                                      Store the content for retrieval                           Cache Insert  reportKey  data  null  DateTime Now AddMinutes  5    TimeSpan Zero                    This is the key bit that tells the frame to reload this page                   and start downloading the content  NOTE  Url has a query string                   value  so that the content isn t generated again              Body Attributes Add  onload    window location    binary aspx data t

User · Answer

If you don t want to generate and store the file on the server  are you willing to store the status  e g  file-in-progress  file-complete   Your  waiting  page could poll the server to know when the file generation is complete  You wouldn t know for sure that the browser started the download but you d have some confidence

User · Answer

This Java Spring example detects the end of a Download  at which point it hides the  Loading     indicator   Approach  On the JS side  set a Cookie with a Max Expiration Age of 2 min  and poll every second for cookie expiration  Then the server-side overrides this cookie with an earlier expiration age -- the completion of the server process  As soon as the cookie expiration is detected in the JS polling   Loading     is hidden   JS Side  function buttonClick        Suppose this is the handler for the button that starts         loadingProgressOverlay   show        show loading animation     startDownloadChecker  loadingProgressOverlay   120          Here you launch the download URL        window location href    myapp com myapp download         This JS function detects the end of a download     It does timed polling for a non-expired Cookie  initially set on the     client-side with a default max age of 2 min       but then overridden on the server-side with an  earlier  expiration age      the completion of the server operation  and sent in the response      Either the JS timer detects the expired cookie earlier than 2 min       coming from the server   or the initial JS-created cookie expires after 2 min   function startDownloadChecker imageId  timeout         var cookieName    ServerProcessCompleteChecker       Name of the cookie which is set and later overridden on the server     var downloadTimer   0      reference to timer object             The cookie is initially set on the client-side with a specified default timeout age  2 min  in our application         It will be overridden on the server side with a new  earlier  expiration age  the completion of the server operation           or auto-expire after 2 min      setCookie cookieName  0  timeout           set timer to check for cookie every second     downloadTimer   window setInterval function               var cookie   getCookie cookieName               If cookie expired  NOTE  this is equivalent to cookie  doesn t exist    then clear  Loading     and stop polling         if   typeof cookie      undefined                          imageId  hide                window clearInterval downloadTimer                     1000      Every second       These are helper JS functions for setting and retrieving a Cookie function setCookie name  value  expiresInSeconds        var exdate   new Date        exdate setTime exdate getTime     expiresInSeconds   1000       var c value   escape value      expiresInSeconds    null            expires     exdate toUTCString         document cookie   name         c value      path        function getCookie name        var parts   document cookie split name             if  parts length    2             return parts pop   split      shift              Java Spring Server Side       RequestMapping   download       public String download HttpServletRequest request  HttpServletResponse response  throws Exception                 Some logic for downloading  returning a result                 Create a Cookie that will override the JS-created Max-Age-2min Cookie             with an earlier expiration  same name          Cookie myCookie   new Cookie  ServerProcessCompleteChecker    -1            myCookie setMaxAge 0      this is immediate expiration                                     but can also add  3 sec  for any flushing concerns         myCookie setPath               response addCookie myCookie                 -- presumably the download is writing to the Output Stream            return null

User · Answer

In my experience  there are two ways to handle this    Set a short-lived cookie on the download  and have JavaScript continually check for its existence  Only real issue is getting the cookie lifetime right - too short and the JS can miss it  too long and it might cancel the download screens for other downloads  Using JS to remove the cookie upon discovery usually fixes this  Download the file using fetch XHR  Not only do you know exactly when the file download finishes  if you use XHR you can use progress events to show a progress bar  Save the resulting blob with msSaveBlob in IE Edge and a download link  like this one  in Firefox Chrome  The problem with this method is that iOS Safari doesn t seem to handle downloading blobs right - you can convert the blob into a data URL with a FileReader and open that in a new window  but that s opening the file  not saving it

User · Answer

If you have download a file  which is saved  as opposed to being in the document  there s no way to determine when the download is complete  since it is not in the scope of the current document  but a separate process in the browser

User · Answer

i use the following to download blobs and revoke the object-url after the download  it works in chrome and firefox   function download blob       var url   URL createObjectURL blob       console log  create     url        window addEventListener  focus   window focus  false       function window focus            window removeEventListener  focus   window focus  false                              URL revokeObjectURL url           console log  revoke     url             location href   url      after the file download dialog is closed  the window gets her focus back so the focus event is triggered

User · Answer

I just had this exact same problem  My solution was to use temporary files since I was generating a bunch of temporary files already  The form is submitted with   var microBox         show   function content              document body  append   lt div id  microBox overlay  gt  lt  div gt  lt div id  microBox window  gt  lt div id  microBox frame  gt  lt div id  microBox  gt             content     lt  div gt  lt  div gt  lt  div gt             return     microBox overlay                close   function                 microBox overlay   remove                microBox window   remove                fn bgForm   function content  callback           Create an iframe as target of form submit     var id    bgForm     new Date   getTime         var  iframe       lt iframe id      id      name      id      style  display  none   src  about blank  gt  lt  iframe gt             appendTo document body       var  form   this         Submittal to an iframe target prevents page refresh      form attr  target   id          The first load event is called when about blank is loaded      iframe one  load   function                Attach listener to load events that occur after successful form submittal          iframe load function                 microBox close                if  typeof callback      function                     var iframe    iframe 0                   var doc   iframe contentWindow document                  var data   doc body innerHTML                  callback data                                          this submit function             microBox show content                return this          myForm   bgForm  Please wait         At the end of the script that generates the file I have   header  Refresh  0 url fetch php token      token   echo   lt html gt  lt  html gt      This will cause the load event on the iframe to be fired  Then the wait message is closed and the file download will then start  Tested on IE7 and Firefox

User · Answer

How to detect when browser receives file download   I faced the same problem with that config   struts 1 2 9 jquery-1 3 2  jquery-ui-1 7 1 custom IE 11 java 5  My solution with a cookie  - Client side  When submitting your form  call your javascript function to hide your page and load your waiting spinner  function loadWaitingSpinner        hide your page and show your spinner         Then  call a function that will check every 500ms whether a cookie is coming from server   function checkCookie        var verif   setInterval isWaitingCookie 500 verif       If the cookie is found  stop checking every 500ms  expire the cookie and call your function to come back to your page and remove the waiting spinner  removeWaitingSpinner     It is important to expire the cookie if you want to be able to download another file again   function isWaitingCookie verif       var loadState   getCookie  waitingCookie        if  loadState     done            clearInterval verif           document cookie    attenteCookie done  expires Tue  31 Dec 1985 21 00 00 UTC            removeWaitingSpinner                function getCookie cookieName           var name   cookieName                var cookies   document cookie         var cs   cookies split               for  var i   0  i  lt  cs length  i                 var c   cs i               while c charAt 0                            c   c substring 1                             if  c indexOf name     0                   return c substring name length  c length                                   return           function removeWaitingSpinner        come back to your page and remove your spinner         - Server side  At the end of your server process  add a cookie to the response  That cookie will be sent to the client when your file will be ready for download    Cookie waitCookie   new Cookie  waitingCookie    done    response addCookie waitCookie     I hope to help someone

User · Answer

I wrote a simple JavaScript class that implements a technique similar to the one described in bulltorious answer  I hope it can be useful to someone here  The GitHub project is called response-monitor js  By default it uses spin js as the waiting indicator but it also provides a set of callbacks for implementation of a custom indicator   JQuery is supported but not required   Notable features   Simple integration No dependencies JQuery plug-in  optional  Spin js Integration  optional  Configurable callbacks for monitoring events Handles multiple simultaneous requests Server-side error detection Timeout detection Cross browser   Example usage  HTML   lt  -- the response monitor implementation -- gt   lt script src  response-monitor js  gt  lt  script gt    lt  -- optional JQuery plug-in -- gt   lt script src  response-monitor jquery js  gt  lt  script gt     lt a class  my anchors  href   report criteria1 a amp criteria2 b 30  gt Link 1  Timeout  30s  lt  a gt   lt a class  my anchors  href   report criteria1 b amp criteria2 d 10  gt Link 2  Timeout  10s  lt  a gt    lt form id  my form  method  POST  gt       lt input type  text  name  criteria1  gt       lt input type  text  name  criteria2  gt       lt input type  submit  value  Download Report  gt   lt  form gt    Client  plain JavaScript     registering multiple anchors at once var my anchors   document getElementsByClassName  my anchors    ResponseMonitor register my anchors     clicking on the links initiates monitoring    registering a single form var my form   document getElementById  my form    ResponseMonitor register my form     the submit event will be intercepted and monitored   Client  JQuery       my anchors   ResponseMonitor        my form   ResponseMonitor  timeout  20      Client with callbacks  JQuery     when options are defined  the default spin js integration is bypassed var options         onRequest  function token               cookie   html token               outcome   html                  duration   html                  onMonitor  function countdown               duration   html countdown               onResponse  function status               outcome   html status  1  success   failure               onTimeout  function                outcome   html  timeout                monitor all anchors in the document    a   ResponseMonitor options     Server  PHP    cookiePrefix    response-monitor     must match the one set on the client options  tokenValue     GET  cookiePrefix    cookieName    cookiePrefix      tokenValue    ex  response-monitor 1419642741528    this value is passed to the client through the ResponseMonitor onResponse callback  cookieValue   1    for ex   1  can interpret as success and  0  as failure  setcookie       cookieName       cookieValue      time   300                expire in 5 minutes                SERVER  HTTP HOST        true      false     header  Content-Type  text plain    header  Content-Disposition  attachment  filename   Response txt       sleep 5     simulate whatever delays the response print r   REQUEST     dump the request in the text file   For more examples check the examples folder on the repository

[javascript] Detect when browser receives file download

Examples related to javascript

Examples related to http

Examples related to mime