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 はオブジェクトで指定し、以下のキーが有効です。

{Function} onShow
ドロップ可能であることをユーザーに示すべき時に呼ばれます。
例えば、ユーザーがデスクトップからファイルをドラッグし、ブラウザ内に入った時などです。 
onShow : function() {
    this : Pot.DropFile インスタンス自身。
}
{Function} onHide
ドロップ不可なことをユーザーに示すべき時に呼ばれます。
例えば、ユーザーがファイルをドラッグしたまま、マウスがブラウザ外に出た時などです。 
onHide : function() {
    this : Pot.DropFile インスタンス自身。
}
{Function} onDrop
ファイルがドロップされた時に呼ばれます。 
onDrop : function(files) {
    this  : Pot.DropFile インスタンス自身。
    files : {Array|*} : ドロップされたファイルの配列 (event.dataTransfer.files)。
}
{Function} onLoadImage
画像ファイルがドロップされ、読み込みが完了した時に呼ばれます。 
onLoadImage : function(data, name, size, type) {
    this   : Pot.DropFile インスタンス自身。
    result : {String} : ファイルのデータ (DataURI)。
    name   : {String} : ファイル名。
    size   : {Number} : ファイルサイズ (Byte)。
    type   : {String} : ファイルのタイプ (MIMEType)。
}
{Function} onLoadText
テキストファイルがドロップされ、読み込み完了した時に呼ばれます。 
onLoadText : function(data, name, size, type) {
    this   : Pot.DropFile インスタンス自身。
    result : {String} : ファイルのデータ。
    name   : {String} : ファイル名。
    size   : {Number} : ファイルサイズ (Byte)。
    type   : {String} : ファイルのタイプ (MIMEType)。
}
{Function} onLoadUnknown
不明なファイル (画像、テキスト以外のファイル) がドロップされ、読み込み完了した時に呼ばれます。 
onLoadUnknown : function(data, name, size, type) {
    this   : Pot.DropFile インスタンス自身。
    result : {String} : ファイルのデータ (DataURI)。
    name   : {String} : ファイル名。
    size   : {Number} : ファイルサイズ (Byte)。
    type   : {String} : ファイルのタイプ (MIMEType)。
}
{Function} onLoadEnd
ファイルがドロップされ、すべての読み込みが完了した時に呼ばれます。
例えば、upload() が実行可能になった時などです。 
onLoadEnd : function(files) {
    this  : Pot.DropFile インスタンス自身。
    files : {Array} : 読み込んだファイルデータの配列。
}
{String} encoding = 'UTF-8'
テキストファイルを読み込むときの文字コードが指定できます。
デフォルトは、'UTF-8' です。

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) {
        panel.text('dropped');
    },

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

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

    // それ以外のファイルがドロップされた時
    onLoadUnknown : function(data, name, size) {
        $('<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();
});

動作については、サンプルを含む記事があるので参照ください。