Adobe

decor

Web Platform Team Blog

Making the web awesome

Displaying XHR Downloaded Images Using the File API

Last time, we proposed adding progress events on the image element to avoid the complexity of using XHR to monitor image download progress. In order to display the image in the XHR approach, we used base 64 encoding to convert the binary image data into a data URI. Then, we passed the data URI to the image element’s src attribute.

Another XHR-based approach uses the new File API to simplify displaying the image. It displays the image like this:

  1. Create an object URL for the binary image data (blob) from the XHR response.
  2. Set the src attribute of the image tag to the new object URL.
  3. Clean up the blob after the image loads it.

This approach looks like this:

 
imgElement.src = window.URL.createObjectURL(request.response);

For createObjectURL() to function, you also need to set the XHR’s responseType to “blob” before you send the request, which looks like:

 
request.responseType = "blob";

Once the image is done loading the blob from its object URL, we need to clean up the blob, which looks like:

 
imgElement.onload = function (e) { 
    window.URL.revokeObjectURL(imgElement.src);
};

You can view a full sample and its source here. The sample monitors an image’s download progress using XHR and displays the image using the File API approach. Note that this sample relies on the current drafts of the File API and XHR2 specs, and will not work in most current browsers because not all of their features that have been released yet. For Chrome/Safari/WebKit users, note that window.URL is currently window.webkitURL.

Although this approach is already much better than base 64 encoding, it still lacks the ease-of-use of the image progress events proposal that we discussed in the previous post. To recap, the proposal defines progress events such as onloadstart, progress, and onloadend directly on the image element. Its specific advantage over the XHR + File API approach is:

  • No need to create a blob and clean it up right after the image element loads it.

As before, the proposal’s advantages over any XHR approach like this one include:

  • No need to maintain multiple XHR objects for concurrent image downloads.
  • No need for a cross domain image server to provide special headers so the XHR can download the image file.

4 Comments

  1. March 17, 2012 at 2:36 am, sathyamoorthi said:

    please keep on posting new stuffs. thanks.

  2. March 31, 2012 at 9:16 am, deejbee said:

    I’m using createObjectURL to great effect but i need to remove the blob at some point afterwards.

    I’ve set the image like this:

    but just setting the src=”” has no effect. any ideas?

    • April 05, 2012 at 8:27 pm, Max Vujovic said:

      Hi deejbee,

      I think your question is missing the part after “I’ve set the image like this:”. What did you mean to write?

      Thanks,
      Max

      • April 24, 2012 at 9:32 pm, Moldován Eduárd said:

        Hey,

        I think deejbee meant that he needs to remove the blob, but setting the image’s src to empta, did not work.

        Cheers,
        edi