Xamarin.forms how to hold image on same page after navigating another page

Question

I have uploaded image on my profile page and I want to hold that image until I logout in xamarin forms.

My image will be lost if I select another page so I want to hold it until I log out.

var profile = new Image { };
profile.Source = "profile.png";
profile.HorizontalOptions = LayoutOptions.StartAndExpand;
profile.VerticalOptions = LayoutOptions.StartAndExpand;

var profiletap = new TapGestureRecognizer();

profiletap.Tapped += async (s, e) =>
{
    var file = await CrossMedia.Current.PickPhotoAsync();
    if (file == null)
        return;
    await DisplayAlert("File Location", file.Path, "OK");

    im = ImageSource.FromStream(() =>
    {
        var stream = file.GetStream();
        //file.Dispose();
        return stream;
    });

    profile.Source = im;

//   await Navigation.PushModalAsync(new PhotoPage(im));
};

profile.GestureRecognizers.Add(profiletap);

Possible duplicate of Xamarin.forms i want to upload image on same page — hvaughan3

hvaughan3 hvaughan3 · Accepted Answer · 2016-06-10T15:25:14

Pages do not get destroyed when navigating to another page and coming back, which is why a page's constructor only gets executed the first time it is shown. So I am not sure what you mean when you say you want to hold that image.

Having said that, you could always assign the entire profile variable to a static global variable in your App class like below so that it stays the same no matter what. Then you would have to assign/initialize the global variable at the correct time.

But again, I am not sure if that is necessary, so you might try to explain more what the issue actually is:

In the App class:

public class App : Application {

    public static Image ProfileImage = new Image {
        Source            = "profile.png",
        HorizontalOptions = LayoutOptions.StartAndExpand,
        VerticalOptions   = LayoutOptions.StartAndExpand
    };
    ....
}

Then in your page:

public class ProfilePage : ContentPage {

    public ProfilePage() {

        ....

        App.ProfileImage.GestureRecognizers.Add(profiletap);
    }

}

Edit: See my answer here for an example of using a plugin to allow the user to choose a photo from their device's camera roll. Once you have the photo path, you can simply use HttpClient to send the image and a base64 string. There are plenty of other example online about how to do that.

Edit #2: After this line of your code:

var file = await CrossMedia.Current.PickPhotoAsync();

You now have the file and the path in file variable. So currently all you are doing is showing the image using ImageSource.FromStream but in order to keep showing the image when you return to the page, you need to also save the image to the device. In order to do that, you will need to write platform specific code in each project and reference that in your shared code. Something like this:

In your iOS and Android project, create a new file (FileHelper_Android.cs and FileHelper_iOS.cs for example) and add the following (the same code can be added to both iOS and Android files, just change the name of the class and file:

using ....;

[assembly: Dependency(typeof(FileHelper_Android))]

namespace YourNamespace.Droid{

    /// <summary>
    /// Responsible for working with files on an Android device.
    /// </summary>
    internal class FileHelper_Android : IFileHelper {

        #region Constructor

        public FileHelper_Android() { }

        #endregion

        public string CopyFile(string sourceFile, string destinationFilename, bool overwrite = true) {

            if(!File.Exists(sourceFile)) { return string.Empty; }
            string fullFileLocation = Path.Combine(Environment.GetFolderPath (Environment.SpecialFolder.Personal), destinationFilename);
            File.Copy(sourceFile, fullFileLocation, overwrite);
            return fullFileLocation;
        }
    }
}

Do the same on iOS and just change the file name. Now in your shared project you need to create IFileHelper.cs like so:

public interface IFileHelper {

    string CopyFile(string sourceFile, string destinationFilename, bool overwrite = true);

}

Finally, in your page you would write the following:

_fileHelper = _fileHelper ?? DependencyService.Get<IFileHelper>();

profiletap.Tapped += async (s, e) =>
{
    var file = await CrossMedia.Current.PickPhotoAsync();
    if (file == null)
        return;
    await DisplayAlert("File Location", file.Path, "OK");

    profile.Source = im;

    imageName = "SomeUniqueFileName" + DateTime.Now.ToString("yyyy-MM-dd_hh-mm-ss-tt");
    filePath  = _fileHelper.CopyFile(file.Path, imageName);

    im = ImageSource.FromFile(filePath)

//   await Navigation.PushModalAsync(new PhotoPage(im));
};

Above, once the user chooses the file, we copy that file locally and the we also set your im variable to the new local file path, which gets returned from the IFileHelper.CopyFile method.

You still need to handle the case when the user comes back to the page or turns the app off and on again. In that situation, you need to load the saved image path. I would suggest either saving the image path into the DB, unless the user will only ever have a single profile image, then you could always just load that same path and filename. Let me know if you still have issues.

Xamarin.forms how to hold image on same page after navigating another page

1 Answers