Dodaj istniejące pliki obrazów w Dropzone

Question

Używam do dodawania funkcji przesyłania zdjęć do formularza, ponieważ mam różne inne pola w formularzu, dlatego ustawiłem autoProcessQueue na false i przetwarzam je na kliknij przycisk Wyślij formularza, jak pokazano poniżej .

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

To działa dobrze i pozwala mi przetwarzać wszystkie obrazy wysłane po przesłaniu formularza. Jednak chcę też móc wyświetlać obrazy już przesłane przez użytkownika, gdy ponownie edytuje formularz. Więc poszedłem za postem z Dropzone Wiki. https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

Która wypełnia obszar dropzone-preview z istniejącymi obrazami, ale nie wysyła już istniejących zdjęć przy użyciu formularza przesłanego tym razem. Domyślam się, że to dlatego, że obrazy te nie są dodawane w queue, ale jeśli tak, to jak można aktualizować po stronie serwera, na wypadek, gdyby istniejące zdjęcie zostało usunięte przez użytkownika?

Ponadto, jakie byłoby lepsze podejście, dodać ponownie dodane zdjęcia w queue lub po prostu wysłać informacje o usuniętym pliku?

Answer 1

Spędziłem trochę czasu, próbując dodać obrazy ponownie, ale po walce z nim przez chwilę skończyło się na wysyłaniu informacji o usuniętych obrazach z powrotem na serwer.

Podczas wypełniania zrzutów z istniejącymi obrazami dołączam adres URL obrazu do obiektu mockFile. W zdarzeniu removedfile dodam ukryte dane wejściowe do formularza, jeśli usuwany plik jest wstępnie wypełnionym obrazem (określony przez sprawdzenie, czy plik przekazany do zdarzenia ma właściwość url). Mam włączone odpowiedni kod poniżej:

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

kodu serwera (ASP MVC kontrolera):

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

Mam nadzieję, że pomaga.

Answer 2

Po kliknięciu przesłanych plików wystarczy wyczyścić pliki ze strefy dropzone. Wszystkie pliki można usunąć za pomocą removeAllFiles() lub określonego pliku, który można również usunąć za pomocą removeFile (fileName).

Answer 3

Aby rozszerzyć odpowiedź Teppica, stwierdziłem, że musisz wydać całe wydarzenie, aby usunąć pasek postępu na podglądzie.

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

Answer 4

Początkowo robiłem to programowo przesłać wstępną istniejącego pliku:

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

Jednakże, zgodnie z niniejszą Dropzone Github Issue znalazłem łatwiejszy sposób, aby bezpośrednio Dodano:

myDropzone.uploadFiles([imageFile]) 

Niestety nie ma żadnych odniesień do tej metody uploadFiles w Dropzone Documentation, więc pomyślałem, że będę podziel się wiedzą ze wszystkimi użytkownikami Dropzone.

Nadzieja to pomaga komuś

Answer 5

wystarczy użyć myDropzone.addFile(file)

z kodu źródłowego DropZone https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978