Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What is going on with this article?
@hiroism

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

More than 1 year has passed since last update.

Dropzone.jsとは、

is an open source library that provides drag’n’drop file uploads with image previews.

(Dropzone公式より)

要するにこんな感じの、「ドラッグアンドドロップ→そのままサーバにアップロード」が一撃で出来るJavascriptライブラリ。
image.png

image.png

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

使用例

dropzone.jsとdropzone.css、jQueryを用意。


<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にし、自動で要素を探しにいかないようにする。

  Dropzone.autoDiscover = false // [1]

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

  Dropzone.options.dropImages = { // [2]
    autoProcessQueue: false, // 重要
    addRemoveLinks: true,
    dictRemoveFile: '削除'
  }

今回は使用しないが、この状態でアップロードを走らせる場合はmyDropzone.processQueue()を使う。

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

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

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

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

スタイル

スクリプトは良くなったが、アップロードしなくなったので空の進捗バーが出たままになってしまった。
image.png

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

    .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

14
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hiroism
LOVE and PEACE https://yapparo.net

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
14
Help us understand the problem. What is going on with this article?