Share via

Quickstart: List removable storage devices (HTML)

  • Article

This tutorial shows you how to use Windows.Storage.KnownFolders to get a snapshot of the currently connected devices as StorageFolder objects.

Objective: You'll learn how to list removable storage devices by using Windows.Storage.KnownFolders.

Prerequisites

You should be familiar with JavaScript and HTML.

You need to have a removable storage device available.

Time to complete: 20 minutes.

Instructions

1. Open Microsoft Visual Studio

Open an instance of Microsoft Visual Studio.

2. Create a New Project

In the New Project dialog box, choose a blank application from the JavaScript project types.

3. Declare the Removable Storage Capability

Double click on package.appxmanifest in solution explorer. Select the Capabilities tab. Check Removable Storage in the Capabilities list.

4. Insert the Application HTML and JavaScript

Open your Default.html and copy the following code into it, replacing its original contents.


<!DOCTYPE html>
<html>
<head>
<title>Removable Storage Devices</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type = "text/javascript" >

// Use the Removable Devices KnownFolder to get a snapshot of the currently 
// connected devices as StorageFolders. 
 function listStorages() {
        document.getElementById("output").innerHTML = "";
        Windows.Storage.KnownFolders.removableDevices.getFoldersAsync().
        then(
            function (removableStorages) {
            // Display each storage device.
            var numRemovableStorages = removableStorages.length;
            if (numRemovableStorages > 0) {
                removableStorages.forEach(function (removableStorage, i) {
                    document.getElementById("output").innerHTML +=
                             removableStorage.name + "<br/>";
                });
            } else {
                document.getElementById("output").innerHTML = 
                        "No storages found. Attach a removable storage " +
                        "such as a camera or USB drive.)";
            }
        },
            function (e) {
            document.getElementById("output").innerHTML = 
                    "Failed to find all storage devices. Error: " +
                     e.message;
        });
    }
</script>
</head>
<body>
<p>
Click "List Storages" to get a list removable storage devices.<br /></p>
<input type="button" onclick="listStorages()" value="List Storages" /><br />

<div id=output></div>

</body>
</html>

5. Test the Application

  1. Plug in your removable storage device, if it isn't already attached.
  2. On the Debug menu, click Start Debugging to test the solution.
  3. Click the List Storages button to see a list of removable storages.

Note  If you get an error, check the following:

  • Make sure you've enabled access to removable storage by opening package.appxmanifest in Solution Explorer and checking Removable Storage in the Capabilities tab.

 

Summary

Next, you'll copy a file from Pictures to a storage device.

Access the SD card in Windows Phone apps