Comment enregistrer des fichiers via les sélecteurs de fichiers (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 ]

Utilisez fileSavePicker pour permettre aux utilisateurs d’indiquer le nom et l’emplacement où ils souhaitent enregistrer le contenu de votre application.

Prérequis

Comprendre la programmation asynchrone pour les applications Windows Runtime en JavaScript

Pour apprendre à écrire des applications asynchrones, voir Démarrage rapide : utilisation de promesses (« promises ») dans JavaScript.

Instructions

Étape 1: Créer et personnaliser le sélecteur de fichiers pour afficher les emplacements où les utilisateurs peuvent enregistrer des fichiers

Utilisez fileSavePicker pour permettre à l’utilisateur de spécifier le nom, le type de fichier et l’emplacement d’un fichier à enregistrer. Vous pouvez personnaliser le sélecteur de fichiers en définissant des propriétés pour le fileSavePicker que vous créez.

L’exemple du sélecteur de fichiers montre comment créer et personnaliser un objet fileSavePicker.

// Create the picker object and set options
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
// Dropdown of file types the user can save the file as
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
// Default file name if the user does not type one in or select a file to replace
savePicker.suggestedFileName = "New Document";

Vous devez définir les propriétés fileSavePicker qui sont appropriées pour vos utilisateurs et votre application. Pour obtenir des directives susceptibles de vous aider à choisir comment personnaliser le sélecteur de fichiers, voir Recommandations et liste de vérification sur les sélecteurs de fichiers.

L’exemple de sélecteur de fichiers personnalise le sélecteur de fichiers en définissant trois propriétés fileSavePicker : suggestedStartLocation, fileTypeChoices et suggestedFileName.

Remarque Les objets fileSavePicker utilisent pickerViewMode.list pour afficher les données.

JJ150595.wedge(fr-fr,WIN.10).gif Personnalisation d’un fileSavePicker, en détail

Comme l’utilisateur enregistre un document ou un fichier texte, l’exemple définit savePicker.suggestedStartLocation sur le dossier local de l’application, via la propriété LocalFolder.
```
savePicker.suggestedStartLocation = Windows.Storage.ApplicationData.localFolder;
```
Vous devez définir suggestedStartLocation sur un emplacement du système de fichiers adapté au type de fichier sélectionné. Si l’utilisateur sélectionne de la musique, des images ou des vidéos, définissez respectivement l’emplacement de départ sur Musique, Images ou Vidéos. Pour tous les autres types de fichiers, définissez l’emplacement de départ sur le dossier local de l’application. Il s’agit juste d’un emplacement de départ. Les utilisateurs peuvent naviguer vers d’autres emplacements tant qu’ils utilisent le sélecteur de fichiers.
Pour que l’application puisse ouvrir le fichier une fois celui-ci enregistré, l’exemple utilise savePicker.fileTypeChoices.insert pour spécifier les types de fichiers pris en charge (documents Microsoft Word et fichiers texte).
```
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
```
Assurez-vous que tous les types de fichiers que vous spécifiez sont pris en charge par votre application.

L’utilisateur peut enregistrer son fichier dans n’importe quel type de fichiers spécifié dans cette liste. Il peut également changer de type de fichier en sélectionnant un autre type (que vous avez spécifié) dans le contrôle déroulant en bas à droite du sélecteur de fichiers. Le premier choix de type de fichier dans la liste représente le type de fichier sélectionné par défaut. Pour changer le type de fichier sélectionné par défaut, définissez la propriété savePicker.defaultFileExtension.

Remarque En outre, le sélecteur de fichiers utilise le type de fichier actuellement sélectionné pour filtrer les fichiers à afficher, afin que seuls les types de fichiers qui correspondent au type de fichier sélectionné soient présentés à l’utilisateur.
Pour faire gagner du temps à l’utilisateur, l’exemple définit un savePicker.suggestedFileName pour le fichier à enregistrer.
```
savePicker.suggestedFileName = "New Document";
```
Suggérez un nom de fichier aussi approprié que possible pour le fichier que l’utilisateur souhaite enregistrer. Par exemple, comme Word, vous pouvez suggérer le nom de fichier éventuellement existant ou la première ligne d’un document si l’utilisateur souhaite enregistrer un fichier qui ne possède pas encore de nom.

Étape 2: Afficher le FileSavePicker pour enregistrer un fichier

Une fois que vous avez créé et personnalisé le sélecteur de fichiers, offrez à l’utilisateur la possibilité d’enregistrer le fichier en appelant savePicker.pickSaveFileAsync.

Une fois que l’utilisateur a indiqué le nom, le type de fichier et l’emplacement, et qu’il a confirmé l’enregistrement des fichiers, pickSaveFileAsync retourne un objet storageFile qui représente le fichier enregistré. Vous pouvez capturer et traiter ce fichier via then ou done.

L’exemple de sélecteur de fichiers montre comment afficher le sélecteur de fichiers pour permettre à l’utilisateur d’enregistrer un fichier.

savePicker.pickSaveFileAsync().then(function (file) {
    if (file) {
        // Prevent updates to the remote version of the file until we finish making changes and call CompleteUpdatesAsync.
        Windows.Storage.CachedFileManager.deferUpdates(file);
        // write to file
        Windows.Storage.FileIO.writeTextAsync(file, file.name).done(function () {
            // Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
            // Completing updates may require Windows to ask for user input.
            Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
                if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
                    WinJS.log && WinJS.log("File " + file.name + " was saved.", "sample", "status");
                } else {
                    WinJS.log && WinJS.log("File " + file.name + " couldn't be saved.", "sample", "status");
                }
            });
        });
    } else {
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

Une fois le fichier enregistré, l’application y a accès en lecture/écriture. L’exemple capture le fichier enregistré dans le paramètre file et vérifie que le fichier est valide. Cependant, l’exemple ne va pas plus loin dans le traitement du fichier. Vous pouvez apprendre à écrire dans le fichier résultant et à lire ce dernier dans Démarrage rapide : lecture et écriture d’un fichier.

Astuce Vous devez toujours vérifier le fichier enregistré (file dans l’exemple) pour vous assurer qu’il est valide, avant de poursuivre son traitement. Ensuite, vous pouvez enregistrer du contenu dans le fichier selon le fonctionnement de votre application, et fournir le comportement approprié si le fichier sélectionné n’est pas valide.

Remarques

Si votre code ressemble à ce qui est montré ici, votre application doit afficher le sélecteur de fichiers pour permettre à vos utilisateurs de spécifier le nom, le type et l’emplacement d’un fichier à enregistrer. Vous pouvez apprendre à écrire dans le fichier résultant et à lire ce dernier dans Démarrage rapide : lecture et écriture d’un fichier.

Si vous voulez ajouter la fonctionnalité « Enregistrer sous » à votre application, ajoutez à l’interface utilisateur de votre application un contrôle qui appelle fileSavePicker. Pour en savoir plus sur l’ajout de contrôles, voir Ajout de contrôles et de contenu.

Pour que votre application indique un emplacement d’enregistrement aux utilisateurs via le sélecteur de fichiers, voir Démarrage rapide : intégration aux contrats du sélecteur de fichiers.