33577


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

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

[code]

    <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>
    
[/code]

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

そこで、既存のファイルは、サイズを縮小したサムネイルを表示させたいと思い、  
以下のページを見つけました。  
[How to show files already stored on
server](https://github.com/enyo/dropzone/wiki/FAQ)

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

[code]

    // 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);
    
[/code]

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

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

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


CC BY-SA 3.0
2017-03-27T09:04:39.853
33572
2017-03-28T00:51:31.890
2017-03-28T00:51:31.890
18800
18800
question
javascript
DropzoneJs + PHP: サムネイルの表示方法について


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

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

することができます。

dropzone.js では（デフォルトのものを含め）イベントハンドラが `options`
オブジェクトの中に書かれており、初期化する際にこれらのイベントハンドラを `on()`
で[登録しています](https://github.com/enyo/dropzone/blob/v4.3.0/src/dropzone.coffee#L655-L65)。ですから大抵は
`options.addedfile.call()` と `emit("addedfile", ...)` のどちらを使っても同じですが、
`addEventListener()` や `on()`
でイベントハンドラを追加しているとそれが呼ばれるかどうかが変わってきます。[公式のFAQ](https://github.com/enyo/dropzone/wiki/FAQ#how-
to-show-files-already-stored-on-server)でも `emit()` が使われていますし、こちらの方が行儀はよいです。

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

[code]

    $.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;
    
[/code]


CC BY-SA 3.0
2017-03-27T11:31:41.540
33577
2017-03-27T11:31:41.540
8000
33572
answer