Save image locally and then save file path as a string into a database in Xamarin Forms - xamarin

Question

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.

Answer 1

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!