locked
local storage image display

    Question

  • Hi

    I have a json data file which is stored on my local computer, I then am able to update the image location of items in that file to point to my local storage folder, so it updates the file to point to "c:\documents\imageFolder" for example.

    When i process the file, so that the images can display in a listview, i update the location using URL.createObjectURL(imageFile, {oneTimeOnly: true });

    so far i think i am doing this correctly, but it seems that not all the images, are done being pointed to the location created by the above code, and that inturn causes the app to "break"

    if i use an item with less images no problem, just with any amount over 5 is causing exceptions.

    Am i correct in using url.createobjectURL method?

    Is there a way to update the src of the image tag only once all images have been pointed to the correct place, I have tried using rendercomplete, but that just gives another exception.

    I create the itemtemplate in javascript, as there are extra even listeners i wanted to add on to the image being displayed.

    some code if it might help:

    var OfflineTemplate = WinJS.Utilities.markSupportedForProcessing(function OfflineTemplate(itemPromise) {
        return itemPromise.then(function (currentItem) {
            var result = document.createElement("div");
    ...the rest of the elements are added, other div tags and the img tag

    the above is located right at the top of the .js page

    in another function i get the information from the file and update the url of the image, then set the itemdatasource and the itemtemplate to point to the above function in the ".done" section 

    These images not loading is driving me insane


    Sasha

    Wednesday, October 30, 2013 9:57 PM

Answers

  • Hi Jeff

    I managed to get it to work :)

    It was the promises that were causing the exception.

    Thanks for your help.

    It was most probably a newbie mistake, I had not set up the promises for the getFileAsync() method correctly, and I was calling the WinJS.Promise.join at the wrong point.

    Once i added the following:

    promiseArray.push(imageFolder.getFileAsync(imgFileName).then(function (imageFile) {
                                        item.ImageUrl = URL.createObjectURL(imageFile, { oneTimeOnly: true });
                                        return item;
                                    }));

    and placed the following in the correct place (which in my case was inside the getfolderasync() method):

     WinJS.Promise.join(promiseArray).
                               then(function () {
                                   var thisListView = document.getElementById("offlineListItems").winControl;
                                   thisListView.itemDataSource = offline.dataSource;
                                   thisListView.itemTemplate = MyOfflineTemplate;
    
                               });

    I no longer got the operation aborted error.

    Sasha


    • Marked as answer by Jamles HezModerator Saturday, November 9, 2013 12:39 AM
    • Edited by Sasha_za Monday, November 11, 2013 2:33 PM added solution
    Friday, November 8, 2013 1:13 PM

All replies

  • I am not sure what you mean by ' causes the app to "break"'

    Is it that certain pictures cannot be displayed (perhaps the wrong format or corrupt files)?

    Can you post an application that reproduces the error?


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Friday, November 1, 2013 5:58 PM
    Moderator
  • Hi Jeff

    sorry for replying so late, I get an operation aborted error, and it happens on this line of the code:

    img.src = currentItem.data.ImageUrl;

    I just got swamped with some other work, but will try to get a small application together that will reproduce the error.

    I have checked the images, and nothing is wrong with them

    Wednesday, November 6, 2013 10:27 PM
  • hi Jeff

    would it be possible for me to send you my app, just to check what funny things I am doing, I have a feeling it is most probably something to do with the nested "functions" (could be using the wrong terminology), and its promises.

    Sasha

    Thursday, November 7, 2013 12:00 PM
  • Sure Sasha,

    You can share it on SkyDrive and then send me the link from here:

    http://blogs.msdn.com/jpsanders/contact.aspx

    Jeff


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Thursday, November 7, 2013 1:07 PM
    Moderator
  • Hi Jeff

    I managed to get it to work :)

    It was the promises that were causing the exception.

    Thanks for your help.

    It was most probably a newbie mistake, I had not set up the promises for the getFileAsync() method correctly, and I was calling the WinJS.Promise.join at the wrong point.

    Once i added the following:

    promiseArray.push(imageFolder.getFileAsync(imgFileName).then(function (imageFile) {
                                        item.ImageUrl = URL.createObjectURL(imageFile, { oneTimeOnly: true });
                                        return item;
                                    }));

    and placed the following in the correct place (which in my case was inside the getfolderasync() method):

     WinJS.Promise.join(promiseArray).
                               then(function () {
                                   var thisListView = document.getElementById("offlineListItems").winControl;
                                   thisListView.itemDataSource = offline.dataSource;
                                   thisListView.itemTemplate = MyOfflineTemplate;
    
                               });

    I no longer got the operation aborted error.

    Sasha


    • Marked as answer by Jamles HezModerator Saturday, November 9, 2013 12:39 AM
    • Edited by Sasha_za Monday, November 11, 2013 2:33 PM added solution
    Friday, November 8, 2013 1:13 PM