dropzone.jsでファイルアップロードUIをつくる #JavaScript

dropzone.jsとは

ドラッグ&ドロップのファイルアップロードUIが作れるjsのライブラリ。

dropzone.jsでできること

ドラッグ&ドロップによるファイルアップロードUIの提供
アップロードしたファイルを非同期でサーバへpost
アップロードしたファイルのプレビュー表示
アップロードの進捗ステータスを表示

ダウンロード

使い方

HTML

<script src="jquery.js"></script>
<script src="dropzone.js"></script>

<form class="dropzone" id="my-awesome-dropzone">
  <input name="file" type="file" id="my-awesome-dropzone" multiple />
</form>
<div class='drag-and-drop-area'></div>

CoffeeScript

# Dropzone設定
Dropzone.autoDiscover = false
# Dropzoneフォームのidをキャメルケースで記述
Dropzone.options.myAwesomeDropzone = {}

# Dropzone初期化(urlはpost先を指定)
myDropzone = new Dropzone '.drag-and-drop-area', {url: '/images/upload'}

これでドラッグ&ドロップ可能なUIと非同期でサーバにファイルをpostできるようになる。簡単。

実装サンプル

sample.html

<div class="drag-and-drop-area drag-and-drop-area-out">
  <span>
    <i class="fa fa-image"></i>
    Drag and drop your files
  </span>
</div>

style.css

.drag-and-drop-area {
  color: #ccc;
  height: 200px;
  margin: 30px 0 20px;
  border-style: dashed;
  border-width: 2px;
  line-height: 200px;
  text-align: center;
  cursor: pointer;
}

.drag-and-drop-area-over {
  border-color: #0000FF;
}

.drag-and-drop-area-over span {
  opacity: 0.2;
}

.drag-and-drop-area-out {
  border-color: #ccc;
}

.drag-and-drop-area-out span {
  opacity: 1;
}

file_upload.coffee

$ ->
  Dropzone.autoDiscover = false
  Dropzone.options.myAwesomeDropzone = {
    paramName : "file"
    parallelUploads: 1
    acceptedFiles: 'image/*'
    maxFiles: 10
    maxFilesize: 0.5
    dictFileTooBig: "uploaded file is too large({{filesize}}MiB). limit: {{maxFilesize}}MiB."
    dictInvalidFileType: "Image file only"
    dictMaxFilesExceeded: "10 files limit"
  }

  myDropzone = new Dropzone ".drag-and-drop-area", {url:"/images/async_upload"}

  $('.drag-and-drop-area').on {
    click: (e)->
      $('#file_input').click()
    mouseover: (e)->
      $(this).removeClass('drag-and-drop-area-out')
      $(this).addClass('drag-and-drop-area-over')
    mouseout: (e)->
      $(this).removeClass('drag-and-drop-area-over')
      $(this).addClass('drag-and-drop-area-out')
    dragover: (e)->
      $(this).removeClass('drag-and-drop-area-out')
      $(this).addClass('drag-and-drop-area-over')
    dragleave: (e)->
      $(this).removeClass('drag-and-drop-area-over')
      $(this).addClass('drag-and-drop-area-out')
  }

おしまい

他にもオプションやコールバックが用意されているので、カスタマイズして色々遊べそう。
公式サイト : http://www.dropzonejs.com/