Dropzone.jsで編集画面を作る(アップロード済みの画像を表示)
前回からの続きです
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を更新しなくても、画像の削除追加に対応してくれます
ディスカッション
コメント一覧
まだ、コメントがありません
よくLoadingされてるDocs
新たにPostされたDocs
: ウェブサービス
メルカリやラクマの商品がいつ出品されたのかを調べる裏技
メルカリやラクマなどで商品を探してると、ときどき、 「この商品はいつ出品されたも ...: 仕事環境
15年前のエアコンに洗浄スプレーしたら想像以上にキレイになった
うちのエアコンは新品で購入してからすでに15年が経過しています にもかかわらず、 ...: Laravel
一定時間で消えるフラッシュメッセージを簡単に実装[Laravel8]
以前、手軽にフラッシュメッセージが実装できるnotieを紹介しました 今回は、そ ...: Laravel
ランダムな文字列やユニークなIDをLaravelで生成
random use Illuminate\Support\Str; // 引数 ...: スマホ
4,837円あげるって言うからOCNモバイルOneにLinksmateから乗り換えたんですよ
これまでは僕はスマホの通信会社に、MVNOのLinksmateを使ってきました ...HashMap
created_by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
Utilities