スポンサーリンク

Blazor Server ファイルアップロードボタンをカスタマイズする

.NET CoreBlazor Server 5.0C#CSSVisual Studio 2019

Blazor Server の<InputFile>組み込みコンポーネントを使った、ファイルアップロード処理を実装しました。<InputFile>のレイアウト、デザインを変更したパターン例も実装しています。
ソースコードはGitHubで公開しています。

ソースコード構成

Blazor Server テンプレートから、変更を加えたソースファイル。

ソースコード変更内容を解説

WebApplication1/_Imports.razor

・テスト画面で使用するコンポーネントの参照を追加。

WebApplication1/Pages/InputFileTest.razor

・<InputFile>を使用したテスト画面を追加。
・3パターンの<InputFile>ボタンを設け、その下「読み込んだファイルの内容」欄に読み込んだファイルのファイル名、ファイルサイズ、ファイルの内容を表示している。
・Pattern 1 のボタンは<InputFile>をそのまま使った場合。
 複数ファイルを1回で読み込める例としてmultipleを指定している。
・Pattern 2 のボタンは<InputFile>のデザインを<label>タグを使って変更した場合。
 複数ファイルを1回で読み込める例としてmultipleを指定している。
・Pattern 3 のボタンは<InputFile>のデザインを<dev>タグを使って変更し、更に<InputFile>のパラメータ(InputFileChangeEventArgs)を明示的にメソッドパラメータとした渡した場合。
 単一ファイルを1回で読み込む例としてmultipleを指定していない。

WebApplication1/wwwroot/css/site.css

・テスト画面の<InputFile>のデザイン変更に使用するCSSを追加。

WebApplication1/Shared/NavMenu.razor

・作成したテスト画面へのリンクを、サイドメニューに追加。

Visual Studio プロジェクト

今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。

コメント

タイトルとURLをコピーしました