How to copy and paste files (HTML)

Applies to Windows only

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

  1. 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) {
    
        ...
    
    }
    
    
  2. Create the DataPackage object and add the files to it.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    dataPackage.setStorageItems(files);
    
    
  3. Request a copy operation from targets that support file operations, such as File Explorer.
    
    
    dataPackage.requestedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.copy;
    
    
    
  4. Copy the contents of the DataPackage to the Clipboard.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Pasting files from the Clipboard

  1. Get the contents of the clipboard.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. 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) {
           ...
        }
        ...
    }
    
    
  3. 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");
    }
}

Related topics

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

 

 

Show:
© 2014 Microsoft