MauiにてSQliteのデータベースに画像が保存されません。

Question

問題の概要

実現したいこと

ファイルピッカーで選択した画像を保存ボタンを押下して画像のバイナリデータを「gazouByte.db3」に保存する。
「Get All GazouList」を押下してdb内に存在する画像の「Id」「ファイル名」「拡張子」をCollectionViewを用いて「MainPage」に表示する。

問題点

「gazouByte.db3」にバイナリデータが保存されない。
「Get All GazouList」を押下しても「got all file list」しか表示されず、「Id」「ファイル名」「拡張子」が表示されない。
※Table[("gazouByte")]は作成されていることを「DB Browser for SQlite」で確認しています。
[1]: https://i.sstatic.net/4aow2gVL.png

再現手順

問題が発生する具体的な手順。

1. VisualStudio2022にてWindowsMachineを用いてデバッグを開始する。
2. 「ファイルを選択する」を押してファイルピッカーの起動を行う。そこから画像（jpg/png）を選択。
3. 「ファイルを選択する」の下に画像のプレビューを確認
4. 「ファイルを保存する」を押し、赤字で「file saved」が表示されることを確認。
5. 「DB Browser for SQlite」でデータ閲覧を行う。テーブルは作成されているが、データが保存されていない。

コード

using WorkReview.Models;
using System.Collections.Generic;
using Microsoft.Maui.Controls;
using WorkReview.ViewModels;
using System.Runtime.CompilerServices;

namespace WorkReview.Views
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new MainViewModel();
        }
        

        public void OnGetAllGazouClicked(object sender, EventArgs args)
        {
            List<GazouByte> gazouByte = App.GazouByteRepo.GetAllGazouBytes();
       
            statusMessage.Text = "got all file list";

        }


        public void OnFileSaveClicked(object sender, EventArgs args)
        {

            
            (BindingContext as MainViewModel).SaveGazouToDataBase(); //BindingVontextのインスタンスをもちいて.Save~メソッドを実行している
            statusMessage.Text = "file saved";

        }

        public async void OnFileSelectClicked(object sender, EventArgs args)
        {
            try
            {
                var result = await FilePicker.PickAsync();
                var fileExtension = result.ContentType;
                var fileName = result.FileName;
                if (result != null)
                {
                    if (result.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||
                        result.FileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))
                    {
                           
                        using (var stream = await result.OpenReadAsync())
                        {
                            using (var memoryStream = new MemoryStream())///using(var)はUsingステートメント,{}内の処理が終わったときにリソースが開放される
                            {
                                await stream.CopyToAsync(memoryStream);　//memoryStreamに保存されたデータをViewModelの該当箇所へ送る
                                (BindingContext as MainViewModel).gazouExtension = fileExtension;
                                (BindingContext as MainViewModel).gazouName = fileName;
                                (BindingContext as MainViewModel).gazouBinary = memoryStream.ToArray();
                                var previewStream = new MemoryStream(memoryStream.ToArray());
                                userPreview.Source = ImageSource.FromStream(() => previewStream);
                            }
                        }
                    }
                    else
                    {
                        statusMessage.Text = "Unsupported file type.";
                    }
                }
            }
            catch (Exception ex)
            {
                statusMessage.Text = $"Error selecting file: {ex.Message}";
            }
        }
    }
}

Repositryはこちら

using SQLite;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WorkReview.Models;

namespace WorkReview.Models
{
    public class GazouByteRepositry
    {
        string _gazoudbPath;
        public string GazouStatusMessage { get; set; }

        private SQLiteConnection gazouconn;

        public GazouByteRepositry(string gazoudbPath)
        {
            _gazoudbPath = gazoudbPath;
        }

        private void Init() //dbに接続後テーブル作成 create table when connect db.3
        {
            if (gazouconn is not null)
                return;
            gazouconn = new SQLiteConnection(_gazoudbPath);

            gazouconn.CreateTable<GazouByte>();

        }

        public void AddNewGazouByte(string gazouName, byte[] gazouBinary, string gazouExtension)//画像データをDBへ挿入 add image data to db.3
        {
            ArgumentNullException.ThrowIfNull(gazouName, nameof(gazouExtension));
            ArgumentNullException.ThrowIfNull(gazouBinary, nameof(gazouBinary));
            ArgumentNullException.ThrowIfNull(gazouName, nameof(gazouName));
            int gazouResult = 0;
            try
            {
                Init();

                gazouResult = gazouconn.Insert(new GazouByte { GazouName = gazouName, GazouBinary = gazouBinary, GazouExtension = gazouExtension });
                Console.WriteLine($"Insert result: {gazouResult}");
                GazouStatusMessage = string.Format("{0} record(s) added (GazouName: {1})", gazouResult, gazouName);
            }
            catch (Exception ex)
            {
                GazouStatusMessage = string.Format("Failed to add {0}. Error: {1}", gazouName, ex.Message);
            }
        }
        public List<GazouByte> GetAllGazouBytes()//テーブルを取得 get table then create list for controll-view .MainPage
        {
            try
            {
                Init();
                return gazouconn.Table<GazouByte>().ToList();
            }
            catch (Exception ex)
            {
                GazouStatusMessage = string.Format("Failed to retrieve data .{0}", ex.Message);
            }
            return new List<GazouByte>();
        }


        

    }
}

テーブルはこちら

using SQLite;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using CommunityToolkit;

namespace WorkReview.Models;
[Table("gazouByte")]
public class GazouByte
{
[PrimaryKey, AutoIncrement]
public int Id { get; set; }
public string GazouName { get; set; }
public byte[] GazouBinary { get; set; } //画像のバイナリ用 Binary fo image to db.3
public string GazouExtension { get; set; }

}

期待している動作

1. デバッグを開始した段階でテーブル「"gazouByte"」がappdataに作成される。
2. 「ファイルを選択する」を押すことによってファイルピッカーが起動、そこから画像ファイルを選択。
3. ファイルピッカーが閉じると「ファイルを保存する」の下に選択した画像がプレビュー表示される。
4. その後、「ファイルを保存する」によってMemoryStreamの画像が「gazouByte.db3」へ保存され、「Get All GazouList」を押下することで「gazouByte.db3」に保存されたファイルの「Id」「ファイル名」「拡張子」がCollectionViewに表示される。

試したこと

1. GazouByteRepositry.AddNewGazouByte メソッドで例外処理が正しく行われていることを確認しました。
2. Table[("gazouByte")]が作成されていることを「DB Browser for SQlite」で確認しました。
3. 画像を選択し、保存ボタンを押した後、再度画像を選択せずに保存ボタンを押すとSystem.NullReferenceExceptionが発生することを確認しました。

エラーメッセージやログ

　　
画像は保存されませんでしたが、エラーメッセージが出ることはありませんでした。

環境

Windows 11 Home (23H2)
VisualStudio Community 2022 preview 17.11.0 Preview 4.0
Microsoft.Maui.Controls 8.0.80
Microsoft .NET SDK 8.0.107(x64)
SQlitePCLRaw.bundle_green 2.1.9
sqlite-net-pcl 1.9.172
CommunityToolkit.Mvvm 8.2.2

補足情報

コードの全体は次のURLの「WorkReview/WorkReview/」の中にあります

https://github.com/rasukuosu/WorkReview.git

Comments

[TN8001]

[c# - MauiにてSQliteのデータベースに画像が保存されません。 - スタック・オーバーフロー](https://ja.stackoverflow.com/questions/99871)

> やむを得ず複数のサイトに質問を投稿された場合は、質問内容にマルチポストをする理由を書き、他のサイトの投稿へのリンクを貼ってください。 また、解決した際には必ずteratail及びすべての投稿に解決した旨と、どのように解決したかを記載してください。
[ヘルプ｜他のサービスにも質問投稿をしたい（してしまった）](https://teratail.com/help#posted-otherservice)

削除しろと言っているのではありません。
回答もコメントもつかない以上、わたしでも同様にすると思います。
ただマナーとして上記は守っていただきたいです^^

[NTanaka]

ご指摘ありがとうございます。m(_ _)m
指摘していただいた投稿を削除しました。
次回以降は同様のことがないように努力します。

Answer 1

「gazouByte.db3」にバイナリデータが保存されない。

例外を握り潰さないでください（少なくともDebug.WriteLine等で分かるようにしないと、まともにデバッグもできません）

ファイルはできるのにレコードが追加されないということは、gazouconn.Insertが失敗しているんでしょう。

提示コードだけでは原因は見えませんが、GazouByteRepositryが２つできています。
MainViewModelが使うGazouByteRepositryは、_gazoudbPathが（フルパスでなく）ファイル名だけで開けずに例外を出しています。

とりあえずこうでもすればデータは入ります（どうすべきかはわかりませんが）

public partial class MainViewModel : ObservableObject
{
    private GazouByteRepositry _gazouByteRepositry;

    public MainViewModel()
    {
        //_gazouByteRepositry = new GazouByteRepositry("gazouByte.db3");
        _gazouByteRepositry = App.GazouByteRepo;
    }

何故ファイルだけはできるかというと、↓に入ったときは（フルパスが入っている）App.GazouByteRepoを直接使っているためです。

public void OnGetAllGazouClicked(object sender, EventArgs args)
{
    List<GazouByte> gazouByte = App.GazouByteRepo.GetAllGazouBytes();
    statusMessage.Text = "got all file list";
}

---

「Get All GazouList」を押下しても「got all file list」しか表示されず、「Id」「ファイル名」「拡張子」が表示されない。

CollectionViewに何も入れていないので当然です。MainViewModelにコレクションを用意してバインドしてください。

バインドについてはこの辺りを確認してください。
データ バインディングの基礎 - .NET MAUI | Microsoft Learn
データ バインディングと MVVM - .NET MAUI | Microsoft Learn

Toolkitの使い方はこの辺りを確認してください。
MVVM Toolkit の概要 - Community Toolkits for .NET | Microsoft Learn

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
  x:Class="WorkReview.Views.MainPage"
  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:models="clr-namespace:WorkReview.Models"
  xmlns:viewModels="clr-namespace:WorkReview.ViewModels"
  Title="MainPage"
  x:DataType="viewModels:MainViewModel">
  <ContentPage.BindingContext>
    <viewModels:MainViewModel />
  </ContentPage.BindingContext>
  <Grid
    Padding="5"
    ColumnSpacing="10"
    RowDefinitions="Auto,Auto,Auto,Auto,Auto,*"
    RowSpacing="10">
    <Label Text="{Binding StatusMessage}" TextColor="Red" />
    <Button Grid.Row="1" Command="{Binding GetAllGazouCommand}" Text="Get All GazouList" />
    <CollectionView Grid.Row="2" ItemsSource="{Binding GazouBytes}">
      <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:GazouByte">
          <Grid ColumnDefinitions="*,2*,*">
            <Label Text="{Binding Id}" TextColor="{StaticResource Primary}" />
            <Label Grid.Column="1" Text="{Binding GazouName}" TextColor="{StaticResource Primary}" />
            <Label Grid.Column="2" Text="{Binding GazouExtension}" TextColor="{StaticResource Primary}" />
          </Grid>
        </DataTemplate>
      </CollectionView.ItemTemplate>
    </CollectionView>
    <Button Grid.Row="3" Command="{Binding FileSaveCommand}" Text="ファイルを保存する" />
    <Button Grid.Row="4" Command="{Binding FileSelectCommand}" Text="ファイルを選択する" />
    <Image Grid.Row="5" Source="{Binding UserPreview}" />
  </Grid>
</ContentPage>

namespace WorkReview.Views;

public partial class MainPage : ContentPage
{
    public MainPage() => InitializeComponent();
}

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using WorkReview.Models;

namespace WorkReview.ViewModels;

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty] private string? statusMessage;
    [ObservableProperty] private List<GazouByte>? gazouBytes;
    [ObservableProperty] private ImageSource? userPreview;

    private string? gazouName;
    private byte[]? gazouBinary;
    private string? gazouExtension;

    public MainViewModel() { }

    [RelayCommand]
    private void OnGetAllGazou()
    {
        GazouBytes = App.GazouByteRepo.GetAllGazouBytes();
        StatusMessage = "got all file list";
    }

    [RelayCommand]
    private void OnFileSave()
    {
        if (gazouName == null) return;

        var gazouByte = new GazouByte
        {
            GazouName = gazouName,
            GazouBinary = gazouBinary!,
            GazouExtension = gazouExtension!,
        };
        App.GazouByteRepo.AddNewGazouByte(gazouByte);
        StatusMessage = "file saved";
    }

    [RelayCommand]
    private async Task OnFileSelect()
    {
        try
        {
            var result = await FilePicker.PickAsync();
            if (result == null) return;

            var fileName = result.FileName;
            if (fileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||
                fileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))
            {
                using (var stream = await result.OpenReadAsync())
                using (var memoryStream = new MemoryStream())
                {
                    await stream.CopyToAsync(memoryStream);
                    gazouName = fileName;
                    gazouBinary = memoryStream.ToArray();
                    gazouExtension = result.ContentType;

                    var previewStream = new MemoryStream(memoryStream.ToArray());
                    UserPreview = ImageSource.FromStream(() => previewStream);
                }
            }
            else
            {
                StatusMessage = "Unsupported file type.";
            }
        }
        catch (Exception ex)
        {
            StatusMessage = $"Error selecting file: {ex.Message}";
        }
    }
}

using SQLite;
using System.Diagnostics;

namespace WorkReview.Models;

public class GazouByteRepositry
{
    private string gazoudbPath;

    public GazouByteRepositry(string gazoudbPath)
    {
        this.gazoudbPath = gazoudbPath;

        using var gazouconn = new SQLiteConnection(gazoudbPath);
        gazouconn.CreateTable<GazouByte>();
    }

    public void AddNewGazouByte(GazouByte gazouByte)
    {
        ArgumentNullException.ThrowIfNull(gazouByte);

        try
        {
            using var gazouconn = new SQLiteConnection(gazoudbPath);
            var gazouResult = gazouconn.Insert(gazouByte);

            Debug.WriteLine($"Insert result: {gazouResult}");
            Debug.WriteLine($"{gazouResult} record(s) added (GazouName: {gazouByte.GazouName})");
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Failed to add {gazouByte.GazouName}. Error: {ex.Message}");
        }
    }

    public List<GazouByte> GetAllGazouBytes()
    {
        try
        {
            using var gazouconn = new SQLiteConnection(gazoudbPath);
            return gazouconn.Table<GazouByte>().ToList();
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Failed to retrieve data .{ex.Message}");
        }
        return [];
    }
}

---

例外処理はもっと慎重に考えてもらいたい（リカバリーできるものだけ個別にキャッチ等）が、とりあえず形は変えずに最低限メッセージだけは出した。
「ViewModelでダイアログ出すのはどうなんだ？」ってのはあるが本題ではないので^^;
ほかにも気になる点はあるが、あまり変えても何なんでこのくらいで...

Comments

[NTanaka]

TN8001さん回答ありがとうございます。
解決しました。
おかげさまで丁寧な回答からエラー理由もわかり、大変勉強になりました。
またここから新しい機能を追加したりできそうです。
本当にありがとうございました。