Pot.DropFile.prototype.upload

Pot.DropFile により、ドロップされたファイルを 引数 url の URL にアップロードします。
アップロードは、Pot.request() により実行されます。
引数 url には、アップロードする URL を指定します。
引数 options が文字列で渡されると、それをキー名としてアップロードします。
options がオブジェクトで渡された場合、以下のキーが設定できます。

これ以外の有効なキーは、Pot.request() を参照ください。

アップロード完了後に開始される Pot.Deferred インスタンスが返ります。

// この例では 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', {
                key         : 'dropfiles',
                sendContent : {
                    id : 'hoge'
                }
            }
        ).then(function() {
            alert('アップロード完了');
        }).rescue(function(err) {
            alert('エラー: ' + err);
        });
    }
});

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