Comment charger un fichier (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 ]

Cette rubrique vous explique comment charger sur Internet des données ou un fichier provenant d’un périphérique.

Les applications peuvent faire appel aux API abordées dans cette rubrique pour permettre à leur application d’interagir avec les services Web dans le but d’exploiter ou de partager des formats multimédias courants, tels que des photos, de la musique et des vidéos.

Pour des transferts volumineux, à partir de flux ou à parties multiples (vidéo, musique et images volumineuses) avec une durée de vie opérationnelle pouvant aller au-delà de plusieurs applications suspendues et/ou de changements de disponibilité du réseau, votre application peut utiliser la fonction Background Transfer.

Pour avoir une idée globale de ce qu’est le transfert en arrière-plan, voir Transfert de données en arrière-plan.

Prérequis

Pour obtenir une aide générale sur la création d’une application du Windows Store en JavaScript, voir Créer votre première application Windows Runtime en JavaScript. De plus, les promesses JavaScript sont utilisées dans cette rubrique pour mener des opérations asynchrones. Pour plus d’informations sur ce modèle de programmation, voir Programmation asynchrone en JavaScript à l’aide de promesses.

Pour préparer votre application à une mise en réseau, vous devez définir cette fonctionnalité dans le fichier Package.appxmanifest du projet. Pour obtenir une définition de chaque fonctionnalité réseau, voir Comment configurer les fonctionnalités d’isolement réseau.

Les exemples de transfert en arrière-plan suivants utilisent JavaScript et reposent sur l’exemple de transfert en arrière-plan.

Opérations de chargement à l’aide de la fonctionnalité de transfert en arrière-plan

Lorsque vous faites appel à la fonctionnalité de transfert en arrière-plan, le chargement qui en résulte existe sous la forme d’une opération UploadOperation qui expose de nombreuses méthodes de contrôle servant à redémarrer ou à annuler l’opération. Les événements d’application (par exemple, une suspension ou un arrêt) et les changements de connectivité sont gérés automatiquement par le système pour chaque opération UploadOperation. Les chargements se poursuivent lors des périodes de suspension des applications et perdurent après l’arrêt des applications. De plus, la propriété CostPolicy peut être définie pour indiquer si oui ou non votre application entamera des chargements tandis qu’une connexion réseau limitée est utilisée pour la connectivité Internet.

Les exemples qui suivent vous guident tout au long du processus de création et d’initialisation d’un chargement de base et décrivent comment énumérer des opérations de chargement issues d’une session d’application précédente.

Charger un fichier

La création d’un téléchargement commence avec BackgroundUploader. Cette classe sert à fournir les méthodes qui permettent à votre application de configurer le chargement avant de créer l’objet UploadOperation qui en résulte. L’exemple qui suit montre comment y parvenir avec les objets Uri et StorageFile requis.

Identifier le fichier et la destination du chargement

Avant de commencer avec la création d’un objet UploadOperation, nous devons avant tout identifier l’URI du lieu de chargement, ainsi que le fichier qui sera chargé. Dans l’exemple qui suit, la valeur uriString est remplie au moyen d’une chaîne issue d’entrées de l’interface utilisateur et la valeur file est remplie à l’aide de l’objet StorageFile renvoyé par une opération PickSingleFileAsync.

function uploadFile() {
    var filePicker = new Windows.Storage.Pickers.FileOpenPicker();
    filePicker.fileTypeFilter.replaceAll(["*"]);

    filePicker.pickSingleFileAsync().then(function (file) {
        if (!file) {
            printLog("No file selected");
            return;
        }

        var upload = new UploadOp();
        var uriString = document.getElementById("serverAddressField").value;
        upload.start(uriString, file);

        // Store the upload operation in the uploadOps array.
        uploadOperations.push(upload);
    });
}

Créer et initialiser l’opération de chargement

Dans l’étape qui précède, les valeurs uriString et file sont transmises à une instance de notre exemple suivant, UploadOp, où elles sont utilisées pour configurer et lancer la nouvelle opération de chargement. Pour commencer, la valeur uriString est analysée afin de créer l’objet Uri requis.

Ensuite, les propriétés de l’objet StorageFile fourni (file) sont utilisées par la classe BackgroundUploader pour remplir l’en-tête de la demande et définir la propriété SourceFile à l’aide de l’objet StorageFile. La méthode SetRequestHeader est ensuite appelée pour insérer le nom de fichier, fourni comme chaîne, et la propriété StorageFile.Name.

Pour finir, BackgroundUploader crée l’objet UploadOperation (upload).
```
function UploadOp() {
    var upload = null;
    var promise = null;

    this.start = function (uriString, file) {
        try {

            var uri = new Windows.Foundation.Uri(uriString);
            var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader();

            // Set a header, so the server can save the file (this is specific to the sample server).
            uploader.setRequestHeader("Filename", file.name);

            // Create a new upload operation.
            upload = uploader.createUpload(uri, file);

            // Start the upload and persist the promise to be able to cancel the upload.
            promise = upload.startAsync().then(complete, error, progress);
        } catch (err) {
            displayError(err);
        }
    };
    // On application activation, reassign callbacks for a upload
    // operation persisted from previous application state.
    this.load = function (loadedUpload) {
        try {
            upload = loadedUpload;
            promise = upload.attachAsync().then(complete, error, progress);
        } catch (err) {
            displayError(err);
        }
    };
}
```
Notez les appels de méthode asynchrone définis à l’aide de promesses JavaScript. Examinons une ligne du dernier exemple :
```
promise = upload.startAsync().then(complete, error, progress);
```
L’appel de méthode asynchrone est suivi d’une instruction then indiquant les méthodes, définies par l’application, qui sont appelées lorsqu’un résultat de l’appel de méthode asynchrone est retourné. Pour plus d’informations sur ce modèle de programmation, voir Programmation asynchrone en JavaScript à l’aide de promesses.

Charger plusieurs fichiers

Identifier les fichiers et la destination du téléchargement

Dans un scénario impliquant plusieurs fichiers transférés avec une seule opération UploadOperation, le processus commence comme habituellement en fournissant tout d’abord l’URI de destination et les informations de fichier local requis. Comme dans l’exemple de la section précédente, l’URI est fourni sous la forme d’une chaîne par l’utilisateur final et FileOpenPicker peut être utilisé pour offrir la possibilité d’indiquer les fichiers par le biais de l’interface utilisateur également. Toutefois, dans ce scénario, l’application doit plutôt appeler la méthode PickMultipleFilesAsync pour permettre la sélection de plusieurs fichiers par le biais de l’interface utilisateur.
```
function uploadFiles() {
   var filePicker = new Windows.Storage.Pickers.FileOpenPicker();
   filePicker.fileTypeFilter.replaceAll(["*"]);

   filePicker.pickMultipleFilesAsync().then(function (files) {
      if (files === 0) {
         printLog("No file selected");
            return;
      }

      var upload = new UploadOperation();
      var uriString = document.getElementById("serverAddressField").value;
      upload.startMultipart(uriString, files);

      // Persist the upload operation in the global array.
      uploadOperations.push(upload);
   });
}
```
Créer des objets pour les paramètres fournis

Les deux prochains exemples utilisent du code contenu dans un exemple de méthode unique, startMultipart, qui a été appelée à la fin de la dernière étape. Pour les besoins de l’instruction, le code présent dans la méthode qui crée un tableau d’objets BackgroundTransferContentPart a été séparé du code qui crée l’opération UploadOperation résultante.

D’abord, la chaîne d’URI fournie par l’utilisateur est initialisée en tant qu’Uri. Ensuite, une itération est effectuée sur le tableau d’objets IStorageFile (files) passés à cette méthode. Chaque objet est utilisé pour créer un nouvel objet BackgroundTransferContentPart qui est ensuite placé dans le tableau de contentParts.
```
upload.startMultipart = function (uriString, files) {
    try {
        var uri = new Windows.Foundation.Uri(uriString);
        var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader();

        var contentParts = [];
        files.forEach(function (file, index) {
            var part = new Windows.Networking.BackgroundTransfer.BackgroundTransferContentPart("File" + index, file.name);
            part.setFile(file);
            contentParts.push(part);
        });
```

Créer et initialiser l’opération de chargement multipartie

Avec notre tableau de contentParts rempli avec tous les objets BackgroundTransferContentPart représentant chaque IStorageFile pour le chargement, nous sommes prêts à appeler CreateUploadAsync à l’aide de l’Uri pour indiquer où la demande sera envoyée.

        // Create a new upload operation.
        uploader.createUploadAsync(uri, contentParts).then(function (uploadOperation) {

           // Start the upload and persist the promise to be able to cancel the upload.
           upload = uploadOperation;
           promise = uploadOperation.startAsync().then(complete, error, progress);
        });

     } catch (err) {
         displayError(err);
     }
 };

Énumérer des opérations persistantes au démarrage

Lors de l’achèvement ou de l’annulation d’une opération UploadOperation, toutes les ressources système associées sont libérées. Toutefois, si votre application est arrêtée avant que l’une de ces situations puisse se produire, toutes les opérations en cours sont suspendues et les ressources associées à chacune d’entre elles persistent. Si ces opérations ne sont pas énumérées et réintroduites dans la session d’application suivante, elles s’arrêteront et resteront présentes dans les ressources d’appareil.

Avant de définir la fonction chargée d’énumérer les opérations persistantes, nous devons créer un tableau pour y stocker les objets UploadOperation que cette fonction renverra :
```
var uploadOperations = [];
```
Il nous faut ensuite définir la fonction qui énumère les opérations persistantes et les stocke dans notre tableau. Notez que la méthode load appelée pour réaffecter les rappels vers UploadOperation, si elle persiste après l’arrêt de l’application, se trouve dans la classe UploadOp définie plus loin dans cette section.
```
function Windows.Networking.BackgroundTransfer.BackgroundUploader.getCurrentUploadsAsync() {
    .then(function (uploads) {
        for (var i = 0; i < uploads.size; i++) {
            var upload = new UploadOp();
            upload.load(uploads[i]);
            uploadOperations.push(upload);
        }
    }
};
```
Remarque

Dans les applications du Windows Phone Store, les transferts en arrière-plan se poursuivent alors que votre application ne se trouve pas au premier plan. Comme votre application n’est pas en cours d’exécution dans ce scénario, elle ne recevra pas de notification une fois le transfert terminé. Lorsque votre application reprend, si vous vérifiez la progression d’un transfert terminé, l’état sera BackgroundTransferStatus.Running. Toutefois, lorsque vous effectuez un attachement au transfert, comme dans l’exemple de code ci-dessus, le gestionnaire d’achèvement de tâche se déclenche et l’état du transfert est mis à jour.

Délai d’expiration des demandes

Il existe deux scénarios majeurs de délai de connexion à prendre en considération.

Lorsque vous établissez une nouvelle connexion pour un transfert, la demande de connexion est annulée si la connexion n’est pas établie dans un délai de cinq minutes.
Une fois la connexion établie, un message de requête HTTP qui n’a reçu aucune réponse au bout de deux minutes est annulé.

Remarque Quel que soit le scénario, la fonctionnalité de transfert en arrière-plan part du principe qu’aucune connectivité Internet n’existe et tente jusqu’à trois fois de soumettre automatiquement une demande. Si aucune connectivité Internet n’est décelée, les demandes supplémentaires attendront jusqu’à ce qu’elle le soit.

Aide au débogage

L’arrêt d’une session de débogage dans Microsoft Visual Studio est comparable à la fermeture de votre application ; les téléchargements PUT sont mis en pause et les téléchargements POST sont arrêtés. Même pendant le débogage, votre application doit énumérer, puis redémarrer ou annuler les chargements persistants. Par exemple, votre application peut annuler l’énumération des opérations de chargement persistantes, au démarrage, si les opérations précédentes n’ont pas d’intérêt pour cette session de débogage.

Vous pouvez faire en sorte que votre application annule l’énumération des opérations de téléchargement/chargement au démarrage durant une session de débogage, si les opérations précédentes n’ont pas d’intérêt pour cette session de débogage. Notez que s’il existe des mises à jour du projet Visual Studio, par exemple des modifications du manifeste de l’application, et si l’application est désinstallée et redéployée, GetCurrentUploadsAsync ne peut pas énumérer les opérations créées à l’aide du déploiement d’application précédent.

Pour plus d’informations, voir Débogage et test des applications du Windows Store.

Quand vous utilisez le transfert en arrière-plan durant le développement, il arrive que les caches internes des opérations de transfert actives et terminées se désynchronisent. Cela peut entraîner l’incapacité à démarrer de nouvelles opérations de transfert ou à interagir avec les opérations et les objets BackgroundTransferGroup existants. Dans certains cas, toute tentative d’interaction avec des opérations existantes peut déclencher un blocage. Cela peut se produire si la propriété TransferBehavior a la valeur Parallel. Ce problème ne se produit que dans certains scénarios de développement et n’est pas applicable à l’utilisateur final de votre application.

Quatre scénarios d’utilisation de Visual Studio peuvent provoquer ce problème.

Vous créez un projet avec le même nom d’application qu’un projet existant, mais dans un autre langage (en passant du C++ au C#, par exemple).
Vous modifiez l’architecture cible (en passant de l’architecture x86 à x64, par exemple) dans un projet existant.
Vous modifiez la culture (en passant de la culture neutre à fr-FR, par exemple) dans un projet existant.
Vous ajoutez ou supprimez une fonctionnalité du manifeste du package (en ajoutant l’authentification en entreprise, par exemple) dans un projet existant.

La maintenance régulière de l’application, notamment les mises à jour du manifeste qui entraînent l’ajout ou la suppression de fonctionnalités, ne déclenche pas ce problème pour les déploiements de votre application destinés à l’utilisateur final.

Pour contourner ce problème, désinstallez complètement toutes les versions de l’application, puis redéployez-la en utilisant le nouveau langage, la nouvelle architecture, la nouvelle culture ou la nouvelle fonctionnalité. Vous pouvez l’effectuer via l’écran d’accueil ou à l’aide de PowerShell et de l’applet de commande Remove-AppxPackage.

Récapitulatif et étapes suivantes

Dans cette rubrique, nous avons étudié comment charger des fichiers à l’aide des API Background Transfer dans JavaScript.

Vous pouvez également télécharger des fichiers dans votre application du Windows Store. Pour obtenir une explication des principes clés, ainsi que des exemples, voir Comment télécharger un fichier.