downloading images and displaying progress RRS feed

  • Question

  • Hi

    Don't know if I am doing this the correct way or not, but I am creating an offline mode for some images, so based on a query i get the results of what images they want from the database using ajax, on success of that in ajax i download the images, which works great, but now i need to display a progress bar, so that the users know that that query is downloading the images, i can insert the html 5 progress bar no problem, i just don't know where to "hide" it, since the ajax call is in another file, so i cannot call the element directly.

    Any ideas how i can implement a progress bar once a download is complete?


    Thursday, October 31, 2013 1:34 PM

All replies

  • First, make an HTTP request for the image through either WinJS.xhr or, in Windows 8.1, the Windows.Web.HttpClient API (specifically HttpClient.getAsync). If the transfer might take a bit longer, consider using the BackgroundTransfer API instead, which also supports progress, and is good if you want to save the file directly into a StorageFile that you manage (in the other two cases you'll need to write the response data to a file yourself).

    All the APIs return a promise that supports a progress handler, which will receive an eventArgs object that contains the bytes received (the exact object varies with the API, of course). This allows you to build a progress bar for the transfer. Then, when the completed handler you give to the promise is called (or the error handler), you can remove the progress bar.

    HTTP requests made via WinJS.xhr and HttpClient.getAsync will also be stored in the WinINet cache, such that using img.src attributes with the same URI will draw from the cache.

    Anyway, I talk about all these APIs in Chapter 4 of my second preview ebook (free) and Appendix C. For WinJS.xhr, also see Quickstart: downloading a file; for HttpClient, start with Connecting to an HTTP server using Windows.Web.Http.


    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press (in second preview)

    Thursday, October 31, 2013 4:22 PM
  • Hi Kraig

    Thanks, I managed to get it to sort of work, I say "sort of" because, I am trying to figure out how to only remove the progress bar after a group of images are downloaded.

    I was thinking of creating an array with the complete file names, and then comparing them to the array or files that supposed to be downloaded, and once they are equal hide the progress bar.

    does that make sense?, or am i going about this the wrong way.


    Wednesday, November 6, 2013 6:52 AM
  • You'll have a promise for each individual request/transfer, and you're asking how to know when all of those (or some subset) have completed. You do this with WinJS.Promise.join, where you pass in an array of the promises you care about and get back a single promise that will be fulfilled when all the other promises are fulfilled. The result of this joined promise is then an array of the results of the individual promises. For your purposes, you'd simply attach a completed handler to the joined promise (with .done()), and in that handler remove your progress control.

    See the second preview of my book in Chapter 3 for more about WinJS.Promise.join.

    Wednesday, November 6, 2013 4:35 PM
  • Thanks Kraig

    I got it to work, sometimes, other times I end up getting an access is denied error.

    Still trying to figure out, what is it trying to access that it cant. (very frustrating)


    Wednesday, November 6, 2013 10:14 PM