Fügen Sie vorhandene Bilddateien in Dropzone hinzu

Ich bin mit Dropzonejs zum hinzufügen von Bild-upload-Funktionalität in einer Form, wie ich verschiedene andere Felder im Formular, so habe ich autoProcessQueue zu false und-Verarbeitung beim klicken auf Submit-button der Form, wie unten gezeigt.

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();
         });
     }
 }

Dies funktioniert gut und erlaubt es mir, zu verarbeiten und alle Bilder gesendet werden, wenn die form übermittelt wird. Allerdings möchte ich auch in der Lage sein zu sehen, Bilder, die bereits hochgeladen von Benutzer, wenn er bearbeitet die form wieder. Also ging ich durch folgenden Beitrag von Dropzone Wiki.
https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

Füllt dropzone-preview Bereich mit vorhandenen Bildern, aber es sendet nicht vorhandene Bilder mit Formular Absenden dieser Zeit. Ich denke, das ist, weil diese Bilder nicht mehr in queue aber Wenn es so ist, wie kann dann update auf der server-Seite, Im Falle eines vorhandenen Bildes entfernt wird, um Benutzer?

Außerdem, was wäre der bessere Ansatz, hinzufügen, die bereits aufgenommen Bilder in queue wieder oder einfach nur Informationen senden der Datei entfernt?

InformationsquelleAutor der Frage lalit | 2014-06-27

  1. 28

    Ich verbrachte ein bisschen Zeit, um zu versuchen, um Bilder hinzuzufügen, wieder, aber nach kämpfen für eine Weile landete ich nur das senden von Informationen über gelöschte Bilder wieder auf den server.

    Beim Auffüllen dropzone mit vorhandenen Bildern lege ich die Bild-url auf die mockFile Objekt. In der removedfile Veranstaltung füge ich einen versteckten Eingang zu dem Formular, wenn die Datei, die entfernt wird ist eine vorkonfigurierte image (ermittelt durch Prüfung, ob die Datei übergeben wird, in der Veranstaltung eine url-Eigenschaft). Ich habe den entsprechenden code unten:

    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');
            }
        });
    }
});

    Server-code (asp-mvc-controller):

    [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
        }
    }
}

    Ich hoffe, das hilft.

    InformationsquelleAutor der Antwort Teppic

  2. 9

    Erweitern auf Teppic ' s Antwort fand ich Sie benötigt, um zu emittieren, die Veranstaltung komplett zu entfernen, den Fortschritt-bar auf dem Album.

    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);

    InformationsquelleAutor der Antwort Cloud_Ratha

  3. 2

    verwenden Sie einfach myDropzone.addFile(file)

    vom dropzone-source-code https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

    InformationsquelleAutor der Antwort Fareed Alnamrouti

  4. 1

    Ursprünglich war ich auf diese Weise programmgesteuert upload eine bereits vorhandene Datei:

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

    Jedoch verweisen auf dieses Dropzone Github Issue fand ich eine einfachere Möglichkeit, direkt hochladen:

    myDropzone.uploadFiles([imageFile])

    Leider gibt es keine Verweise auf dieses uploadFiles Methode in der Dropzone Dokumentationso dass ich dachte, ich würde teilen einige wissen Sie Dropzone Benutzer.

    Hoffe, dies hilft jemand

    InformationsquelleAutor der Antwort Cumulo Nimbus

  5. 0

    Beim klicken des hochladen von Dateien, löschen Sie einfach die Dateien von der dropzone.
    Alle Dateien können gelöscht werden mit removeAllFiles() oder spezifische Datei können Sie löschen, indem Sie Sie mit removeFile(mit dem Namen).

    InformationsquelleAutor der Antwort Sumit Khandade

Schreibe einen Kommentar