Click here to Skip to main content
15,849,829 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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.
HTML
<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.
C#
//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.
HTML
<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
Posted
Comments
Member 11528472 23-Apr-15 5:27am    
did you solve it?
Sunasara Imdadhusen 23-Apr-15 5:31am    
Yes! i have resolved the issue :)
Member 11528472 24-Apr-15 4:35am    
please how?

Sunasara, I am doing something similar with the media-capture plugin and got the photo uri (something like this: /CapturedImagesCache/WP_20150424_001.jpg). the plugin creates a folder called CaptureddImagesCache and save the pic in there.
Then I simply set my image this way:

path = "/CapturedImagesCache/WP_20150424_001.jpg";
var image = document.getElementById('img1');
image.src = path;

Did you try with video as well?

I am desperated about making it work...

Thanks
 
Share this answer
 
Comments
Sunasara Imdadhusen 24-Apr-15 4:59am    
Can you please give me your code here?
C#
function recordVideo() {
    console.log("recordVideo");
    // start video capture
    flagMedia = 'v';
    navigator.device.capture.captureVideo(captureSuccess, captureError, { limit: 2 });
}


function takePicture() {
    flagMedia = 'p';
    console.log("takePicture");
    navigator.device.capture.captureImage(captureSuccess, captureError, { limit: 2 });
}

<pre>// capture callback
var captureSuccess = function (mediaFiles) {
 
    var i, path, len;
    for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        path = mediaFiles[i].fullPath;
        // do something interesting with the file       
    }
 

    switch (flagMedia) {
        case 'a':
            audioArray.push(path);
            break;

        case 'v':
            videoArray.push(path);
            console.log("pushed video, path: " + path);
            var video = document.getElementById('idVideo');
            var pathVideo = "ms-resource://" + path;
            console.log("pathVideo: " + pathVideo);
            video.src = pathVideo;
            break;

        case 'p':
             fotoArray.push(path);        
            var image = document.getElementById('img1');
            console.log("imageData: " + path);
            image.src = path;
 
            break;

        default:
        break;
    }

};

// capture error callback
var captureError = function (error) {
    navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};

</pre>


in the video case, I tried with path and then with anteponing some uri schema such as 1. ms-app://
2. ms-appdata://
3. ms-resource://
but with no luck...
 
Share this answer
 
Comments
Sunasara Imdadhusen 24-Apr-15 5:12am    
I need following
- Code that you written at server side for downloading Image or Video
- Are able to download images or video in application folder?
- How you verified it is downloaded?
Member 11528472 24-Apr-15 5:16am    
I did not download it from a server because on the client I am recording a video or taking a picture and using the cordova media-capture official plugin, source code is here: https://github.com/apache/cordova-plugin-media-capture/tree/master/src/wp/UI, after picking the resource it is saved to the isolated storage using c# (inside the plugin code)
Member 11528472 24-Apr-15 5:18am    
yes, I verified it is in my isolated storage via windows power tool
Sunasara Imdadhusen 24-Apr-15 5:46am    
I have added solution code.
Member 11528472 24-Apr-15 6:59am    
Sunasara, please could you help me and make it work with video as well?
Hello,

Following are my solution: This solution will works only, when you save your file at mentioned location:

I am saving file at
C#
ApplicationData.Current.LocalFolder;
using server code and displaying at client (browser) side using
HTML
<img src="c://data//users//defapps//logo.png" />


C# Code
C#
// Save a downloaded images to the app’s local folder.
        public async Task saveImage(Stream photoToSave, string modeuleName, string menuID, string imageURL)
        {
            StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
            StorageFile photoFile = null;
            try
            {
                string ext = Path.GetExtension(imageURL.Trim());
                photoFile = await localFolder.CreateFileAsync(modeuleName + ext, CreationCollisionOption.ReplaceExisting);
                using (var photoOutputStream = await photoFile.OpenStreamForWriteAsync())
                {
                    await photoToSave.CopyToAsync(photoOutputStream);
                    totalImagesToDownload--;
                    await sendResponse();
                    //--Debug.WriteLine("-----------Image Downloaded:" + modeuleName + ext);
                }
            }
            catch (Exception e)
            {
                totalImagesToDownload--;
                Debug.WriteLine(e.Message);
            }
            //return photoFile.Path;
        }


HTML Code
HTML
<img src="c://data//users//defapps//logo.png" />
 
Share this answer
 
Comments
aarif moh shaikh 24-Apr-15 6:15am    
good one.... :)
Sunasara Imdadhusen 24-Apr-15 6:16am    
Thank you very much :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900