ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Dropzoneはファイルのドラッグ&ドロップによるファイルアップロードを可能にするJavaScriptライブラリです。

Gmailではじめ(恐らく)見て以来、様々な場面で見られるようになったWebブラウザへのファイルのドラッグ&ドロップでのアップロード機能ですが、より手軽に扱えるようにしてくれるライブラリがDropzoneです。


トップページです。


ファイルをドロップしました。画像はサムネイルが表示されます。


画像をアップロード中。平行して実行されます。

ファイルをドロップすると自動的にアップロードを開始してくれます。ドロップしたりアップロードが完了したりしたタイミングでイベントを実行したり、最大ファイルサイズ指定やサムネイルの表示設定など細かなカスタマイズができるようになっています。

DropzoneはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Dropzoneが便利だと思うのはフォームの入力プロセスとは別でファイルのアップロード処理ができる点です。ファイルをアップロードしながら入力やコンテンツの閲覧が進められるので、悩みの多いAjaxベースのファイルアップロードが容易に実現できます。

対応ブラウザはChrome 7、Firefox 4、IE 10、Opera 12、Safari 5以上となっており、敷居が高いのが若干の欠点かも知れません。他のライブラリや通常のファイルアップロードと絡めつつ使うのが良さそうです。

via Open Source JS Library For Provides Drag’n’drop File Uploads: Dropzone.js | Greepit

Dropzone.js

enyo/dropzone · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2