Idioma: HTML | XAML

Cómo compartir archivos (HTML)

Applies to Windows and Windows Phone

A menudo, los usuarios quieren compartir archivos con otras personas o aplicaciones. Mediante la característica de uso compartido, tu aplicación puede admitir fácilmente tareas que van desde enviar por correo electrónico un archivo a un colega hasta compartir un conjunto de fotos de tus vacaciones familiares.

Al admitir una función como el uso compartido de archivos, debes tener en cuenta el momento en que tu aplicación podrá tener listos los archivos. La mayoría de las veces, tu aplicación tendrá los archivos listos para su uso. Si ese es el caso, los pasos que se describen en este tema serán todo lo que necesitarás. Si tu aplicación necesita realizar tareas adicionales para preparar los archivos (por ejemplo, convertirlos de un formato a otro), debes echar un vistazo a nuestro tema sobre cómo admitir operaciones de extracción. En ese tema, te mostramos cómo usar una función delegada para que las aplicaciones de destino puedan extraer el contenido que se comparte desde tu aplicación, en lugar de solicitar a tu aplicación que inserte el contenido.

Lo que debes saber

Tecnologías

Requisitos previos

Instrucciones

Paso 1: Crear una función de controlador de botón para que el usuario pueda elegir un archivo de imagen

El siguiente código de controlador de botón permite que el usuario seleccione un archivo de imagen. Este archivo se usa en los siguientes pasos de este inicio rápido.

  • Applies to Windows Phone

Nota  

El siguiente código usa pickSingleFileAsync. En Windows Phone 8.1, se debería usar en su lugar pickSingleFileAndContinue.


var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

Paso 2: Configurar tu aplicación como origen de contenido compartido

El objeto DataTransferManager es el punto de partida principal para la operación de uso compartido de contenido. Agrega un controlador de eventos DataRequested para activarlo cuando el usuario quiera invocar el uso compartido. En una aplicación de la Tienda Windows, esto se produce automáticamente cuando el usuario invoca el acceso a Compartir. Si estás desarrollando para Windows Phone, no hay un acceso a Compartir integrado, por lo que tendrás que agregar un control para que el usuario pulse y active el controlador.


var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareStorageItemsHandler);


Los pasos restantes implementan la función shareStorageItemsHandler.

Paso 3: Obtener un objeto DataRequest

Cuando se produce un evento datarequested, tu aplicación recibe un objeto DataRequest. Este objeto contiene un DataPackage que puedes usar para proporcionar el contenido que el usuario quiere compartir.


var request = e.request;


Paso 4: Establecer las propiedades de título y descripción


request.data.properties.title = "Share StorageItems Example";
request.data.properties.description = "Demonstrates how to share files.";


Paso 5: Agregar los archivos a DataPackage

Para agregar los archivos a DataPackage, usa el método setStorageItems.


request.data.setStorageItems([imageFile]);

Observaciones

De manera predeterminada, setStorageItems proporciona "clones" de solo lectura de storageItems, para compartir con aplicaciones de destino. Después de llamar a setStorageItems, todas las propiedades nuevas que estableces en los elementos individuales de almacenamiento no se reflejarán en los elementos clonados. Por eso, debes asegurarte de que los archivos estén completamente listos para el uso compartido antes de agregarlos a DataPackage.

Además, si quieres que una aplicación de destino tenga capacidades de lectura y escritura en storageItems, usa la versión de sobrecarga del método setStorageItems que permite especificar solo lectura o lectura y escritura. Por ejemplo, una aplicación de origen que solicita a la de destino que realice la operación de eliminar al pegar, especificaría lectura y escritura para permitir que la aplicación de destino elimine los archivos de origen después de copiarlos.

Si tu aplicación necesita usar una operación asincrónica para preparar la imagen o la miniatura, tendrás que usar el modelo de aplazamiento. Te mostramos como hacerlo en Cómo realizar llamadas asincrónicas en el controlador DataRequested.

Si tu aplicación tarda mucho en preparar los archivos (más de 200 milisegundos), necesitas usar una función delegada para compartirlos. En el tema sobre cómo admitir operaciones de extracción, te mostramos cómo hacer esto. Si decides usar una función delegada, debes establecer la propiedad FileTypes en DataPackage antes de agregar los archivos.

Ejemplo completo

A continuación, mostramos un ejemplo de una función que establece algunos archivos para que un usuario los comparta. Para obtener un ejemplo más detallado, consulta nuestra galería de muestras de código.


var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

function shareStorageItemsHandler(e) {
    var request = e.request;
    request.data.properties.title = "Share StorageItems Example";
    request.data.properties.description = "Demonstrates how to share files.";
    request.data.setStorageItems([imageFile]);
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app is newly launched; register it as a share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", shareStorageItemsHandler);
            // Setup the button handler to pick image file
            document.getElementById("chooseImageButton").addEventListener("click", pickImageFile, false);
        } else {
            // TODO: This app was reactivated from suspension.
            // Restore the app state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};

Temas relacionados

Muestra de una aplicación de origen de contenido compartido
Uso compartido e intercambio de datos
Cómo compartir contenido HTML
Cómo compartir un vínculo
Cómo compartir texto
Inicio rápido: compartir contenido
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

Mostrar:
© 2014 Microsoft