Dropzone.jsで編集画面を作る（アップロード済みの画像を表示）

JS,Laravel

前回からの続きです

dropzone.js + Laravel8で画像アップロード機能を実装する

Dropzone.jsを使って画像アップロードの編集画面を作る場合、既にアップロード済みの画像をデフォルトで表示させる必要があります

そこで少してこずったのでメモとして記録しておきます

アップロード済みの画像をデフォルト表示

const dropzone = new Dropzone( '#my-awesome-dropzone', {
    maxFilesize: 5,
    maxFiles: 10,
    addRemoveLinks: true,
    init : function() {
        myDropzone = this;

        @foreach($images as $image)
            file = {
                name: "img.jpg",
                size: 12345,
                status: Dropzone.ADDED,
                accepted: true
            };
            myDropzone.files.push(file);
            myDropzone.displayExistingFile(file, "{{ $image['path'] }}");
        @endforeach
    }
});

Dropzone.js５以前と５以降でやり方が少し違う様で、検索するとよく出てくるのは以前の方

５以降はdisplayExistingFile()を使ってアップロード済みのファイルを表示させるのですが、これだけだとmaxFilesで指定した数とアップロード済みのファイル数が一致せず、削除やファイル追加といった操作で支障が発生します（何個初期画像を登録しても0個として認識されてしまう）

また、公式ページのFAQでは以下のコードの様に、maxFIlesをinit内で動的に更新すると良いとコードの記載がありますが、これも５以降だとうまく動きません

this.options.maxFiles = this.options.maxFiles - image.size();

そこで重要なのがmyDropzone.files.pushでした

myDropzone.files.pushしてからdisplayExistingFileを呼ぶと、maxFilesを更新しなくても、画像の削除追加に対応してくれます