DropzoneJSの導入

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

以下公式サイトです。

https://www.dropzonejs.com/

導入

今回は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には無い為、必要な場合は自前で実装を行う必要があります。


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

コメントを残す

メールアドレスが公開されることはありません。