locked
Metro javaScript,How to use local resources?

    Question

  • hi~

    I can use picker APIs to pick a video, image, or audio file on disk, But how can I access a local static Resource

    for example :I can use the following function to open a local folder and pick a local image.

    function showImage()
    {
        var image = document.getElementById("showbackimage");
        var picker = new Windows.Storage.Pickers.FileOpenPicker();
        picker.fileTypeFilter.append("*");
        picker.pickSingleFileAsync().then(
                function (item) {
                    if (item) {
                        image.src = URL.createObjectURL(item, false);
                    }
                }
            );
    }

    But now I want to do this:  “ src =  static local route ”

    <img id="showbackimage" alt="image holder" src="F:\Test_Video\logo.png"/>       ——〉report error

    Wednesday, April 25, 2012 6:50 AM

Answers

  • Creating a direct URL to arbitrary locations on the file system, e.g. using file://, is blocked by design for Metro style apps--too many security concerns. You're already using the correct means of doing this with URL.createObjectURL.

    As an aside, you can refer to resources within your app data folders using ms-appdata://local, ms-appdata://temp, and ms-appdata://roaming.

    That said, you can't point to arbitrary resources in static markup. You'll always need to assign image.src with a URL from createObjectURL.

    What you want here then is to have the user pick a file once, then have it show up in the image element when the app it run again. What you'll need to do then is to save the picked file path into the access cache, see Windows.Storage.AccessCache at http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.accesscache.aspx. Specifically look at the StorageItemAccessList class which allows you to save a StorageFile (as comes through pickSingleFileAsync) for future access.

    Adding an item to the list gives you a token while you'll then need to associate with the img element id. You'll then want to store an array of such mappings (if you have multiple elements like this) in your local settings container (Windows.Storage.ApplicationData.localSettings, http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.applicationdata.localsettings.aspx).

    On startup, then, you'd go through the applicable img elements in your markup, retrieve the token from your local settings, use StorageItemAccessList.getFileAsync(token) to get the StorageItem, then again call URL.createObjectURL(item) and assign the URL to the img src.

    For examples of using the AccessCache, see the File access sample, http://code.msdn.microsoft.com/windowsapps/File-access-sample-d723e597.

    One more thing is that you always have to go through the file picker to get access to an arbitrary file on the file system outside appdata and the known libraries for which there are capabilities in the manifest.

    .Kraig


    Wednesday, April 25, 2012 4:40 PM

All replies

  • Creating a direct URL to arbitrary locations on the file system, e.g. using file://, is blocked by design for Metro style apps--too many security concerns. You're already using the correct means of doing this with URL.createObjectURL.

    As an aside, you can refer to resources within your app data folders using ms-appdata://local, ms-appdata://temp, and ms-appdata://roaming.

    That said, you can't point to arbitrary resources in static markup. You'll always need to assign image.src with a URL from createObjectURL.

    What you want here then is to have the user pick a file once, then have it show up in the image element when the app it run again. What you'll need to do then is to save the picked file path into the access cache, see Windows.Storage.AccessCache at http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.accesscache.aspx. Specifically look at the StorageItemAccessList class which allows you to save a StorageFile (as comes through pickSingleFileAsync) for future access.

    Adding an item to the list gives you a token while you'll then need to associate with the img element id. You'll then want to store an array of such mappings (if you have multiple elements like this) in your local settings container (Windows.Storage.ApplicationData.localSettings, http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.applicationdata.localsettings.aspx).

    On startup, then, you'd go through the applicable img elements in your markup, retrieve the token from your local settings, use StorageItemAccessList.getFileAsync(token) to get the StorageItem, then again call URL.createObjectURL(item) and assign the URL to the img src.

    For examples of using the AccessCache, see the File access sample, http://code.msdn.microsoft.com/windowsapps/File-access-sample-d723e597.

    One more thing is that you always have to go through the file picker to get access to an arbitrary file on the file system outside appdata and the known libraries for which there are capabilities in the manifest.

    .Kraig


    Wednesday, April 25, 2012 4:40 PM
  • Excellent!  Thanks a lot~ Kraig!   he he~  :)
    Thursday, April 26, 2012 2:03 AM
  • Supplementary answer:

    If someone want to access a local static Resource(such as video,image,or text...) in your Program.

    You can use this method:

    put the picture (such as image.png ) in the AppX folder which under The current project file .

    Then In “. HTML” file input the code :

    <img id="show_image" src=""ms-appx:///test/image.png""/>

    or

    <img id="showimage_inback"/>

    In “. JS” file input the code :

    document.getElementById("showimage_inback").src = "ms-appx:///test/image.png";


    Saturday, April 28, 2012 7:51 AM
  • Thanks for the nice, detailed answer!!

    sree

    Friday, August 24, 2012 5:54 AM