How to share files (HTML)
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Users often want to share files with other people or apps. Using the sharing feature, your app can easily support tasks ranging from emailing a file to a colleague to sharing a set of pictures from a family vacation.
When supporting something like sharing files, you need to consider when your app can have the files ready. Most of the time, your app will probably have the files ready to go. If that's the case, the steps in this topic should be what you need. If your app needs to do some additional work before the files are ready—for example, to convert the files from one format to another—then you should take a look at our topic, How to support pull operations. That topic shows you how to use a delegate function so that target apps can pull the content being shared from your app, instead of requiring your app to push the content.
What you need to know
Technologies
Prerequisites
- You should be familiar with Visual Studio and its associated templates.
- You should be familiar with JavaScript.
- You should understand how to get files and other data, such as by using FileOpenPicker. You can learn more in Accessing files with file pickers.
Instructions
Step 1: Create a button handler function to let the user choose an image file
The following button handler code lets the user to pick an image file. This file is used in the remaining steps of this quickstart.
Note
The following code uses pickSingleFileAsync. On Windows Phone 8.1, pickSingleFileAndContinue should be used instead.
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;
});
}
Step 2: Set up your app as a share source
The DataTransferManager object is the main starting point for any share operation. Add a DataRequested event handler to fire when the user wants to invoke Share. In a Windows Store app, this occurs automatically when the user invokes the Share charm. If you're developing for Windows Phone, there is no built-in Share charm, so you'll need to add a control for the user to tap and trigger the handler.
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareStorageItemsHandler);
The remaining steps are for implementing the shareStorageItemsHandler function.
Step 3: Get a DataRequest object
When a datarequested event occurs, your app receives a DataRequest object. This object contains a DataPackage that you can use to provide the content that the user wants to share.
var request = e.request;
Step 4: Set the title and description properties
request.data.properties.title = "Share StorageItems Example";
request.data.properties.description = "Demonstrates how to share files.";
Step 5: Add the files to the DataPackage
To add the files to the DataPackage, use the setStorageItems method.
request.data.setStorageItems([imageFile]);
Remarks
By default, setStorageItems provides read-only "clones" of storageItems for sharing with target apps. After you call setStorageItems, any new properties that you set on the individual storage items won't be reflected in the cloned items. That's why you should make sure your files are completely ready for sharing before you add them to the DataPackage.
Also, if you want a target app to have read/write capabilities on the storageItems, use the overloaded version of the setStorageItems method that lets you specify read-only or read/write. For example, a source app that asks the target to perform a delete-on-paste operation would specify read/write so enable the target to delete the source files after copying them.
If your app needs to use an asynchronous operation to prepare the image or the thumbnail, you’ll need to use the deferral pattern. We show how to do this in How to make asynchronous calls in your datarequested handler.
If your app takes a long time (more than 200 milliseconds) to get the files ready, you need to use a delegate function to share it. We show you how to do this in How to support pull operations. If you decide to use a delegate function, you need to set the FileTypes property on the DataPackage before adding the files themselves.
Complete example
Here's an example of a function that sets some files for a user to share. For a more complete example, check out our code gallery sample.
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());
}
};
Related topics
Sharing content source app sample