locked
How to save picked image for next time open app ?

    Question

  • Please help my code:

    var folderPicker = new Windows.Storage.Pickers.FolderPicker();
    folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
    folderPicker.fileTypeFilter.replaceAll([".jpeg", ".jpg", ".gif", ".bmp", ".png"]);
    folderPicker.pickSingleFolderAsync().then(function (folder) {
          if (folder) {
              Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);
              var imageArray = "";
              var myJson;
              folder.getFilesAsync().done(function (images) {
                    images.forEach(function (file) {
                          var imageBlob = URL.createObjectURL(file, { oneTimeOnly: false });
                          imageArray += imageBlob + "|";
                     });
                     // Return something like this blob:4A851F41-9ADE-4054-9F0E-458E7F134343
                     myJson = imageArray.split("|");
                     var data = $.toJSON(myJson);
                     // Convert it to json
                     var fileName = folder.name + ".json";
                     var localFolder = Windows.Storage.ApplicationData.current.localFolder
                     .createFolderAsync("bookmark", Windows.Storage.CreationCollisionOption.openIfExists).done(function (bookmark) {
                           bookmark.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.GenerateUniqueName).then(function (file) {
                                 return Windows.Storage.FileIO.writeTextAsync(file, data);
                           }).done(function () {
                                 console.log("Save success");
                           });
                      });
               });
         } else {
               console.log("Folder Picker Cancel");
         }
    });

    When i display image in img tag like this <img src="blob:4A851F41-9ADE-4054-9F0E-458E7F134343" /> it still work.

    But when i close app and open it again, the app auto load saved json file but image does show.

    After picked folder or file and save it to json file like a bookmark, how i can display image every time i open app ?

    I use jquery with WinJS.

    Thursday, October 09, 2014 6:04 PM

Answers

  • If you check the MRU list, is the file there?

    If debugging you can get to the line:

    var fileUrl = window.URL.createObjectURL(file, { oneTimeOnly: true });
    

    That means that the file is in the MRU and you have permission to access it, maybe createObjectURL is not the correct method for what you are trying to achieve, but at that point, you have the "file" handle to use

    . Also remember that you need the MRUId to fetch it from the list (I left a comment on that line on my example), you can store this Id wherever you want, in session data, local data or read it from another file under your control (maybe a JSON file)

    Friday, October 17, 2014 6:57 PM

All replies

  • I am not sure if app can read blob source from storage file and then bing to image tag. but you can select and display an image using blob object in wins store app. You can find more from http://msdn.microsoft.com/en-us/library/windows/apps/hh465499.aspx.

    Regards,

    Saturday, October 11, 2014 1:47 AM
  • Yes i'm use blob to display image and it work but after save blob string to a json file, next time open app and use that blob again it not work.
    Saturday, October 11, 2014 3:53 AM
  • A week and no one help...
    Monday, October 13, 2014 3:48 PM
  • Hi Nhattuanbl,

    Can you send me a repro project? i will look into it. Use your OneDrive and share a link here.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, October 15, 2014 12:27 PM
    Moderator
  • Hello,

    If you are looking to display an image that you have previously picked, you can use the future access list. So after you have picked your image and returned to your app, you could have code like the following:

    // This function fired when continuing from file picker
    function usedPickedImage(file) {
            var numberPicked = file.detail.files.length;
            if (numberPicked != 0) {
                var firstFile = file.detail.files[0];
                var pickedFile = firstFile;
                // create blob to assign to img tag if needed
                var blob = URL.createObjectURL(pickedFile);
    
               // create access list instance
               var accessList = Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList;
    
              // check access list length and check for entry named avatar
              
             if (accessList.entries.length > 0) {
                    for (var i = 0; i < accessList.entries.length; i++) {
                        if (accessList.entries[i].metadata == "avatar") {
                            accessList.addOrReplace(accessList.entries[i].token, pickedFile, "avatar");
                        }
                        else {
                            accessList.add(pickedFile, "avatar");
                        }
                    }
                }
    
            }
    }

    Then, to retrieve and use/display the image again, make another call to the future access list:

    for (var i = 0; i < accessList.entries.length; i++) {
                    if (accessList.entries[i].metadata == "avatar") {
                        var avatarImg = document.getElementById("currentAvatar");
                        var fileSrc = accessList.getFileAsync(accessList.entries[i].token).done(
                                function (file) {
                                    avatarImg.src = URL.createObjectURL(file);
                                    avatarImg.style.display = "block";
                                    document.getElementById("removeAvatar").style.display = "block";
                                }
                            );
                    }
                }

    I hope this helps, sorry if its not what you were looking for.

    Thanks

    Wednesday, October 15, 2014 1:01 PM
  • This is work but after i close the app and open it again, load json file, the image not work, so can't use that blob after close the app, how do i display the image again without folderpicker
    Thursday, October 16, 2014 10:54 AM
  • Hello,

    Using the future access list removes the need to store BLOB's in a JSON file, as you are essentially 'pre-approved' to use the picked image file again and again without the need to open the file picker.

    So instead of getting a BLOB from a JSON file, then assigning it to the src attribute of an img tag, you retrieve the image file using your access token, create a new BLOB and assign this to an img tags src attribute.

    Unfortunately, from my experience URL.createObjectURL does not persist across app sessions, however I could be wrong and may have missed something.

    Thanks

    Thursday, October 16, 2014 11:04 AM
  • To maintain access rights to the selected file you have to use the MRU list (Most Recently Used).

    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.list; //or Windows.Storage.Pickers.PickerViewMode.thumbnail for images 
    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary; //default location
    openPicker.pickSingleFileAsync().done(function (file) {
    if (file) {
    Windows.Storage.FileIO.readTextAsync(file).then(function (contents) {
    var mruId = file.name;
    Windows.Storage.AccessCache.StorageApplicationPermissions.mostRecentlyUsedList.add(file, mruId);
    });
    } else {
    //no file selected
    return false;
    }
    });
    

    Then, when you want to access it again:
    var mruToken = null;
    var mruId="id_of_the_file_we_want_opened";
    var mruEntries = Windows.Storage.AccessCache.StorageApplicationPermissions.mostRecentlyUsedList.entries;
    if (mruEntries.size &gt; 0) {
    mruEntries.every(function (o) {
    if (o.metadata==mruId) {
    mruToken= o.token;
    return false;
    }
    return true;
    });
    }
    if(mruToken!=null){
    Windows.Storage.AccessCache.StorageApplicationPermissions.mostRecentlyUsedList.getFileAsync(mruToken).done(
    function (file) {
    var fileUrl = window.URL.createObjectURL(file, { oneTimeOnly: true });
    });
    }
    else{
    //we no longer have the file in the MRU
    }
    

    Good luck!

    Friday, October 17, 2014 12:45 PM
  • Thank for help but after close the app and open app again it not work.
    Friday, October 17, 2014 5:23 PM
  • If you check the MRU list, is the file there?

    If debugging you can get to the line:

    var fileUrl = window.URL.createObjectURL(file, { oneTimeOnly: true });
    

    That means that the file is in the MRU and you have permission to access it, maybe createObjectURL is not the correct method for what you are trying to achieve, but at that point, you have the "file" handle to use

    . Also remember that you need the MRUId to fetch it from the list (I left a comment on that line on my example), you can store this Id wherever you want, in session data, local data or read it from another file under your control (maybe a JSON file)

    Friday, October 17, 2014 6:57 PM