Cómo cargar datos binarios con WinJS.xhr (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Puedes cargar y descargar datos binarios cuando usas WinJS.xhr (que encapsula XMLHttpRequest). En este ejemplo se muestra cómo cargar un mapa de bits desde tus Imágenes. El método de Windows en tiempo de ejecución que se usa para abrir el archivo de mapa de bits devuelve una IRandomAccessStream, por lo que debes usar MSApp.createBlobFromRandomAccessStream para convertirlo en un Blob.

Advertencia Ahora puedes usar XMLHttpRequest para cargar o descargar objetos que son más grandes que unos pocos MB, como objetos Blob y FormData, que podrían tardar mucho tiempo en completarse. Como las aplicaciones se pueden cerrar en cualquier momento, debes considerar la posibilidad de usar API de transferencia en segundo plano de Windows en tiempo de ejecución para estas operaciones. Para más información sobre la carga y descarga de contenido, consulta Cómo cargar un archivo y Cómo descargar un archivo. Para ver una explicación general de la transferencia en segundo plano, consulta Transferring data in the background.

Requisitos previos

Damos por hecho que sabes crear una aplicación básica que usa la biblioteca de Windows para JavaScript. Si necesitas ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de Windows en tiempo de ejecución con JavaScript.

Instrucciones

Paso 1: Configurar tu aplicación para acceder a Imágenes y a Internet

Las aplicaciones deben aportar ciertas funcionalidades de forma explícita, como el acceso a una biblioteca determinada de tu disco duro o a la red. Para más información sobre las funcionalidades, consulta Declaraciones de funcionalidades de aplicaciones y Cómo configurar funcionalidades de red.

En Visual Studio, crea una aplicación JavaScript en blanco.
Abre el archivo package.appxmanifest y ve a la pestaña Funcionalidades.
En la versión de Windows del ejemplo, la función Internet (cliente) ya debe estar seleccionada, pero si no lo está, selecciónala ahora. Si la aplicación necesita poder conectarse como cliente a servicios web en una red doméstica o de trabajo, se necesita la función Redes privadas (cliente y servidor).

En la versión de Windows Phone del ejemplo, selecciona la funcionalidad Internet (cliente y servidor).

Nota En Windows Phone solo existe una funcionalidad de red, Internet (cliente y servidor), que permite todo el acceso a la red para la aplicación.
Selecciona la funcionalidad Biblioteca de imágenes.

Paso 2: Carga el mapa de bits

Existen diversos métodos asincrónicos que controlan el acceso a archivos. Estos métodos asincrónicos se tratan como cualquier otra promesa en JavaScript.

Nota Para obtener más información, consulta Programación asincrónica en JavaScript.

En la sección BODY del archivo default.html, agrega un elemento DIV que notifica si la carga fue correcta o errónea, y asígnale el identificador "picDiv":
```
<div id="picDiv"></div>
```

En el código, configura las referencias a DIV y a Imágenes:

var picDiv = document.getElementById("picDiv");
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;

Busca el archivo que deseas en Imágenes. Podrías simplemente cargar este archivo mediante WinJS.xhr, pero digamos que deseas volver a codificar el archivo o procesarlo de alguna otra manera. En la función completeFile, en la cláusula getFileAsync del método then, abre el archivo mediante openAsync. Luego, en la función completeStream, en la cláusula openAsync del método then, realiza el procesamiento que desees en la secuencia del archivo abierto, que es de tipo IRandomAccessStream.
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

Pasemos a la carga. WinJS.xhr (así como XMLHttpRequest) no acepta cargas de tipo IRandomAccessStream, por lo que necesitas convertir la secuencia en un Blob. La función auxiliar MSApp.createBlobFromRandomAccessStream realiza exactamente esta tarea. Puedes agregar el Blob resultante a la opción data de WinJS.xhr. Puedes controlar que la carga sea correcta o errónea en la cláusula then de WinJS.xhr.

picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
    }).then(
        function completeStream(stream) {
            // Do processing. 
            var blob = MSApp.createBlobFromRandomAccessStream("image/bmp", stream);
            return WinJS.xhr({ type: "POST", url: <URI of the website>, data: blob });
        }).then(
            function (request) {
                picDiv.textContent = "uploaded file";
            }, 
            function (error) {
                picDiv.textContent = "error uploading file";
    });