DropzoneJSの導入

ドラッグ&ドロップによるファイルアップロードを手早く実装する為に、DropzoneJSというライブラリを利用しました。

以下公式サイトです。

https://www.dropzonejs.com/

導入

今回はKotlin 1.4.21 + Spring Boot 2.4.1 + Gradle 6.7.1 といった環境で導入します。

1. build.gradleのdependenciesにDropzoneJSを追加

2. DropzoneJSを利用するHTMLへdropzone.jsとdropzone.cssを追加

3. ドロップエリアとしたい要素にclass=”dropzone”を追加

4. 3.のタグにID名を指定して、JavaScriptからDropzone.option.ID名でurlを設定する、もしくはタグにaction属性を追加してurlを設定する

これで、class=”dropzone”の要素へファイルやフォルダをドロップすると、ドロップしたファイルがurlへ送信されるようになります。

注意点として、DropzoneJSはES6の記法が使われており、IE11ではES6がサポートされていない為、DropzoneJSを導入するだけでは動作しません。Babel-polyfillを追加すれば動作はするようですが、フォルダをドロップした場合はDataTransferを取得することができず、ドロップ時のイベントが発生しない為、フォルダを選択したアップロードはできないようです。

また、フォルダをドロップした場合、ドロップしたフォルダの階層の情報までをサーバーへ送信する機能はDropzoneJSには無い為、必要な場合は自前で実装を行う必要があります。


--------------------------
システム開発のご要望・ご相談はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です