Quickstart: Get an image file from a storage device (HTML)
This tutorial shows you how to get an image file from a removable storage device and display it.
Objective: As in the previous example, you'll enumerate portable storage devices and instantiate one using Windows.Devices.Portable.Storage.FromId, but in this example you'll use createFileQueryWithOption to find an image file and getFilesAsync to retrieve it.
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. Declare the file types
- In the Declarations tab, choose File Type Declarations from Available Declarations.
- Under Properties, set the Name property to image.
- In the Supported File Types box, click Add New, to add .gif as a supported file type by entering .gif in the FileType field.
- Add two more supported file types for .jpg and .png by clicking Add New and filling in the FileType.
5. 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>
<meta charset="utf-8" />
<title>Get an image file from a removable storage device</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type = "text/javascript" >
Enum = Windows.Devices.Enumeration;
// Enumerate removable storage devices.
// The success callback selects the removable storage to use.
function pickStorageToGetImageFrom() {
Enum.DeviceInformation.findAllAsync(
Windows.Devices.Portable.StorageDevice.getDeviceSelector(),
null).then(
successCallback,
errorCallback);
}
// Handler that's called when removable storages are found.
// storageDevices: A collection of type
// Windows.Devices.Enumeration.DeviceInformationCollection.
// This example just takes the first storage found in the list.
function successCallback(storageDevices) {
var removableStorage = null;
if (storageDevices.length) {
try {
// Create an IStorageItem from the first removable storage device
removableStorage = Windows.Devices.Portable.StorageDevice.fromId(
storageDevices.getAt(0).id);
// document.getElementById("output").innerHTML = storageDevices.getAt(0).name;
} catch (e) {
document.getElementById("output").innerHTML =
"Error: " + e.message;
}
if (removableStorage != null) {
getImageFiles(removableStorage);
}
} else {
document.getElementById("output").innerHTML =
"No removable storage devices were found.";
}
}
// Error callback that's called if unable to enumerate all
// removable storages
function errorCallback(e) {
document.getElementById("output").innerHTML =
"Error enumerating storages: " + e.message;
}
// Find the images on the removable storage and display the first one
// in the <img> element.
// storageItem: the item representing the removable storage
function getImageFiles(removableStorage)
{
// Construct the query for image files
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery = removableStorage.createFileQueryWithOptions(
queryOptions);
// Run the query for image files
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images on the removable storage: "
+ e.message;
});
}
function displayFirstImage(items) {
var found = false;
for (var i = 0, l = items.length; i < l && !found; i++) {
if (items[i].size > 0) { // display the first non-empty file
displayImage(items[i]);
found = true;
}
}
if (!found) {
// No files found matching our criteria
document.getElementById("output").innerHTML =
"No image files found on the removable storage.";
}
}
function displayImage(imageFile) {
document.getElementById("imageNameHolder").innerHTML =
"Image file name: " + imageFile.name + "<br/>";
// Setting 2nd parameter to 'false' cleans up the URL
// after first use. we set this because we only need
// to load the URL into the image tag once.
document.getElementById("imageHolder").src =
window.URL.createObjectURL(imageFile, false);
}
</script>
</head>
<body>
<div>
<p>Finds and displays the first available image file
(.jpg, .png, or .gif) on a removable storage device.</p>
<button onclick="pickStorageToGetImageFrom()">Get Image File</button>
</div>
<div id="output"></div>
<div id="imageOutput">
<img id="imageHolder" alt="image holder" src=""/><br />
<div id="imageNameHolder"></div>
</div>
</body>
</html>
6. Test the Application
- Plug in your removable storage device, if it isn't already attached.
- On the Debug menu, click Start Debugging to test the solution.
- Click the Get Image File button to get the first image file on the removable storage device and display it in the image element..
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 and next steps
In this example you accessed an image from a storage device, after creating the storage object by getting a device ID from findAllAsync and passing it to Windows.Devices.Portable.Storage.FromId
In the successHandler function, this example chose the first of all the enumerated storage devices, but you can modify the app to present a list of all available removable storages for the user to choose from.
In the next tutorial you'll create the storage object by using an AutoPlay handler.