Home > OS >  Save image locally and then save file path as a string into a database in Xamarin Forms
Save image locally and then save file path as a string into a database in Xamarin Forms

Time:04-09

How do i after i take a picture/ select an image (either will overwrite the same image variable regardless), save the image locally and then save the file path as a string into a variable to be inserted into an existing SQLite db.

CodePudding user response:

I had the same exact issue- Here's how I got it to work

First, in your model where you've created the columns for your tables, make sure there is a property for the string that will be the imagepath

    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }
    public string Image { get; set; }

Then we need a method to upload and save your Image locally and another to get the file path and set it to a string. Assuming this will be in your code-behind, first add these:

public static string photofilename;
    public static string imagePath;
    static SQLiteConnection db;
    YourModel yourmodel = new YourModel(); 

Then the LoadPhoto method

async void LoadPhotoAsync(FileResult photo)
    {
        // canceled
        string PhotoPath;
        if (photo == null)
        {

            PhotoPath = null;
            return;
        }
        // save the file into local storage
        var newFile = Path.Combine(FileSystem.AppDataDirectory, photo.FileName);
        using (var stream = await photo.OpenReadAsync())
        using (var newStream = File.OpenWrite(newFile))
            await stream.CopyToAsync(newStream);

        PhotoPath = newFile;

    }

Then a method to upload/save the photo (In this case I'm having the user upload from the device) which I have attached to an Upload Image button. In this method, I display the image to the Image in my XAML called ImageViewer, but this might not be necessary for you.

async void Image_ClickedAsync(System.Object sender, System.EventArgs e)
    {
        try
        {
            var photo = await MediaPicker.PickPhotoAsync();
            LoadPhotoAsync(photo);
            photofilename = photo.FileName;
            imagePath = Path.Combine(FileSystem.AppDataDirectory, photofilename);


        }
        catch (FeatureNotSupportedException fnsEx)
        {
            // Feature is not supported on the device
        }
        catch (PermissionException pEx)
        {
            // Permissions not granted
        }
        catch (Exception ex)
        {
            Console.WriteLine($"CapturePhotoAsync THREW: {ex.Message}");
        }
        ImageViewer.Source = imagePath;
        ImageViewer.IsVisible = true;

    }

What this has done is open up MediaPicker, Allow the user to choose an Image and set the Image Path to the string imagePath. In my case here, I also have "ImageViewer" which is an Image in my XAML used to display the image, but we're not done yet- we haven't yet saved it to your SQLite db. Here's the method I used attached to a "Save" button-

        private void SaveEvent(object sender, EventArgs e)
    {
        var databasePath = Path.Combine(FileSystem.AppDataDirectory, "yourdb.db");
        db = new SQLiteConnection(databasePath);
        yourmodel.Image = imagePath;
        db.Insert(yourmodel);
    }

Then, assuming your using ListView or something bound to the Tables in the db, you'll have an image in your XAML like so

<Image  HeightRequest="340" WidthRequest="550"   x:Name="Image" Source="{Binding Image}"/>

and that should do the trick- Let me know if this works for you!

  • Related