最近のWebアプリケーションではファイルをWebブラウザにドラッグ&ドロップしてアップロードすることが良くあります。開発するのはさほど難しい訳ではありませんが、ちょっと面倒だったります。かといって、ファイルアップロードライブラリを使うと、周りのデザインと合っていないことも良くあります。 今回紹介する elementはシンプルなファイルアップロード用Web Componentsになります。

elementの使い方

利用例です。Web Componentsとして定義されています。

</file-attachment><file-attachment directory input="upload">
  <input id="upload" type="file" multiple/>
</file-attachment>

表示です。

ファイルをドロップします。

elementはGitHubが開発しているのが特徴と言えるでしょう。イベントも用意されているので、ファイルがドロップされたタイミングで処理実行も可能です。また、polifillによって多くのWebブラウザで動作します。

elementはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

github/file-attachment-element: Attach files via drag and drop or file input.