How to access isolated storage file from HTML or Javascript for Windows Phone and PhoneGap Application

Question

I am using PhoneGap to develop application for Windows, Android and iOS platform.

I have one problem and need expert assistance from you guys.

I have created one plugin for Windows Phone. Plugin is basically download images from URL and stored in isolated storage folder inside Downloads folder this is working successfully.

Now my problem is does there any way to access isolated storage files from javascript. for example i have downloaded one image and stored in isolated storage ("Download/logo.png) now i have to set this image to my html image source. e.g. <img src="ms-appdata:///local/Downloads/logo.png"/>

But couldn't get success. i have tried several way without luck.

I have using following code to save files in isolated storage.

//This code is working fine for saving image from url to isolated storage
    IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication();
                //Create directory if does not exists
                if (ISF.DirectoryExists(IMAGE_FOLDER_PATH) == false)
                {
                    Debug.WriteLine("Directory created");
                    ISF.CreateDirectory(IMAGE_FOLDER_PATH);
                }

                WebClient client = new WebClient();
                string modeuleName = hamBurgerMenu[MODULENAME_COLUMN_INDEX];
                client.OpenReadCompleted += (s, e) =>
                {
                    if (e.Error == null)
                    {
                        Deployment.Current.Dispatcher.BeginInvoke(() =>
                        {
                            using (var isoStore = IsolatedStorageFile.GetUserStoreForApplication())
                            {
                                string fullPath = Path.Combine(IMAGE_FOLDER_PATH, modeuleName + ".png");
                                var bi = new BitmapImage();
                                bi.SetSource(e.Result);
                                var wb = new WriteableBitmap(bi);
                                using (var isoFileStream = isoStore.CreateFile(fullPath))
                                {
                                    var width = wb.PixelWidth;
                                    var height = wb.PixelHeight;
                                    Extensions.SaveJpeg(wb, isoFileStream, width, height, 0, 100);
                                }
                            }
                        });
                    }
                };
                client.OpenReadAsync(new Uri(imageURL, UriKind.Absolute));

I have tried following solutions but couldn't get success at all.

  <img src="file:///C:|/Data/Users/DefApps/AppData/{9DB..............0CC}/local/Downloads/logo.png"/>
                <img src="ms-appdata:///local/Downloads/logo.png"/>
                <img src="ms-appx:///Downloads/logo.png"/>

Your comments or suggestion would be highly appreciated! Thanks & Regards, Imdadhusen

yes. I have resolved the issue after doing lot of R&D. Please see below solution for the mentioned issue. Hope this will help you. — imdadhusen
Your suggestion would be great. I will create a custom plugin for file download and save in isolated storage file very soon, and also will upload at github. Thanks for nice suggestion. — imdadhusen

imdadhusen imdadhusen · Accepted Answer · 2014-12-02T06:57:42

I have resolved the issue using below code. The purpose of posting answer is it might help other people who are searching for the same.

Now i am saving downloaded images at app's Local Folder.

Following function will download image from live URL.

private void downloadImage(string imageURL, string[] hamBurgerMenu)
        {
            string ext = Path.GetExtension(imageURL.Trim());
            try
            {
                WebClient client = new WebClient();
                client.OpenReadCompleted += (s, e) =>
                {
                    if (e.Error == null)
                    {
                        Deployment.Current.Dispatcher.BeginInvoke(async () =>
                        {
                            await saveImage(e.Result, imageURL);
                        });
                    }
                    else
                    {
                       //Download Image Not Found
                    }
                };
                client.OpenReadAsync(new Uri(imageURL, UriKind.Absolute));
            }
            catch (Exception e)
            {
                //Download Error
            }
        }

Now i am saving the downloaded image using below function

// Save a downloaded images to the app’s local folder.
        public async Task saveImage(Stream photoToSave, string imageURL)
        {
            StorageFile photoFile = null;
            try
            {
                string ext = Path.GetExtension(imageURL.Trim());
                photoFile = await localFolder.CreateFileAsync(ext, CreationCollisionOption.ReplaceExisting);
                using (var photoOutputStream = await photoFile.OpenStreamForWriteAsync())
                {
                    await photoToSave.CopyToAsync(photoOutputStream);
                }
            }
            catch (Exception e)
            {
                //Error while saving file
            }
        }

Now we can access the file using following path at HTML page or Client side script

Important:- <APP_ID> e.g. {8A027331-C7348-182D188-8A02473-1247801} should be replace with your Application ID. It will be 32 digit key.

<img src="C:\\Data\\Users\\DefApps\\AppData\\<APP_ID>\\local\\ Mobile.jpg" alt="Mobile.jpg" />

How to access isolated storage file from HTML or Javascript for Windows Phone and PhoneGap Application

1 Answers