1

オーバーヘッド、再構築、またはハッキングをあまり追加せずに、DnD ファイルのアップロードをシステムに直接含める (適切なデータベース エントリを生成するなど) のに役立つ、WordPress ドラッグ アンド ドロップ アップローダの回避策プラグインのプロトタイプを作成しています。

要素にドロップされたファイルを取得し、それらが別の要素にドロップされることをプログラムでシミュレートしようとして問題が発生しました (WP でネイティブ アップロード シーケンスをトリガーするため)。

JS

$('#uploader').on(
    {dragenter: function(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log('dragenter');
    },
    dragover: function(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log('dragover');
    },
    drop: function(e){
        if(e.originalEvent.dataTransfer){
            if(e.originalEvent.dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                /*Do Stuff*/
        var id, remoteFrame, uploader, plupload, file, i, files = [], id, fileNames = {}, native_files;

                    remoteFrame = $('#media_uploader_hidden')[0].contentWindow; // iFrame context
                    plupload = remoteFrame.plupload // localize
                    uploader = remoteFrame.uploader; // localize

                    native_files = e.originalEvent.dataTransfer.files; // raw files

                // Initialize Runtime
                plupload.runtimes['Html5'].init(uploader,function(){console.log('initialized HTML5')});

                // Add files to the file queue
                for (i = 0; i < native_files.length; i++) {
                    file = native_files[i];

                    // Safari on Windows will add first file from dragged set multiple times
                    // @see: https://bugs.webkit.org/show_bug.cgi?id=37957
                    if (fileNames[file.name]) {
                        continue;
                    }
                    fileNames[file.name] = true;

                    // Store away gears blob internally
                    id = plupload.guid();

                    // Create queue array with id, name and size
                    files.push(new plupload.File(id, file.fileName || file.name, file.fileSize || file.size)); // fileName / fileSize deprecated
                }

                // Trigger FilesAdded event if we added any
                if (files.length) {
                    uploader.trigger("FilesAdded", files);
                }

                console.log(uploader.files);


            }   
        }
        console.log('drop');
    }},
    '.drag-drop-area'
);

HTML:

<div id="uploader"><div class=".drag-drop-area"></div></div>
<div id="test"></div>

何かが #test に「ドロップ」されたときにトリガーするようにログを設定しています。

最終的に、ドロップされたファイルは、WordPress のメディア アップローダーを使用して非表示の iFrame 内の要素に送られます。

編集: Plupload (WordPress で DND に使用される jQuery プラグイン) に直接プラグインしてファイルをキューに追加する方法を探していましたが、何も見つかりませんでした。すべての「キューに追加」機能が含まれているようです。

4

0 に答える 0