Pot.DropFile

{Pot.DropFile} new Pot.DropFile ({Element|String|jQuery|*} target [, {Object} options])

Pot.js と PotLite.js で利用可能。

コンストラクタ。ブラウザにファイルがドラッグ&ドロップされた時の動作を設定します。

引数 target には、対象の DOM 要素、もしくは id を文字列で指定します。
target に jQuery オブジェクトが渡されると、 get(0) によって最初の要素が対象になります。
引数 options には、ドロップされた時や ファイルが読み込めた時などのイベントを設定します。
options はオブジェクトで指定し、以下のキーが有効です。

{String} encoding
テキストとして読み込むときのエンコーディングを指定できます。
デフォルトは、UTF-8 として読み込みます。
{String} readAs
読み込む形式を指定できます。
デフォルト (null) は、テキストファイルは 'text'、それ以外は 'datauri' として読み込みます。
readAs :
    - 'text'        : テキストとして読み込みます (readAsText)。encoding が有効になります。
    - 'binary'      : バイナリとして読み込みます (readAsBinaryString)。
    - 'arraybuffer' : ArrayBufferとして読み込みます (readAsArrayBuffer)。
    - 'datauri'     : DataURIとして読み込みます (readAsDataURL)。
    - null          : テキストファイルは 'text'、それ以外は 'datauri' で読み込みます (デフォルト)。
{Function} onShow
ドロップ可能であることをユーザーに示すべき時に呼ばれます。
例えば、ユーザーがデスクトップからファイルをドラッグし、ブラウザ内に入った時などです。
onShow : function() {
    this : Pot.DropFile インスタンス自身。
}
{Function} onHide
ドロップ不可なことをユーザーに示すべき時に呼ばれます。
例えば、ユーザーがファイルをドラッグしたまま、マウスがブラウザ外に出た時などです。
onHide : function() {
    this : Pot.DropFile インスタンス自身。
}
{Function} onProgress
ドロップされたファイルすべての読み込みの進歩時に呼ばれます。
onProgress : function(percent) {
    this    : Pot.DropFile インスタンス自身。
    percent : {Number} : 0 - 100 までの進歩状況。
}
{Function} onProgressFile
ドロップされたファイル 1 つに対する読み込みの進歩時に呼ばれます。
onProgress : function(percent, fileinfo) {
    this     : Pot.DropFile インスタンス自身。
    percent  : {Number} : 0 - 100 までの進歩状況。
    fileinfo : {Object} : name, size, type, index を持つファイル情報。
      - fileinfo.name  : {String} : ファイル名
      - fileinfo.size  : {Number} : ファイルサイズ (Byte)
      - fileinfo.type  : {String} : ファイルタイプ (MIME)
      - fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
{Function} onDrop
ファイルがドロップされた時に呼ばれます。
onDrop : function(files, total) {
    this  : Pot.DropFile インスタンス自身。
    files : {Array}  : ドロップされたファイルの配列 (event.dataTransfer.files)。
    total : {Number} : files の総数。
}
{Function} onLoadImage
画像ファイルがドロップされ、読み込みが完了した時に呼ばれます。
onLoadImage : function(data, fileinfo) {
    this     : Pot.DropFile インスタンス自身。
    data     : {String|*} : ファイルのデータ (readAs の形式)。
    fileinfo : {Object}   : name, size, type, index を持つファイル情報。
      - fileinfo.name  : {String} : ファイル名
      - fileinfo.size  : {Number} : ファイルサイズ (Byte)
      - fileinfo.type  : {String} : ファイルタイプ (MIME)
      - fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
{Function} onLoadText
テキストファイルがドロップされ、読み込み完了した時に呼ばれます。
onLoadText : function(data, fileinfo) {
    this     : Pot.DropFile インスタンス自身。
    data     : {String|*} : ファイルのデータ (readAs の形式)。
    fileinfo : {Object}   : name, size, type, index を持つファイル情報。
      - fileinfo.name  : {String} : ファイル名
      - fileinfo.size  : {Number} : ファイルサイズ (Byte)
      - fileinfo.type  : {String} : ファイルタイプ (MIME)
      - fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
{Function} onLoadUnknown
不明なファイル (画像、テキスト以外のファイル) がドロップされ、読み込み完了した時に呼ばれます。
onLoadUnknown : function(data, fileinfo) {
    this     : Pot.DropFile インスタンス自身。
    data     : {String|*} : ファイルのデータ (readAs の形式)。
    fileinfo : {Object}   : name, size, type, index を持つファイル情報。
      - fileinfo.name  : {String} : ファイル名
      - fileinfo.size  : {Number} : ファイルサイズ (Byte)
      - fileinfo.type  : {String} : ファイルタイプ (MIME)
      - fileinfo.index : {Number} : ファイルのインデックス番号 (0 - ファイル総数)
}
{Function} onLoadEnd
ファイルがドロップされ、すべての読み込みが完了した時に呼ばれます。
例えば、upload() が実行可能になった時などです。
onLoadEnd : function(files) {
    this  : Pot.DropFile インスタンス自身。
    files : {Array} : 読み込んだファイルデータの配列。
}

Pot.globalize() が適応されている場合、new Pot.DropFile() が new DropFile() で実行できます。

Pot.DropFile インスタンスが返ります。

// この例では DOM 要素の操作に jQuery を使用しています
// この例の実行後にブラウザにファイルをドロップすることができます

// ドロップ用のパネルを生成
var panel = $('<div/>')
    .css({
        position   : 'fixed',
        left       : '10%',
        top        : '10%',
        width      : '80%',
        height     : '80%',
        minHeight  : 200,
        background : '#ccc',
        border     : '2px solid #999',
        zIndex     : 9999999
    })
    .hide()
    .text('Drop here')
    .appendTo('body');

// 設定と共に Pot.DropFile インスタンスを生成
var dropFile = new Pot.DropFile(panel, {

    // ドロップ可能な時 (パネルを表示)
    onShow : function() { panel.show() },

    // ドロップ不可の時 (パネルを非表示)
    onHide : function() { panel.hide() },

    // ファイルがドロップされた時
    onDrop : function(files, total) {
        panel.text('dropped');
    },

    // 画像がドロップされた時
    onLoadImage : function(data, fileinfo) {
        $('<img/>').attr('src', data).appendTo('body');
    },

    // テキストがドロップされた時
    onLoadText : function(data, fileinfo) {
        $('<textarea/>').val(data).appendTo('body');
    },

    // それ以外のファイルがドロップされた時
    onLoadUnknown : function(data, fileinfo) {
        $('<textarea/>').val(data).appendTo('body');
    },

    // ファイルがドロップされてロード完了した時
    onLoadEnd : function(files) {
        // このタイミングでアップロードが可能
        /*
        this.upload(
            'http://www.example.com/uplaod',
            'dropfiles'
        ).then(function() {
            alert('アップロード完了');
        });
        */
    }
});

// ドロップイベントをクリアする場合
$('#clear-drop-events').click(function() {
    dropFile.clearDropEvents();
});

動作については、jsFiddle サンプルを参照ください。