Windows 8 Apps: Downloading Image from the Server Using WinJS.xhr

As we all know the WinJS library helps us build Windows 8 Store Apps in HTML5 and JavaScript. The WinJS.xhr is an important module in WinJS wherein it helps wrap cross-domain calls and provides an easy mechanism to work with external web contents using HTTP operations like GET/POST etc.

In this sample today, we will see how to make use of WinJS.xhr for downloading image file from a remote URL. The WinJS.xhr wraps call to XMLHttpResponse in a promise. The promise is the abstraction provided over the available asynchronous operations. The call made using WinJS.xhr takes several parameters as below:
  • type: represent HTTP method e.g. GET,POST etc.
  • url: This is the mandatory parameter which represents the URL resource.
  • user: User for authentication.
  • Password: The Password.
  • responseType: The expected response of the call made.
You can get the more information about WinJS.xhr from here.

Note: We will use the following file to test the download. It is an image on a shared public DropBox folder (Image is CC licensed).

http://db.tt/P7QOZkDh

Step 1: Open VS 2012 and create a new Windows Store Apps, using JavaScript. Name it as ‘Store_JS_Download_Image_Xhr’.

Step 2: Add the following HTML in the default.html, add the below code:

<table style="width: 100%;border:double">
<tr>
  <td>   Enter Url Here  <td>
</tr>
<tr>
  <td>   <input id="txturl" type="text"  style="width:800px"/>   </td>
  <td>   <input id="btngetfile" type="button" value="Download" />  </td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>   <div id="dvcontainer">   </div>  </td>
</tr>
</table>

The ‘dvcontainer’ will be act as a container for the image element which will be added dynamically after the download is complete.

Step 3: Add the following JavaScript in default.html:

<script type="text/javascript">
WinJS.UI.processAll().then(function () {
  document.getElementById('btngetfile').addEventListener('click',
  downloadFile, false);
});
 
function downloadFile()
{
  var url= document.getElementById('txturl').value;
   WinJS.xhr({ url: url, responseType: "blob" })
   .done(function (r) {
   // Create a URL for the specified object received from the request.
   // Here it is 'blob'
   var fileURL = URL.createObjectURL(r.response);
   //Create an Image Tag <img> under the Div tag
   var image = dvcontainer.appendChild(document.createElement("img"));
   //Set the 'src' property of the Image along with height and width
   image.src = fileURL;
   image.height = 100%;
   image.width = 100%;
  });
}
</script>

The above code calls the URL entered into the textbox of name ‘txturl’. This is passed to the ‘url’ property of the xhr method. The ‘responseType’ property defines that the response from the web resource is ‘BLOB’ (a binary content). Once the call is complete, the URL.createObjectURL method will create URL for the specified object based upon the return type. This URL will be passed to the dynamically created image tag under the div of name ‘dvcontainer’.

Step 4: Run the application and enter URL in the TextBox and click on the ‘Download’ button, the result will be as below:

winjsxhr-download-winrt

Conclusion

The JsXhr module in WinJS helps wrap external/cross-domain calls and provides an easy way to utilize HTTP based services. One caveat is that when downloading large files or BLOBs, if user goes away from the application, the Store App is likely to go to sleep resulting in termination of the download. So in such cases, it’s advised that the Background Transfer APIs be used.

The entire source code of this article can be downloaded at https://github.com/devcurry/WinRT-DownloadFile

1 comment: