MudBlazor にはファイル選択のコンポーネントはないっぽい

C# でシングルページ Web アプリケーション (いわゆる "SPA") を実装できる技術、Blazor に関する話題。

前回の投稿で、Blazor 用の Material Design な UI コンポーネントライブラリとして、"MudBlazor" を紹介しました。

MudBlazor を使えば、例えばユーザーのアバター画像ファイルを設定してもらう、といったようなページも、下図のようにそれなりにかっこよく作ることが容易になります。

しかし、上図でわかりますが、ファイル選択のコンポーネントは MudBlazor に用意がないようで、そのため、Blazor 標準の <InputFile/> コンポーネント (DOM 上は素の <input type="file"/> としてレンダリングされる) をそのまま配置するだけになっており、ちょっとイケてないです。

そこでもうちょっと頑張って自分で実装を加えることで、下図のようにしてみたいと思います。

※下記 URL で実際に動作するライブデモを公開しています。
- https://sample-by-jsakamoto.github.io/MudBlazorInputFile/

基本コンセプトは簡単 ― `<label/>` 要素を使う

基本コンセプトは簡単です。

<InputFile/> コンポーネントは非表示にしておき、代わりに、その <InputFile/> コンポーネントにリンクする <label/> 要素を配置・表示しておく、というものです。
このためには、<InputFile/> コンポーネントには id 属性を適切に設定しておき、続く <label/> 要素の for 属性にて、<InputFile/> コンポーネントに設定した id 値を指定します。

<InputFile id="avatar-picture-inputfile" Style="display:none;" .../>
<Label for="avatar-picture-inputfile">
  ファイル選択
</Label>

そうすることで、その <label/> 要素をクリックすると、表示上は見えなくなっている <input type="file"/> 要素をクリックしたのと同じ挙動になります。

こうすることで、<input type="file"/> 要素の見た目をいろいろいじるのは難しいところ、代わりに設けた <label/> 要素であれば、その見た目をいい感じにイジれるようになります。

見た目を Material Design な感じにする

ということで早速、"ファイル選択" label 要素を、MudBlazor 提供のボタンコントロールと同じ見た目にしてみます。

MudBlazor の設計・実装のおかげで、これは簡単です。

<label/> 要素に対し、MudBlazor 由来の CSS クラス名を設定するだけです。

今回のケースでは、配色は Primary、外観は Filled、サイズは中のボタンと同じにしたかったため、以下の CSS クラス名を <label/> 要素に適用しました。

mud-button-root
mud-button
mud-button-filled
mud-button-filled-primary
mud-button-filled-size-medium
mud-ripple

...
<Label ... class="mud-button-root mud-button mud-button-filled mud-button-filled-primary mud-button-filled-size-medium mud-ripple">
  ファイル選択
</Label>

こうして CSS クラス名を指定するだけで、<label/> 要素の見た目が、まるっきり、MudBlazor のボタンコントロールと同じにできました。
クリックすると、ちゃんとリップル効果も再現されます。

入力フィールドっぽくしてみる

大抵の要件では、以上で完了と思います。

が、今回はもう少し踏み込んで、このファイル選択用のユーザーインターフェースを、MudBlazor 提供のテキスト入力コンポーネントっぽく拡張してみます。

具体的には以下の表示要素を付け加えます。

入力項目の名称を表示するキャプション
選択されたファイル名を表示する入力フィールド ("入力" はできないけど)
ヘルプテキスト

入力項目の名称を表示するキャプション

MudBlazor の入力系コンポーネントに表示される入力項目名のキャプションと、同じ見た目のテキストを表示するには、MudBlazor の <MudText/> コンポーネントが使えます。

この <MudText/> コンポーネントの Typo 属性に、Typo.caption を指定すれば OK です。

<MudText Typo="Typo.caption">
    アバター画像ファイル
</MudText>

選択されたファイル名を表示する入力フィールド

これはファイル選択のコンポーネントなので、キーボードから何かテキストを入力するわけではありません。
代わりに、ぱっと見、テキスト入力コンポーネントっぽい見た目で、選択されたファイル名を表示するようにします。

ただのテキスト (選択されたファイルの名前) の表示ですから、先のファイル選択ボタンを <label/> 要素で実装したのと同じように、こちらも <label/> 要素で実現します。

外観の調整ではとりわけ、入力フィールドっぽさを醸し出す、灰色の下線の実装がキモです。

この下線の色の指定は、幸い、MudBlazor が配色情報を CSS 変数として実装していることから、自前の CSS スタイルシート中からも参照可能です。
具体的には、--mud-palette-lines-inputs という CSS 変数名で、入力フィールドの下線の色を参照可能です。

なので、自前の要素で、入力フィールドっぽい下線を引くには、以下のような CSS スタイルを適用すれば OK です。

border-bottom: solid 1px var(--mud-palette-lines-inputs);

ヘルプテキスト

MudBlazor の入力系コンポーネントの下部に表示されるヘルプテキストと、同じ見た目のテキストを表示するには、任意の HTML 要素に対し、mud-input-helper-text CSS クラスを適用すれば OK です。

<div class="mud-input-helper-text">
    ファイルサイズは 512KB までです。
</div>

エラー表示も統合

以上まで実装すると、ファイル種類やサイズについての入力検証結果を、MudBlazor の他の入力フィールド系と同じように、ヘルプテキスト欄に検証エラーメッセージを表示するようにもできます (下図)。

なお、上図のような入力検証エラー表示にあたり、キャプションや下線、ヘルプテキストの色も変えていますが、この配色も、MudBlazor 由来の CSS 変数で参照・使用できます。

具体的には、CSS 変数 --mud-palette-error を参照することでエラー系の色を参照できます。

まとめ

以上のように少々の手間をかけることで、MudBlazor の他のコンポーネントと並べても違和感のない、見た目 Material Design っていう感じの、ファイル選択のユーザーインターフェースが作れるようになります。

実際の作例全体のサンプルプログラムを、下記 GitHub リポジトリで公開しています。
素の <InputFile/> コンポーネントを配置しているだけの状態から、順に変更を積んでいく様子を 1 コミットずつ残しています。
各コミット間の差分など参考になればと思います。

https://github.com/sample-by-jsakamoto/MudBlazorInputFile/commits/master

また、MudBlazor は配色情報を CSS 変数で定義・実装してくれています。
そのお陰で、MudBlazor のテーマシステムにより具体的な配色が変更・カスタマイズされても、今回紹介の実装は何も変更することなく、テーマ配色に追随するのもうれしいところです。

ただし、今回紹介のファイル選択ユーザーインターフェースには、大きな弱点・難点があります。

それは、キーボードから操作できないということです。

まず<label/> 要素にフォーカスがあたりません。
もっとも、この点については、tabindex="0" などと、tabindex 属性を <label/> 要素に指定することでフォーカスがあたるようにはなります。

しかしその先、例えばキーボードのスペースキーの打鍵などでは、ファイル選択のダイアログが開くことがありません。
ここで詰んでしまいます。

この一点、キーボードからの操作ができなくなる点が許容できれば、Material Design なファイル選択のユーザーインターフェースを実現可能、ということになるでしょう。

以上、Learn, Practice, Share!

MudBlazor で作る "input type=file"