Quickstart: Register an app for AutoPlay content (HTML)

Article
08/31/2015

You can register apps as options for AutoPlay content events. AutoPlay content events are raised when a volume device such as a camera memory card, thumb drive, or DVD is inserted into the PC.

Here we show how to identify your app as an AutoPlay option when a volume device from a camera is inserted.

Objective: Create an app to handle an AutoPlay content event.

Prerequisites

Microsoft Visual Studio

Instructions

1. Create a new project and add AutoPlay declarations

Open Visual Studio and select New Project from the File menu. In the Javascript section, select Windows Store. Name the app AutoPlayDisplayOrCopyImages and click OK.
Open the Package.appxmanifest file and select the Capabilities tab. Select the Removable Storage and Pictures Library capabilities. This gives the app access to removable storage devices for camera memory, and access to local pictures.
In the manifest file, select the Declarations tab. In the Available Declarations drop-down list, select AutoPlay Content and click Add. Select the new AutoPlay Content item that was added to the Supported Declarations list.
An AutoPlay Content declaration identifies your app as an option when AutoPlay raises a content event. The event is based on the content of a volume device such as a DVD or a thumb drive. AutoPlay examines the content of the volume device and determines which content event to raise. If the root of the volume contains a DCIM, AVCHD, or PRIVATE\ACHD folder, or if a user has enabled Choose what to do with each type of media in the AutoPlay Control Panel and pictures are found in the root of the volume, then AutoPlay raises the ShowPicturesOnArrival event.

In the Launch Actions section, enter the following values for the first launch action.

Setting Value

Verb show

Action Display Name Show Pictures

Content Event ShowPicturesOnArrival

The Action Display Name setting identifies the string that AutoPlay displays for your app. The Verb setting identifies a value that is passed to your app for the selected option. You can specify multiple launch actions for an AutoPlay event and use the Verb setting to determine which option a user has selected for your app. You can tell which option the user selected by checking the verb property of the startup event arguments passed to your app. You can use any value for the Verb setting except, open, which is reserved.
In the Launch Actions section for the AutoPlay Content item, click Add New to add a second launch action. Enter the following values for the second launch action.

Setting Value

Verb copy

Action Display Name Copy Pictures Into Library

Content Event ShowPicturesOnArrival
In the Available Declarations drop-down list, select File Type Associations and click Add. In the Properties of the new File Type Associations declaration, set the Display Name field to AutoPlay Copy or Show Images and the Name field to image_association1. In the Supported File Types section, click Add New. Set the File Type field to .jpg. In the Supported File Types section, click Add New again. Set the File Type field of the new file association to .png. For content events, AutoPlay filters out any file types that are not explicitly associated with your app.
Save and close the manifest file.

Setting	Value
Verb	show
Action Display Name	Show Pictures
Content Event	ShowPicturesOnArrival

Setting	Value
Verb	copy
Action Display Name	Copy Pictures Into Library
Content Event	ShowPicturesOnArrival

2. Add HTML UI

Open the Default.html file and place the following HTML in the <body> section.

<label>File List</label>
<div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>

3. Add initialization code

The code in this step checks the verb value in the verb property from the startup arguments passed to the app. The code then calls the function related to the option that the user selected. For the camera memory event, AutoPlay passes the root folder of the camera storage in the startup arguments that are passed to the app. You can retrieve this folder from the first element of the detail.files property.

Open the js folder. Open the Default.js file and replace the default onactivated function with the following code.

var filesDiv;

app.onactivated = function (args) {
    if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
        filesDiv = document.getElementById("files");

        if (args.detail.verb === "show") {
            // Call displayImages with root folder from camera storage.
            displayImages(args.detail.files[0]);
        }
        else if (args.detail.verb === "copy") {
            // Call copyImagesToLibrary with root folder from camera storage.
            copyImagesToLibrary(args.detail.files[0]);
        }
    }
    args.setPromise(WinJS.UI.processAll());
};

4. Add code to display images

In the Default.js file, add the following code after the onactivated function.

function displayImages(rootFolder) {
    // Display images from first folder in root\DCIM.
    rootFolder.getFolderAsync("DCIM").then(
    function (dcimFolder) {
        dcimFolder.getFoldersAsync().then(
        function (cameraFolders) {
            cameraFolders[0].getFilesAsync().then(
            function (files) {
                files.forEach(function (file) {
                    filesDiv.innerHTML += file.name + "<br />";
                    displayImage(file);
                });
            });
        });
    });
}

function displayImage(file) {
    try {
        var element = document.createElement("img");
        element.src = window.URL.createObjectURL(file, { oneTimeOnly: true });
        element.height = 100;
        element.width = 100;
        filesDiv.appendChild(element);
        filesDiv.innerHTML += "<br>";
    }
    catch (e) {
        filesDiv.innerHTML += e.message;
    }
}

5. Add code to copy images

In the Default.js file, add the following code after the displayImage function.

function copyImagesToLibrary(rootFolder) {
    try {
        var now = new Date();
        var folderName =
            "Images " + now.toDateString() + " " + now.getHours() +
                        now.getMinutes() + now.getSeconds();

        Windows.Storage.KnownFolders.
        picturesLibrary.createFolderAsync(folderName).then(
                function (imageFolder) {
                    // Copy images from first folder in root\DCIM.
                    rootFolder.getFolderAsync("DCIM").then(
                function (dcimFolder) {
                    dcimFolder.getFoldersAsync().then(
                function (cameraFolders) {
                    cameraFolders[0].getFilesAsync().then(
                function (files) {
                    files.forEach(function (file) {
                        copyImage(file, imageFolder);
                    });
                });
                });
                });
                });
    } catch (e) {
        filesDiv.innerHTML = "Failed copy images.<br />" + e.message;
    }
}

function copyImage(file, imageFolder) {
    try {
        file.copyAsync(
            imageFolder, file.fileName,
                Windows.Storage.NameCollisionOption.replaceExisting).then(
                    function (newFile) {
                        filesDiv.innerHTML += file.name + " copied.<br />";
                    });
    } catch (e) {
        filesDiv.innerHTML += "Failed to copy image.<br />" + e.message;
    }
}

6. Build and run the app

Press F5 to build and deploy the app (in debug mode).
To run your app, insert a camera memory card or another storage device from a camera into your PC. Then, select one of the content event options that you specified in your package.appxmanifest file from the AutoPlay list of options. This sample code only displays or copies pictures in the DCIM folder of a camera memory card. If your camera memory card stores pictures in an AVCHD or PRIVATE\ACHD folder, you will need to update the code accordingly.Note If you don't have a camera memory card, you can use a flash drive if it has a folder named DCIM in the root and if the DCIM folder has a subfolder that contains images.

Summary and next steps

In this tutorial, you created an app that displays image files or copies them to Pictures. You registered the app for the AutoPlay ShowPicturesOnArrival content event.

AutoPlay raises content events for content shared between PCs using proximity (tapping). You can use the steps and code in this quickstart to handle files that are shared between PCs that use proximity. The following table lists the AutoPlay content events that are available for sharing content by using proximity.

Action	AutoPlay content event
Sharing music	PlayMusicFilesOnArrival
Sharing videos	PlayVideoFilesOnArrival

When files are shared by using proximity, the Files property of the FileActivatedEventArgs object contains a reference to a root folder that contains all of the shared files.

Auto-launching with AutoPlay