ドラッグ&ドロップによるファイルアップロードを手早く実装する為に、DropzoneJSというライブラリを利用しました。
以下公式サイトです。
導入
今回はKotlin 1.4.21 + Spring Boot 2.4.1 + Gradle 6.7.1 といった環境で導入します。
1. build.gradleのdependenciesにDropzoneJSを追加
implementation("org.webjars:dropzone:5.7.2")
2. DropzoneJSを利用するHTMLへdropzone.jsとdropzone.cssを追加
...
<head>
<link rel='stylesheet' href='/webjars/dropzone/5.7.2/min/dropzone.min.css' type="text/css">
</head>
<body>
...
</body>
<script th:src="@{/webjars/dropzone/5.7.2/min/dropzone.min.js}"></script>
3. ドロップエリアとしたい要素にclass=”dropzone”を追加
<form class="dropzone"> </form>
4. 3.のタグにID名を指定して、JavaScriptからDropzone.option.ID名でurlを設定する、もしくはタグにaction属性を追加してurlを設定する
<!-- HTML -->
<form class="dropzone" id="demoDropzone">
</form>
// JavaScript
Dropzone.options.demoDropzone = {
url: "path/to/upload"
}
<!-- HTML(actionで設定) -->
<form action="path/to/upload" class="dropzone">
</form>
これで、class=”dropzone”の要素へファイルやフォルダをドロップすると、ドロップしたファイルがurlへ送信されるようになります。
注意点として、DropzoneJSはES6の記法が使われており、IE11ではES6がサポートされていない為、DropzoneJSを導入するだけでは動作しません。Babel-polyfillを追加すれば動作はするようですが、フォルダをドロップした場合はDataTransferを取得することができず、ドロップ時のイベントが発生しない為、フォルダを選択したアップロードはできないようです。
また、フォルダをドロップした場合、ドロップしたフォルダの階層の情報までをサーバーへ送信する機能はDropzoneJSには無い為、必要な場合は自前で実装を行う必要があります。
