web-dev-qa-db-ja.com

Dropzoneに既存の画像ファイルを追加する

フォームに他のさまざまなフィールドがあるので、フォームに画像アップロード機能を追加するためにDropzonejsを使用しています。autoProcessQueueをfalseに設定し、[送信]をクリックして処理します下図のようなフォームのボタン。

Dropzone.options.portfolioForm = { 

    url: "/user/portfolio/save",
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 8,
    autoProcessQueue: false,
    autoDiscover: false,
    addRemoveLinks: true,
    maxFiles: 8,

    init: function() {

         var myDropzone = this;
         this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

             e.preventDefault();
             e.stopPropagation();
             myDropzone.processQueue();
         });
     }
 }

これは正常に機能し、フォームの送信時に送信されたすべての画像を処理できます。ただし、ユーザーがフォームを再度編集するときに、ユーザーが既にアップロードした画像も表示できるようにしたいと考えています。だから私はDropzone Wikiから次の投稿を通りました。 https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

dropzone-preview既存の画像があるエリアですが、今回はフォーム送信で既存の画像を送信しません。これは、これらの画像がqueueに追加されていないためだと思いますが、そうであれば、既存の画像がユーザーによって削除された場合にサーバー側でどのように更新できますか？

また、より良いアプローチは何ですか、すでに追加された画像をqueueに再度追加するか、削除されたファイルの情報を送信しますか？

javascriptajaxformsmagentodropzone.js
24
lalit

画像を再度追加しようとして少し時間を費やしましたが、しばらくの間それと戦った後、削除された画像に関する情報をサーバーに送り返すことになりました。

ドロップゾーンに既存の画像を取り込む場合、画像のURLをmockFileオブジェクトに添付します。 removedfileイベントでは、削除するファイルが事前入力された画像である場合、フォームに非表示の入力を追加します（イベントに渡されるファイルにurlプロパティがあるかどうかをテストすることで決定します）。以下に関連するコードを含めました。

Dropzone.options.imageDropzone = {
    paramName: 'NewImages',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    init: function () {
        var myDropzone = this;

        //Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = { 
                    name: "myimage.jpg", 
                    size: 12345, 
                    type: 'image/jpeg', 
                    status: Dropzone.ADDED, 
                    url: thumbnailUrls[i] 
                };

                // Call the default addedfile event handler
                myDropzone.emit("addedfile", mockFile);

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.files.Push(mockFile);
            }
        }

        this.on("removedfile", function (file) {
            // Only files that have been programmatically added should
            // have a url property.
            if (file.url && file.url.trim().length > 0) {
                $("<input type='hidden'>").attr({
                    id: 'DeletedImageUrls',
                    name: 'DeletedImageUrls'
                }).val(file.url).appendTo('#image-form');
            }
        });
    }
});

サーバーコード（asp mvcコントローラー）：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        foreach (var url in viewModel.DeletedImageUrls)
        {
            // Code to remove the image
        }

        foreach (var image in viewModel.NewImages)
        {
            // Code to add the image
        }
    }
}

それがお役に立てば幸いです。

28
Teppic

Teppicの答えを拡張するには、プレビューの進行状況バーを削除するためにcompleteイベントを発行する必要があることがわかりました。

var file = {
    name: value.name,
    size: value.size,
    status: Dropzone.ADDED,
    accepted: true
};
myDropzone.emit("addedfile", file);                                
myDropzone.emit("thumbnail", file, value.path);
myDropzone.emit("complete", file);
myDropzone.files.Push(file);
11
Cloud_Ratha

単にmyDropzone.addFile(file)を使用してください

ドロップゾーンのソースコードから https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

2
Fareed Alnamrouti

元々、既存のファイルをプログラムでアップロードするためにこれを行っていました。

myDropzone.emit("addedfile", imageFile);                                
myDropzone.emit("thumbnail", imageFile, imageUrl);
myDropzone.files.Push(file);

しかし、これを参照 Dropzone Github Issue 私は直接アップロードする簡単な方法を見つけました：

myDropzone.uploadFiles([imageFile])

残念ながら、 Dropzone Documentation にはこのuploadFilesメソッドへの参照がないため、すべての知識を共有すると思いましたDropzoneユーザー。

これが誰かを助けることを願って

1
Cumulo Nimbus

公式のFAQそのために here

1
Stefan Gabos

アップロードファイルをクリックすると、dropzoneからファイルをクリアするだけです。 removeAllFiles（）を使用してすべてのファイルをクリアするか、removeFile（fileName）を使用して削除することもできます。

0
Sumit Khandade