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

JS,Laravel

前回からの続きです

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.js5以前と5以降でやり方が少し違う様で、検索するとよく出てくるのは以前の方

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

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

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

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

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

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら