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 がどのような動きをするのかが理解できていません。)
どうすればファイルのサムネイルを表示させることができるのでしょうか?
どなたか教えていただければ助かります。
どうぞよろしくお願い致します。