Comment charger des données binaires à l’aide de WinJS.xhr (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Vous pouvez charger et télécharger des données binaires en utilisant WinJS.xhr (qui inclut XMLHttpRequest). Cet exemple explique comment charger une image bitmap depuis vos images. La méthode Windows Runtime utilisée pour ouvrir le fichier d’image bitmap renvoie un IRandomAccessStream, vous devez donc utiliser un MSApp.createBlobFromRandomAccessStream pour le convertir en Blob.

Avertissement Vous pouvez désormais utiliser XMLHttpRequest pour charger ou télécharger des objets plus volumineux, comme les objets Blob et les objets FormData, dont le téléchargement peut prendre beaucoup de temps. Les applications pouvant être arrêtées à tout moment, il vaut mieux utiliser les API de transfert en arrière-plan de Windows Runtime pour ces opérations. Pour plus d’informations sur le chargement et le téléchargement de contenu, voir Comment charger un fichier et Comment télécharger un fichier. Pour obtenir une description générale du transfert en arrière-plan, voir Transferring data in the background.

Prérequis

Nous partons du principe que vous savez créer une application élémentaire qui utilise la Bibliothèque Windows pour JavaScript. Pour obtenir de l’aide sur la création de votre première application, voir Créer votre première application Windows Runtime en JavaScript.

Instructions

Étape 1: Configurer l’application pour accéder aux images et au Web

Vous devez ajouter certaines fonctionnalités de manière explicite, par exemple l’accès à une bibliothèque spécifique sur le disque dur ou l’accès au réseau. Pour plus d’informations sur ces fonctionnalités, voir Déclarations des fonctionnalités d’application et Comment configurer les fonctionnalités réseau.

Dans Visual Studio, créez une application JavaScript vide.
Ouvrez le fichier package.appxmanifest, puis accédez à l’onglet Capacités.
Pour la version Windows de cet exemple, si la fonctionnalité Internet (Client) n’a pas encore été sélectionnée, faites-le maintenant. Si l’application doit pouvoir se connecter en qualité de client à des services Web sur un réseau domestique privé ou un réseau professionnel, la fonctionnalité Réseaux privés (client et serveur) est également nécessaire.

Pour la version Windows Phone de cet exemple, sélectionnez la fonctionnalité Internet (client et serveur).

Remarque Sur Windows Phone, il existe une seule fonctionnalité réseau (Internet (client et serveur), qui active tout l’accès réseau pour l’application.
Sélectionnez la fonctionnalité Bibliothèque d’images.

Étape 2: Charger l’image bitmap

Il existe plusieurs méthodes asynchrones qui gèrent l’accès aux fichiers. Elles sont traitées comme n’importe quel autre résultat dans JavaScript.

Remarque Pour plus d’informations, voir Programmation asynchrone en JavaScript.

Dans la section BODY du fichier default.html, ajoutez un élément DIV avec l’ID « picDiv » signalant si le chargement a réussi ou échoué :
```
<div id="picDiv"></div>
```

Définissez dans le code les références à l’élément DIV et aux images :

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

Recherchez le fichier voulu dans Images. Vous pourriez simplement charger ce fichier à l’aide de WinJS.xhr, mais admettons que vous souhaitiez réencoder le fichier ou procéder à un autre traitement dessus. Dans la fonction completeFile de la clause then de la méthode getFileAsync, ouvrez le fichier à l’aide de openAsync. Ensuite, dans la fonction completeStream de la clause then de la méthode openAsync, procédez au traitement souhaité sur le flux de fichiers ouvert de type IRandomAccessStream.
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

Passons maintenant au chargement. WinJS.xhr (et XMLHttpRequest) refusent les chargements de type IRandomAccessStream, vous devez donc convertir le flux en objet Blob. La fonction d’aide MSApp.createBlobFromRandomAccessStream sert justement à ça. Vous pouvez ajouter l’objet Blob résultant à l’option data de WinJS.xhr. Vous pouvez gérer la réussite ou l’échec du chargement dans la clause 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";
    });