ファイルアップロードのインターフェースは、どんなインターフェースがいいのか？

Webシステムの開発において、ファイルのアップロードが必要になりました。
ファイルを選択してアップロードする方法は、これまで何度も使ったことがあります。
今回は、初めてドラッグ＆ドロップでファイルをアップロードする方法を採用しました。

ドラッグ＆ドロップでファイルをアップロードする方法は、他のシステムで使ったことがあり、使い勝手はわかっていたつもりです。
実装のために、実装方法を調べていて、気づきがありました。

ミーティング
Photo by Campaign Creators on Unsplash

まず気づいたのは、HTML5 のFile APIを使わなくても、ドラッグ＆ドロップでファイルのアップロードができるという点です。
HTML5 のFile APIを使わないと、ドラッグ＆ドロップでファイルのアップロードはできないと思っていました。

次に気がついた点は、ファイルをアップロードする処理に、JavaScriptが必要な点です。
ファイルをドラッグ＆ドロップする領域がHTML5 のFile APIを使えばできて、全てお任せで済ませられると思い込んでいました。
JavaScriptを適切に記述していないで、画像ファイルをドロップすると、ファイルが開いてしまいました。

ファイルをドラッグ＆ドロップすると、自動でアップロードするのも、使い勝手がいいのかという点も気になりました。
万が一ファイルを選び間違えていても、自動でアップロードされてしまうのであれば、削除の機能も必要になります。
今回は削除の機能まで提供する予定がなかったので、自動でアップロードではなく、登録ボタンを押したらアップロードする方式にしました。

これまで、ドラッグ＆ドロップでファイルをアップロードする方法を実装した経験がなかったため、色々知らない点がありました。
今回新たな学びにつながりました。
仕事で実装の前に、興味がある技術があったら試してみる時間を確保できるよう、行動を変えていきたいです。