Cómo guardar archivos mediante selectores de archivos (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

Usa fileSavePicker para permitir a los usuarios especificar el nombre y la ubicación donde desean guardar el contenido de la aplicación.

Requisitos previos

Conocer la programación asincrónica para aplicaciones de Windows en tiempo de ejecución con JavaScript

Puedes aprender cómo escribir aplicaciones asincrónicas en el inicio rápido sobre el uso de promesas en JavaScript.

Instrucciones

Paso 1: Crear y personalizar el selector de archivos para mostrar ubicaciones donde los usuarios puedan guardar

Usa fileSavePicker para que el usuario pueda especificar el nombre, el tipo de archivo y la ubicación de un archivo para guardarlo. El selector de archivos se puede personalizar si se establecen las propiedades en el fileSavePicker que crees.

La muestra de selector de archivos ilustra cómo crear y personalizar un objeto 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";

Debes establecer las propiedades fileSavePicker que sean relevantes para los usuarios y para la aplicación. Para obtener directrices que te ayudarán a decidir cómo personalizar el selector de archivos, consulta Directrices y lista de comprobación para selectores de archivos.

En la muestra de selector de archivos, el selector de archivos se personaliza estableciendo tres propiedades fileSavePicker: suggestedStartLocation, fileTypeChoices y suggestedFileName.

Nota Los objetos fileSavePicker usan pickerViewMode.list para mostrar datos.

JJ150595.wedge(es-es,WIN.10).gif Personalización detallada de un fileSavePicker

Dado que nuestro usuario está guardando un documento o archivo de texto, el ejemplo establece savePicker.suggestedStartLocation en la carpeta local de la aplicación mediante LocalFolder.
```
savePicker.suggestedStartLocation = Windows.Storage.ApplicationData.localFolder;
```
Debes establecer suggestedStartLocation en una ubicación del sistema de archivos que sea apropiada para el tipo de archivo que se está seleccionando. Si el usuario está seleccionando música, imágenes o vídeos, establece la ubicación del inicio en Música, Imágenes o Vídeos, respectivamente. Para todos los demás tipos de archivos, establece la ubicación de inicio en la carpeta local de la aplicación. Se trata simplemente de una ubicación de inicio. Los usuarios pueden desplazarse a otras ubicaciones mientras estén usando el selector de archivos.
Como queremos asegurarnos de que nuestra aplicación puede abrir el archivo después de que este se haya guardado, la muestra usa savePicker.fileTypeChoices.insert para especificar los tipos de archivo que se admiten (archivos de texto y documentos de Microsoft Word).
```
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
```
Procura que todos los tipos de archivo que indiques sean compatibles con tu aplicación.

Los usuarios podrán guardar sus archivos como cualquier otro tipo de archivo que figure en esta lista. También podrán cambiar el tipo de archivo seleccionando otro distinto (que hayas especificado) en el control desplegable que hay en la esquina inferior derecha del selector de archivos. La primera opción de tipo de archivo de la lista estará seleccionada de forma predeterminada. Para cambiar el tipo de archivo que aparece seleccionado de forma predeterminada, establece la propiedad savePicker.defaultFileExtension.

Nota El selector de archivos usa también el tipo de archivo seleccionado actualmente para filtrar los archivos que se van a mostrar, de modo que el usuario solo podrá ver los tipos de archivo que coincidan con los tipos de archivo seleccionados.
Queremos ahorrar al usuario parte de lo que tiene que escribir, así que en la muestra definimos un savePicker.suggestedFileName para el archivo que se va a guardar.
```
savePicker.suggestedFileName = "New Document";
```
Intenta que el nombre de archivo sugerido sea lo más significativo posible para el archivo que el usuario va a guardar. Por ejemplo, como en Word, puedes sugerir el nombre de archivo existente si solo hay uno, o la primera línea de un documento, si se va a guardar un archivo que aún no tiene nombre.

Paso 2: Mostrar el fileSavePicker para guardar un archivo

Después de crear y personalizar el selector de archivos, llama a savePicker.pickSaveFileAsync para permitir al usuario guardar el archivo.

Cuando el usuario especifique el nombre, el tipo de archivo y la ubicación, y confirme que guarda los archivos, pickSaveFileAsync devuelve un objeto storageFile que representa el archivo guardado. Puedes capturar y procesar este archivo con then o con done.

La muestra de selector de archivos ilustra cómo presentar el selector de archivos para que el usuario pueda guardar un archivo.

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");
    }
});

Después de guardar el archivo, la aplicación tiene acceso de lectura y escritura a ese archivo. La muestra captura el archivo guardado en el parámetro file y comprueba que el archivo es válido. Sin embargo, en realidad la muestra no procesa aún más el archivo. Obtendrás más información sobre cómo escribir y leer en el archivo resultante en Inicio rápido: lectura y escritura de archivos.

Sugerencia Siempre debes comprobar el archivo guardado (file en la muestra) para garantizar que sea válido antes de realizar otros procesos. A continuación, puedes guardar contenido en el archivo según corresponda para la aplicación y proporcionar el comportamiento adecuado si el archivo no es válido.

Observaciones

Si usas código similar a lo que se muestra aquí, la aplicación debe mostrarles a los usuarios el selector de archivos y permitirles especificar el nombre, el tipo de archivo y la ubicación del archivo que se va a guardar. Obtendrás más información sobre cómo escribir y leer en el archivo resultante en Inicio rápido: lectura y escritura de archivos.

Si quieres agregar la opción de "guardar como" a la aplicación, agrega a la interfaz de usuario de la aplicación un control que llame a fileSavePicker. Para obtener información sobre cómo agregar controles, consulta Agregar controles y contenido.

Si quieres que tu aplicación proporcione a los usuarios una ubicación para guardar mediante el selector de archivos, consulta Inicio rápido: integrar con contratos del selector de archivos.