【JavaScript】dropzone.js の基本的な使い方 - pospomeのプログラミング日記

前回の説明で dropzone.js の使い方を説明した。
「ドラッグ＆ドロップで画像を非同期アップロードできるライブラリ dropzone.js のデフォルトCSS を有効にしたままカスタマイズする」
http://d.hatena.ne.jp/pospome/20130713/1373699451

これはプレビューフォームとドロップフォームを分けたんだけど、
今回は一緒にしたかったので、
ドロップフォームにプレビューさせる方法をメモ。
おそらくこれが基本的な使用方法になるはず。

【準備】
dropzone.js で使うのは、以下のファイル。
「download/dropzone.min.js」
「download/images/」の画像ファイル
「download/css/basic.css, dropzone.css」

これを任意のディレクトリに設置するが、
cssには画像ファイルへのURLが設定されているので、
「url」で検索して、自分の環境用に置換する。

dropzone.js のデモ版デザインを利用するために、
basic.css と dropzone.css の dropzoneクラスのセレクターを
dropzone-custom に書き換える。
「.dropzone 」を「.dropzone-custom」に置換すればOK。
置換時のポイントは「.dropzone 」のように末尾に半角スペースを入れること。
半角スペースを入れないと、
「.dropzone-preview」などの関係ないセレクターも置換対象になってしまう。

【HTMLの実装】
これだけでフォームになる。

<div id="file_drop_area" class="dropzone-custom">ドロップして下さい</div>

classはさっきcssで置換した dropzone-custom にする。
idは任意。

これだと、divタグが大きくなるので、
cssでwidth, height, min-height を上書きするといい。
自分は my_dropzone.css というファイルを作って、
以下のようなcssで上書きした。

.dropzone-custom {
  border: 1px solid rgba(0,0,0,0.03);
  min-height: 160px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: rgba(0,0,0,0.03);
  padding: 23px;
  width:200px;
  height:200px;
  background-color:#e6e6fa;
  text-align:center;
}

【JavaScriptの実装】
これは以下のように設定した。
最初のセレクター（以下の例だと file_drop_area ）はHTMLのidと同じにする。
ポイントはイベントのコールバックにソースコードを実装すること。
以下でいうと、uploadprogress とか success とかの _file.previewElement ... の部分。
これはソースコードのコードと同じ。
これがないとデモのようなデザイン、動作が反映されない。
とりあえず、コピーすれば大丈夫。
プロパティは公式サイトを確認すること。
英語だけど、ググれば翻訳できる。

$(function(){
    $('#file_drop_area').dropzone({
        url:$('#csv_upload_url').val(),
        paramName:'csv_file',
        maxFilesize:1, //MB
        addRemoveLinks:true,
        thumbnailWidth:100, //px
        thumbnailHeight:100, //px
        uploadprogress:function(_file, _progress, _size){
            _file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + _progress + "%";
        },
        success:function(_file, _return, _xml){
            _file.previewElement.classList.add("dz-success");
        },
        error:function(_file, _error_msg){
            var ref;
            (ref = _file.previewElement) != null ? ref.parentNode.removeChild(_file.previewElement) : void 0;
        },
        removedfile:function(_file){
            var ref;
            (ref = _file.previewElement) != null ? ref.parentNode.removeChild(_file.previewElement) : void 0;
        },
        dictRemoveFile:'削除',
        dictCancelUpload:'キャンセル'
    });
});

【サーバ側の実装】
これは普通のファイルアップロードと同じ。
$_FILESの「csv_file」というキーは JavaScript の paramNameプロパティで指定したキーを指定する。

<?php
move_uploaded_file($_FILES['csv_file']['tmp_name'], './tmp/test.png');

これでOKなはず。
プレビュー画像の位置を調整したい場合は css を修正する。
自分は my_dropzone.css に以下のように書きました。

.dropzone-custom .dz-preview,
.dropzone-previews .dz-preview {
  background: rgba(255,255,255,0.8);
  position: relative;
  display: inline-block;
  margin-top: -50px;
  vertical-align: top;
  border: 1px solid #acacac;
  padding: 6px 6px 6px 6px;
}

以上です。

こちらの記事もよければどうぞ。
内容は同じ感じですが・・・。
「ドラッグ＆ドロップで画像を非同期アップロードできるライブラリ dropzone.js のデフォルトCSS を有効にしたままカスタマイズする」
http://d.hatena.ne.jp/pospome/20130713/1373699451