How to select and display an image (HTML)

Article
08/10/2016

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

Learn how to use the Window.Storage.Pickers.FileOpenPicker and Blob objects to load and display an image that the user selects.

What you need to know

Technologies

Prerequisites

You should be able to create a basic Windows app using JavaScript. For more info, see Create your first Windows Store app using JavaScript.

Instructions

Step 1: Create elements for selecting and displaying the image

This example creates a button that the user clicks to launch the FileOpenPicker, a paragraph for displaying info about the image, and an img element for displaying the image.
```
<button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />
```
Add the loadImage event handler to your button's click event. This example adds the event handler when the WinJS.UI.processAll function completes. For more info about where to attach event handlers, see Quickstart: Adding controls and handling events.
```
            WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });
```
You define the loadImage event handler in the next step.

Step 2: Select an image

To enable the user to select an image, create a new Window.Storage.Pickers.FileOpenPicker in your JavaScript and set its fileTypeFilter to the image types you want to make available. To display the FileOpenPicker, call the pickSingleFileAsync method.

The pickSingleFileAsync returns a promise for the selected image; specify a function for processing the results and a function for processing errors. (We implement those methods later in this topic.)

This example defines a function, loadImage, that creates and displays FileOpenPicker. This function is called when the user clicks the selectImageButton you defined in the previous step.

function loadImage(eventInfo) {

    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().then(processResults, displayError);
}

Step 3: Process the selected file

Define the function that is called when the user successfully selects an image.

Define a function that takes a StorageFile as a parameter.
```
function processResults(file)
{

}
```

Verify that the file exists.

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {

    } else {
        displayError("An image wasn't selected."); 
    }
}

Use the URL.createObjectURL method to create a Blob from the StorageFile.

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);

    } else {
        displayError("An image wasn't selected."); 
    }
}

Use the Blob to set the src property of your img element. This example also displays the file name of the selected image.

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

    } else {
        displayError("An image wasn't selected."); 
    }
}

Release the Blob.

function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

        // Release the blob resources.
        URL.revokeObjectURL(imageBlob);
    } else {
        displayError("An image wasn't selected."); 
    }
}

Step 4: Handle errors

Implement a method that notifies the user there was an error. It accepts an error message as a parameter.

    function displayError(error) {
        if (imageBlob) {
            URL.revokeObjectURL(imageBlob);
        }
        document.getElementById("imageInformation").innerText = error;
    }