javascript - Agregue archivos de imágenes existentes en Dropzone

ajax forms

Question

Estoy usando Dropzonejs para agregar funcionalidad de carga de imágenes en un Formulario, ya que tengo varios otros campos en el formulario, por lo que he configurado autoProcessQueue en false y autoProcessQueue al hacer clic en el botón Enviar del formulario, como se muestra a continuación.

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

Esto funciona bien y me permite procesar todas las imágenes enviadas cuando se envía el formulario. Sin embargo, también quiero poder ver las imágenes que ya cargó el usuario cuando edita el formulario nuevamente. Así que revisé la siguiente publicación de Dropzone Wiki. https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

Que rellena el dropzone-preview zona dropzone-preview con imágenes existentes pero no envía imágenes existentes con el formulario submit esta vez. Supongo que esto se debe a que las imágenes de tesis no se agregan en la queue pero si es así, ¿cómo se puede actualizar en el lado del servidor, en caso de que el usuario elimine una imagen existente?

Además, ¿cuál sería el mejor enfoque, agregar imágenes ya agregadas en la queue nuevamente o simplemente enviar información del archivo eliminado?

Answer 1

Al hacer clic en cargar archivos, simplemente borre los archivos de dropzone. Todos los archivos se pueden borrar usando removeAllFiles () o un archivo específico también puede eliminar utilizando removeFile (fileName).

Answer 2

Originalmente estaba haciendo esto para subir un archivo preexistente mediante programación:

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

Sin embargo, al hacer referencia a este Dropzone Github Issue encontré una forma más fácil de cargarlo directamente:

myDropzone.uploadFiles([imageFile])

Lamentablemente, no hay referencias a este método uploadFiles en la documentación de Dropzone , así que pensé que compartiría algunos conocimientos con todos los usuarios de Dropzone.

Espero que esto ayude a alguien

Answer 3

Para extender la respuesta de Teppic, descubrí que necesitaba emitir el evento completo para eliminar la barra de progreso en la vista previa.

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

Pasé un tiempo tratando de agregar imágenes otra vez, pero después de luchar con él por un tiempo terminé simplemente enviando información sobre las imágenes borradas al servidor.

Al rellenar dropzone con imágenes existentes, adjunto la url de la imagen al objeto mockFile. En el evento removedfile, agrego una entrada oculta al formulario si el archivo que se está eliminando es una imagen pre-poblada (determinada al probar si el archivo que se pasa al evento tiene una propiedad url). He incluido el código relevante a continuación:

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

Código de servidor (controlador 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
        }
    }
}

Espero que eso ayude.

Answer 5

solo use myDropzone.addFile(file)

del código fuente dropzone https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978