【Dropzone.js】ドラッグ&ドロップUIの設置とドロップされたファイルの取得

[Dropzone.js](https://www.dropzonejs.com/)とは、
>is an open source library that provides drag’n’drop file uploads with image previews.

（Dropzone公式より）

要するにこんな感じの、「ドラッグアンドドロップ→そのままサーバにアップロード」が一撃で出来るJavascriptライブラリ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272677/59340ac2-e82e-8812-c6c7-547e1009107a.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272677/1512e8ab-17dd-95d6-e271-c78e92a0e430.png)

"file uploads"とは言うものの、UIもカスタマイズ機能も素晴らしく、ドロップしたファイルをそのままアップロードしない用途でも使える。
D&DのUIだけでも使いたくなるライブラリなので、アップロード前に対象ファイルを取得して好きな処理を行う例を紹介する。

# 使用例
dropzone.jsとdropzone.css、jQueryを用意。

```html

<div id="dropImages" class="dz-message dropzone"> // ここがドロップゾーンになる
  <div class="fallback"></div>
</div>
...中略
<script src="dropzone.js"></script>
<link rel="stylesheet" href="dropzone.css">
<script src="jquery-3.4.1.min.js"></script>
<script>
  var droppedImages = []
  Dropzone.autoDiscover = false // [1]
  Dropzone.options.dropImages = { // [2]
    autoProcessQueue: false, // 重要
    addRemoveLinks: true,
    dictRemoveFile: '削除'
  }
  $(function() { // 折角なので使う
    var myDropzone = new Dropzone('div#dropImages', { url: 'dummy'})
    myDropzone.on("addedfile", function(file) { // [3] 画像追加
      droppedImages.push(file) // Dropzone外に渡せる。あとはお好きに
    })
    myDropzone.on("removedfile", function(file) { // [4] 画像削除
      var index = droppedImages.indexOf(file)
      if (index >= 0) { droppedImages.splice(index, 1) }
    })
  })
</script>
```

[1] autoDiscoverをfalseにし、自動で要素を探しにいかないようにする。

```javascript
  Dropzone.autoDiscover = false // [1]
```

[2] optionsを編集。要素のID毎に設定できる。
特に**autoProcessQueue**が重要で、これをfalseにすると自動アップロードが走らなくなる。
他の設定は[公式](https://www.dropzonejs.com/)の`Configuration options`で確認を。

```javascript
  Dropzone.options.dropImages = { // [2]
    autoProcessQueue: false, // 重要
    addRemoveLinks: true,
    dictRemoveFile: '削除'
  }
```
今回は使用しないが、この状態でアップロードを走らせる場合は`myDropzone.processQueue()`を使う。


[3] 'addedfile'イベントに処理を追加。
引数にアップロードファイルが渡ってくるので、ここで目的の処理を行う。
autoDiscoverをfalseにしているので通常のアップロードは走らない。

```javascript
    myDropzone.on("addedfile", function(file) { // [3] 画像追加
      droppedImages.push(file) // Dropzone外に渡せる。あとはお好きに
    })
```

[4] 'removedfile'イベントに処理を追加。
ここでも削除対象のファイルが渡ってくるので、必要に応じて処理。

```javascript
    myDropzone.on("removedfile", function(file) { // [4] 画像削除
      var index = droppedImages.indexOf(file)
      if (index >= 0) { droppedImages.splice(index, 1) }
    })
```

# スタイル
スクリプトは良くなったが、アップロードしなくなったので空の進捗バーが出たままになってしまった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272677/9e7e0729-e3cc-4b1b-e690-a9065689692c.png)

dropzone.cssを編集し、雑に`.dz-progress`と書いてある部分をすべて削除。

```css
    .dropzone .dz-preview.dz-processing .dz-progress {
      /*...略*/
    }
    .dropzone .dz-preview.dz-complete .dz-progress {
      /*...略*/
    }
    .dropzone .dz-preview:not(.dz-processing) .dz-progress {
      /*...略*/
    }
    .dropzone .dz-preview .dz-progress {
      /*...略*/
    }
      .dropzone .dz-preview .dz-progress .dz-upload {
        /*...略*/
      }
```


OK。色んなところで使えそうですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272677/8a512e0c-1a7b-e057-fa96-4f294008a8da.png)