Friday, May 15, 2015

WP App part 5 - "the Manual Automatic" - Copy Images to Local App Folder

Goal:
Create the functionality to use images from the phone / take image with my phone for my Windows Phone App 'The Manual Automatic" 



Previous parts:


First setup in part 1:
http://sometimesiliketopretend.blogspot.com/2014/09/windows-phone-app-part-1-manual.html

The setup of the DataModel in part 2:
http://sometimesiliketopretend.blogspot.com/2014/09/wp-app-part-2-manual-automatic-setting.html

Using the FilePicker in part 3:

http://sometimesiliketopretend.blogspot.com/2014/11/wp-app-part-3-manual-automatic-use.html

Saving and Loading images from and to a byte array in part 4:
http://sometimesiliketopretend.blogspot.com/2015/02/wp-app-part-4-manual-automatic-saving.html

Since in part 4 my efforts to store the images in a byte array backfired I decided to store the images in the local folder of my app.

In this post the goal would be to create a copy of the original image, store it in the local storage and store the imagename in my datamodel.

Step one - Modify the datamodel
In my datamodel I leave out the byte array and put in a string to store the only image name:



When storing the manual the Name of the image is saved.
In my ImageHelpers class I defined the public static variable for the location where I want to store the images and one with the default image.



Also two methods are available for showing an image from a RelativePath and one for converting a StorageFile to a BitmapImage

I used this page:

http://stackoverflow.com/questions/14883384/displaying-a-picture-stored-in-storage-file-in-a-metroapp


Step two - Copy the image
I want the images to be put in a seperate folder in my local app storage.

For some general function when working with the files and directory I create a Helper class named FileHelpers.

I have got the methods here, one to check if a file exists and one to check if a directory exists.



I used this page:
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/570fcd6b-3270-4c47-b796-cf6bc5adb600/how-to-store-the-image-into-the-local-file-system

When adding a Manual, I check if the Directory is available, if not I create it and set the 'localFolder' to that directory:


//Create a copy of the picture
//Check for directory
bool folderExists = await FileHelpers.DoesFolderExistAsync(ImageHelpers.imagesFolder);
if (!folderExists)
{
    await Windows.Storage.ApplicationData.Current.LocalFolder.CreateFolderAsync(ImageHelpers.imagesFolder);
}

//change to the image subfolder

StorageFolder localFolder = await Windows.Storage.ApplicationData.Current.LocalFolder.GetFolderAsync(ImageHelpers.imagesFolder);



Then I check if the file I want to copy does not already exists (the name) and if it doesn't exist I copy the file

//check for fileexists in the subfolder
bool duplicateCheck = await FileHelpers.DoesFileExistAsync(imageFile.Name, localFolder);

//If file does not exists copy it
if (!duplicateCheck)
{
    await imageFile.CopyAsync(localFolder);
    //bmp = await ImageHelpers.LoadImage(imageFile);
    storeImageName = imageFile.Name;

}


If th file exists I add a timestamp to the filename and rename the file, This rename action also copies the file

else
{
    //Since the source is readonly, put it in a temp file, because we want to rename it.
    StorageFile tempFile = await localFolder.GetFileAsync(imageFile.Name);

    //Alter the Name with a unique timestamp number
    DateTime unixEpoch = new DateTime(1970, 1, 1);
    DateTime currentDate = DateTime.Now;
    long totalMiliSecond = (currentDate.Ticks - unixEpoch.Ticks) / 10000;
    string fileName = origDisplayName + "_" + totalMiliSecond.ToString() + tempFile.FileType.ToString();

    //The RenameAsync line also copies the file
    await tempFile.RenameAsync(fileName);
    storeImageName = fileName;

}

And finally I call the AddManual method in the Datamodel:


App.DataModel.AddManual(manualNameTextBox.Text, manualDescriptionTextBox.Text, storeImageName);
 
Step three - Testing
In order to test this I first used the command line tool to check the Isolated Storage of my app.
I used: https://msdn.microsoft.com/en-us/library/windows/apps/hh286408(v=vs.105).aspx to check the file from a command line.

But then I came across this nifty tool: https://isostorespy.codeplex.com/
Does the same but then with a nice GUI :)
So I checked if the directory was created, the file was copied and if, in case of duplicate names, the name was altered correctly. 

Works like a charm, very nice tool.



Next post will be on completing the app and various modifications I did.


GNZ.