📦

ファイルを受け渡す (Blazor Server / MudBlazor)

2025/02/25に公開

はじめに

この記事は、以下を下敷きにしています。

https://zenn.dev/tetr4lab/articles/6b1a70ca7800ed

やりたいこと

CSVを取り込んだり、画像を貼り付けるなど、サーバ側でファイルを受け取りたい場合があります。

実装

UIは、MudFileUploadを使用します。
ファイルは、IBrowserFileとして受け取られます。

https://mudblazor.com/components/fileupload#api

https://learn.microsoft.com/ja-jp/dotnet/api/microsoft.aspnetcore.components.forms.ibrowserfile?view=aspnetcore-8.0

使用例

以下の例では、画像ファイルをインラインで埋め込んで表示しています。
閲覧時は、サムネイル画像へホバーすることで原寸で表示します。

https://github.com/tetr4lab/Prices/blob/5f688b20d04438fd676e7fbc9a85b8954cdb7a0c/Prices/Prices/Components/Pages/ProductList.razor#L51-L60

編集時は、MudFileUploadのボタンイメージとして使います。
画像が未設定なら、テキストボタンになります。

https://github.com/tetr4lab/Prices/blob/5f688b20d04438fd676e7fbc9a85b8954cdb7a0c/Prices/Prices/Components/Pages/ProductList.razor#L86-L96

ボタンが押されたら、ストリームからByte配列に取り込んでDBへ収蔵します。

https://github.com/tetr4lab/Prices/blob/5f688b20d04438fd676e7fbc9a85b8954cdb7a0c/Prices/Prices/Components/Pages/ProductList.razor#L180-L201

この例の詳細は以下をご覧ください。

https://github.com/tetr4lab/Prices

おわりに

お読みいただきありがとうございました。
執筆者は、Blazor、ASP.NETなど諸々において初学者ですので、誤りもあるかと思います。
お気づきの際は、是非コメントや編集リクエストにてご指摘ください。
あるいは、「それでも解らない」、「自分はこう捉えている」などといった、ご意見、ご感想も歓迎いたします。

Discussion