How to copy and paste files (HTML)

Article
10/13/2015

[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]

The Clipboard lets users copy and paste files within the same app or between two different apps on the same computer. This topic shows you how to support copying and pasting files in your app.

Check out our Clipboard sample app for comprehensive examples that show how to copy and paste other types of data.

What you need to know

Technologies

Prerequisites

You should be familiar with Quickstart: Clipboard basics.
You should be familiar with Visual Studio and its associated templates.
You should be familiar with JavaScript.

Copying files to the Clipboard

Retrieve files that the user wants to copy. The following example uses the file picker to retrieve files. To learn more about the file picker, see Quickstart: Accessing files with file pickers. To learn more about other ways to access files, see Accessing data and files.
```
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll(["*"]);
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;
picker.pickMultipleFilesAsync().done(function (files) {

    ...

}
```

Create the DataPackage object and add the files to it.

var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
dataPackage.setStorageItems(files);

Request a copy operation from targets that support file operations, such as File Explorer.


dataPackage.requestedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.copy;

Copy the contents of the DataPackage to the Clipboard.

Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);

Pasting files from the Clipboard

Get the contents of the clipboard.

var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();

Check whether the Clipboard contains any storage items (files and folders) and, if so, retrieve the items.


if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.storageItems)) {
    dataPackageView.getStorageItemsAsync().done(function (storageItems) {
       ...
    }
    ...
}

Retrieve any files and copy them as directed by the user. The following example copies the files to the app's local folder.

// Copy files to the local folder.
storageItems.forEach(function (file) {
    if (file.isOfType(Windows.Storage.StorageItemTypes.file)) {
        file.copyAsync(Windows.Storage.ApplicationData.current.localFolder,
                file.name, Windows.Storage.NameCollisionOption.replaceExisting).done(function (newFile) {
            document.getElementById("fileOutput").innerHTML += file.name + "";
        }, function (e) {
            displayError("Error copying file: " + e);
        });
    } else {
        // It's a folder. We're skipping folders to keep the sample brief.
        document.getElementById("fileOutput").innerHTML += file.path + " is a folder, skipping ";
    }
});

Complete examples

This example shows how to copy files that the user selects with the file picker.

function copyFiles() {

    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll(["*"]);
    picker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;
    picker.pickMultipleFilesAsync().done(function (files) {
        if (files.size > 0) {
            var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
            dataPackage.setStorageItems(files);

            // Request a copy operation from targets that support different file operations, like Windows Explorer
            dataPackage.requestedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.copy;

            try {
                // Copy the content to the Clipboard.
                Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);

                displayStatus("Files have been copied to Clipboard. Try pasting them in another application, or click Paste button above.");
            } catch (e) {
                // Copying data to Clipboard can fail if, for example, another app is holding 
                // the Clipboard open.
                displayError("Error copying content to Clipboard: " + e + ". Try again.");
            }
        } else {
            displayStatus("No file selected");
        }
    });
}

The following example retrieves files from the Clipboard and stores them in the app's local folder.

function pasteFiles() {
    // Get the content from the Clipboard.
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();

    // Check whether the content contains any storage items.
    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.storageItems)) {
        dataPackageView.getStorageItemsAsync().done(function (storageItems) {

            // Copy files to the local folder.
            storageItems.forEach(function (file) {
                if (file.isOfType(Windows.Storage.StorageItemTypes.file)) {
                    file.copyAsync(Windows.Storage.ApplicationData.current.localFolder, 
                            file.name, Windows.Storage.NameCollisionOption.replaceExisting).done(function (newFile) {
                        document.getElementById("fileOutput").innerHTML += file.name + "";
                    }, function (e) {
                        displayError("Error copying file: " + e);
                    });
                } else {
                    // It's a folder. We're skipping folders to keep the sample brief.
                    document.getElementById("fileOutput").innerHTML += file.path + " is a folder, skipping ";
                }
            });
        }, function (e) {
            displayError("Error retrieving files from Clipboard: " + e);
        });
    } else {
        displayStatus("No files on Clipboard");
    }
}

Quickstart: Clipboard basics

How to copy and paste HTML

How to copy and paste images

Guidelines and checklist for clipboard commands

DataPackage

Windows.ApplicationModel.DataTransfer

Clipboard sample app