Como carregar dados binários com WinJS.xhr (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Você pode carregar e baixar dados binários ao usar WinJS.xhr (que encapsula XMLHttpRequest). Este exemplo mostra como carregar um bitmap de Imagens. O método do Tempo de Execução do Windows usado para abrir o arquivo de bitmap retorna IRandomAccessStream e, portanto, você deve usar MSApp.createBlobFromRandomAccessStream para convertê-lo em Blob.

Aviso Agora você pode usar a XMLHttpRequest para carregar ou baixar objetos com alguns MB, como objetos Blob e FormData, o que pode levar muito tempo para concluir. Como os aplicativos podem ser encerrados a qualquer momento, considere a possibilidade de usar as APIs de transferência em segundo plano do Tempo de Execução do Windows para essas operações. Para obter mais informações sobre como carregar e baixar conteúdo, veja Como carregar um arquivo e Como baixar um arquivo. Para ver uma discussão geral sobre transferência em segundo plano, veja Transferring data in the background.

Pré-requisitos

Presumimos que você possa criar um aplicativo básico que utiliza a Biblioteca do Windows para JavaScript. Para obter ajuda na criação do seu primeiro aplicativo, veja Criar seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.

Instruções

Etapa 1: Configurar seu aplicativo para acessar Imagens e a Web

Os aplicativos precisam adicionar determinadas funcionalidades explicitamente, como acessar uma determinada biblioteca no seu disco rígido ou acessar a rede. Para obter mais informações sobre funcionalidades, veja Declarações de funcionalidade do aplicativo e Como configurar funcionalidades da rede.

No Visual Studio, crie um aplicativo em JavaScript em branco.
Abra o arquivo package.appxmanifest e vá para a guia Recursos.
Para a versão do Windows da amostra, a funcionalidade Internet (Cliente) já deverá estar selecionada, mas caso não esteja, selecione-a agora. O aplicativo talvez precise se conectar como um cliente a serviços Web em uma rede doméstica ou corporativa, então, a funcionalidade Redes Privadas (Cliente e Servidor) também é necessária.

Para a versão do Windows Phone da amostra, selecione a funcionalidade Internet (Cliente e Servidor).

Observação No Windows Phone, há somente uma funcionalidade de rede (Internet (Cliente e Servidor) que habilita todo o acesso de rede para o aplicativo.
Selecione o recurso Biblioteca de Imagens.

Etapa 2: Carregue o bitmap.

Há diversos métodos assíncronos que lidam com o acesso a arquivos. Esses métodos são tratados como qualquer outra promessa no JavaScript.

Observação Para obter mais informações, consulte Programação assíncrona em JavaScript.

Na seção BODY do arquivo default.html, adicione um elemento DIV que informa sobre o êxito ou falha do carregamento e dê a ele a ID "picDiv":
```
<div id="picDiv"></div>
```

No código, configure referências ao DIV e a Imagens:

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

Localize o arquivo desejado em Imagens. Você poderia simplesmente carregar esse arquivo usando WinJS.xhr, mas digamos que você queira recodificar o arquivo ou fazer algum outro processamento nele. Na função completeFile da cláusula getFileAsync do método then, abra o arquivo usando openAsync. Em seguida, na função completeStream da cláusula openAsync do método then, faça o processamento que for necessário no fluxo do arquivo aberto, que é do tipo IRandomAccessStream.
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

Agora para o carregamento. O WinJS.xhr e a XMLHttpRequest não aceitam carregamentos do tipo IRandomAccessStream, portanto, é necessário converter o fluxo em um Blob. Existe uma função auxiliar MSApp.createBlobFromRandomAccessStream que faz exatamente isso. Você pode adicionar o Blob resultante à opção data do WinJS.xhr. O êxito ou falha do carregamento podem ser tratados na cláusula then do 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";
    });