web-dev-qa-db-fra.com

Ajouter des fichiers d'image existants dans Dropzone

J'utilise Dropzonejs pour ajouter une fonctionnalité de téléchargement d'image dans un formulaire, car j'ai plusieurs autres champs dans le formulaire, j'ai donc défini autoProcessQueue sur false et je le traite en cliquant sur Soumettre bouton du formulaire comme indiqué ci-dessous.

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

Cela fonctionne très bien et me permet de traiter toutes les images envoyées lorsque le formulaire est soumis. Cependant, je veux également pouvoir voir les images déjà téléchargées par l'utilisateur lorsqu'il modifiera à nouveau le formulaire. J'ai donc suivi le post suivant de Dropzone Wiki. https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

Qui remplit dropzone-preview zone avec des images existantes mais n'envoie pas d'images existantes avec le formulaire soumis cette fois. Je suppose que c'est parce que ces images ne sont pas ajoutées dans queue mais si c'est le cas, alors comment mettre à jour côté serveur, au cas où une image existante serait supprimée par l'utilisateur?

De plus, quelle serait la meilleure approche, ajouter à nouveau des images déjà ajoutées dans queue ou simplement envoyer des informations sur le fichier supprimé?

javascriptajaxformsmagentodropzone.js
24
lalit

J'ai passé un peu de temps à essayer d'ajouter à nouveau des images, mais après y avoir lutté pendant un certain temps, j'ai fini par renvoyer des informations sur les images supprimées au serveur.

Lors du remplissage de la zone de dépôt avec des images existantes, j'attache l'URL de l'image à l'objet mockFile. Dans l'événement de fichier supprimé, j'ajoute une entrée masquée au formulaire si le fichier qui est supprimé est une image pré-remplie (déterminée en testant si le fichier transmis à l'événement possède une propriété url). J'ai inclus le code correspondant ci-dessous:

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

Code serveur (contrôleur 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
        }
    }
}

J'espère que ça aide.

28
Teppic

Pour étendre la réponse de Teppic, j'ai trouvé que vous deviez émettre l'événement complet pour supprimer la barre de progression sur l'aperçu.

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

utilisez simplement myDropzone.addFile(file)

à partir du code source dropzone https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

2
Fareed Alnamrouti

À l'origine, je faisais cela pour télécharger par programme un fichier préexistant:

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

Cependant, en référençant cela Dropzone Github Issue J'ai trouvé un moyen plus simple de télécharger directement:

myDropzone.uploadFiles([imageFile])

Malheureusement, il n'y a aucune référence à cette méthode uploadFiles dans la Dropzone Documentation , donc je me suis dit que je partagerais certaines connaissances avec tous vous les utilisateurs de Dropzone.

J'espère que cela aide quelqu'un

1
Cumulo Nimbus

Il y a un FAQ pour cela ici

1
Stefan Gabos

Au clic des fichiers téléchargés, effacez simplement les fichiers de la zone de dépôt. Tous les fichiers peuvent être effacés à l'aide de removeAllFiles () ou d'un fichier spécifique. Vous pouvez également les supprimer à l'aide de removeFile (fileName).

0
Sumit Khandade