Question

I’m using JavaScript for app I’m currently working on. I’ve created file picker as shown in guide.

After file is picked I get object Windows.Storage.StorageFile. This file is image, my question is how to display image in img tag for example?

Answer 1

Let’s say you have an image tag in your page like:

    <img id="theImage" />

then in your JavaScript callback from selecting the file, you’d set the img src property to a URL (using createObjectURL) that you create from the StorageFile reference:

    var picker = Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".png"]);
    picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

    // Launch the picker in open mode
    picker.pickSingleFileAsync().then(function (file) {

        var imgElement = document.getElementById("theImage");
        imgElement.src = URL.createObjectURL(file); 
    });