How do display images from your Local App folder after downloading them.

Question

I am trying to display an image after downloading it and saving it to my app local storage.

I am able to successfully download the image and I can create a blob URL for that image and pass that to the imageURL for my image template, but my metro page is unable to display the image.

Code for getting the file URL:

    var _asin;
    var _fileUrl;
    var mainDfd;  

    function downloadAndSaveImage() {
        var dfd = jQuery.Deferred();
       
        try {
            var uriString = getImageUrl(_imageName);
            var fileName = _imageName + ".jpg";
            // Asynchronously create file in pictures folder.
            Windows.Storage.ApplicationData.current.localFolder.createFileAsync(fileName, Windows.Storage.CreationCollisionOption.replaceExisting).then(function (newFile) {
                var uri = Windows.Foundation.Uri(uriString);
                var downloader = new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
                console.log("Using URI: " + uriString);

                // Pass uri and file handle to function and start download asynchronously.
                var promise = downloader.createDownload(uri, newFile);

                // Persist download operation in class.
                promise.startAsync().then(dfd.resolve(newFile),dfd.error);
            });
        } catch (err) {
            console.error("Error in DownloadOperation.start: " + err);
        }
        return dfd.promise();
    }

    function getFileURL() {
        var fileName = __imageName + ".jpg";
        Windows.Storage.ApplicationData.current.localFolder.getFileAsync(fileName).then(function (image) {
            _fileUrl = URL.createObjectURL(image);
            console.log("File URL: " + _fileUrl);
            mainDfd.resolve(_fileUrl);
        });
    }

   
    function getImagePath(imageName) {
        mainDfd = jQuery.Deferred();
        _imageName = imageName;
        downloadAndSaveImage().then(getFileURL, mainDfd.reject);
        return mainDfd.promise();
    }

Answer 1

Hi Anir,

The best way for you to find your problem is to break the problem up into distinct steps to troubleshoot this.

1.  Verify you can display the image from a file in your localFolder that has been previously downloaded (see if the image and file are viable).

2.  Verify the problem is not with jQuery by not using jQuery and staying with WinJS (WinRT) functions.

3.  Step through your code and verify the execution path to see that it is doing what you expect, when you expect it.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

I can verify that the image is there in the local folder by navigating to it in Windows explorer.

I can verify that the image is proper because it will appear if I use that image in my project and then give a relative path to it.

jQuery is working fine, I am able to pass the blobURL successfully to my list which populates my GridLayout template.

The issue is that the file is a .jpg, but unless I store it as a .jpeg it won't show up, so after renaming my file from .jpg to .jpeg it now works and I am able to display the image in my grid layout