ドラッグ&ドロップでサーバにファイルを渡す (MudBlazor)
はじめに
この記事は、以下を下敷きにしています。
前提
- .NET 8.0
- MudBlazor 8.9.0
やりたいこと
画像をアップロードする際に、ドラッグ・アンド・ドロップできるといいですね。
サーバからダウンロードする場合は以下をどうぞ。
実装
ドラッグ非対応
比較のため、非対応版も掲げておきます。
実のところ、ActivatorContentに配置されているボタンをアイコンとテキストに置き換えても、ファイル選択ボタン(<input hidden="" type="file" ~>)がクリックに応答して、ファイルピッカーが開きます。
ただし、このファイル選択ボタンはhiddenのため、ドラッグ&ドロップには応答しません。
ドラッグ対応
同じMudFileUploadを使用しますが、若干、使い方が異なります。
Hidden="@false"とした上で、FilesChangedからOnFilesChangedへ切り替えることで、ドラッグ&ドロップを受け取れるようになります。
また、@ondrop、@ondragenter、@ondragleave、@ondragendを利用すると、マウスオーバーに対してリアクションさせることができます。
以下は、上記のサンプルから大きくは変わっていません。
複数ファイルを選択させる場合は、サンプル通りに、型変数をIReadOnlyList<T> にして、AppendMultipleFilesを指定します。
機序と留意点
Hidden="@false"にしたことで、ファイル選択ボタン(<input hidden="" type="file" ~>)からhiddenが外れ、代わりにopacity: 0;によって不可視化されています。
そして、この「見えないけれど実体化したファイル選択ボタン」は、InputClassへの設定で、子要素を覆うように広げられています。
その結果、領域全体で、ドラッグ&ドロップを含む「ファイル選択ボタンの本来の機能」を享受できるようになります。
InputStyleをopacity: 0.4; background-color: #FCC;とかにすることで、その様子を確認できます。
子要素とファイル選択ボタンは親子でなく兄弟なので、何かの拍子に範囲がずれてしまうことがあります。
例えば、親要素でセンタリングしようと(この例なら<td align="center">)すると、てきめんにズレます。
挙動がおかしい場合は、先の「ボタンを可視化する」ハックで、状況を把握しやすくなります。
なお、title=""は、ファイル選択ボタンのツールチップが表示されないようにするものです。
おまけ
サンプルコードの全体は、以下のリポジトリにあります。
画像表示
画像のURLを割り当てたくなかったので、data:として直に埋め込んでいます。
画像種別検出
画像データの中身しか保持していないので、以下の簡易的な手法で種別を検出しています。
おわりに
お読みいただきありがとうございました。
執筆者は、Blazor、ASP.NETなど諸々において初学者ですので、誤りもあるかと思います。
お気づきの際は、是非コメントや編集リクエストにてご指摘ください。
あるいは、「それでも解らない」、「自分はこう捉えている」などといった、ご意見、ご感想も歓迎いたします。
Discussion