0

DropzoneJs を使ってファイルをアップロードさせるプログラムを作成しています。
Dropzoneにサーバー内に既にあるファイルを表示させる方法は、以下のサイトを参考にできました。

https://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server

<script>
<!-- 3 -->
Dropzone.options.myDropzone = {
    init: function() {
        thisDropzone = this;
        <!-- 4 -->
        $.get('upload.php', function(data) {
            <!-- 5 -->
            $.each(data, function(key,value){
                var mockFile = { name: value.name, size: value.size };
                thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploads/"+value.name);
            });
        });
    }
};
</script>

しかし、上記方法では、サムネイルが元ファイルを縮小表示しただけのため、読み込みに時間が掛かってしまいます。

そこで、既存のファイルは、サイズを縮小したサムネイルを表示させたいと思い、
以下のページを見つけました。
How to show files already stored on server

上記ページを見ると、以下のような感じで書いています。

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

上記ページを参考にすればいいと思うのですが、
上記ページと最初のページとでは書き方が違っているため、
組み合わせる方法がわかりません。
(そもそも、myDropzone.emit がどのような動きをするのかが理解できていません。)

どうすればファイルのサムネイルを表示させることができるのでしょうか?

どなたか教えていただければ助かります。
どうぞよろしくお願い致します。

2
  • 2つめのリンクが正しくリンクされていないので、修正をお願いできますか?またコードブロックの前後には空行が1行必要ですが、// Create the mock file: の前にはそれがないのでそのまま表示されてしまっています。
    – unarist
    2017年3月27日 9:57
  • 失礼いたしました。修正しました。
    – uemon
    2017年3月28日 0:52

1 件の回答 1

1

addedfilethumbnail というのは dropzone.js におけるイベントでして、

  • DOMやjQueryのように、addEventListener()on() でイベントハンドラを登録
  • emit() でイベントを発火(登録されたイベントハンドラを全て実行)

することができます。

dropzone.js では(デフォルトのものを含め)イベントハンドラが options オブジェクトの中に書かれており、初期化する際にこれらのイベントハンドラを on()登録しています。ですから大抵は options.addedfile.call()emit("addedfile", ...) のどちらを使っても同じですが、 addEventListener()on() でイベントハンドラを追加しているとそれが呼ばれるかどうかが変わってきます。公式のFAQでも emit() が使われていますし、こちらの方が行儀はよいです。

公式FAQに書かれている点も盛り込んで、最終的に次のような形になります。

$.each(data, function(key,value){
    var mockFile = { name: value.name, size: value.size };
    thisDropzone.emit("addedfile", mockFile);
    // thisDropzone.emit("thumbnail", mockFile, "uploads/" + value.name);
    thisDropzone.createThumbnailFromUrl(mockFile, "uploads/" + value.name);
    // アップロード完了処理(プログレスバーの非表示など)を呼び出す
    thisDropzone.emit("complete", mockFile);

});
// もし maxFiles オプションを使っていれば、手動で減らしておく
// thisDropzone.options.maxFiles -= data.length;
1
  • 動きました!詳細にご説明いただき、感謝いたします。
    – uemon
    2017年3月28日 1:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。