web-dev-qa-db-fra.com

Effacer la vignette de dropzone.js après le téléchargement d'une image

J'ai utilisé dropzone.js dans MVC en suivant ce tutorial pour télécharger des images, mais après avoir téléchargé l’image, la vignette est toujours affichée et j’ai besoin de la supprimer chaque fois que je télécharge une image.

J'ai essayé de remplacer le code HTML généré après le téléchargement de l'image à l'aide de jQuery, mais il ne s'affiche pas correctement car c'est la première fois que je dois actualiser la page pour qu'il s'affiche correctement, mais je ne souhaite pas le faire.

 $("#ImageUpload").replaceWith('<form action="/Products/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone dz-clickable" id="dropzoneForm">'
 +'<div class="fallback">'
 +'<input name="file" type="file" multiple />'
 +'<input type="submit" value="Upload" />'
 +'</div>');
javascriptjqueryajaxasp.net-mvcdropzone.js
15
Fadi

Vous pouvez essayer ceci:

myDropzone.on("complete", function(file) {
  myDropzone.removeFile(file);
});

Plus d'informations ici: http://www.dropzonejs.com/#dropzone-methods

20
Giraldi

removeAllFiles() et removeFile() déclenchent également la suppression côté serveur, si vous avez également demandé à Dropzone de supprimer des fichiers.

La solution consiste à effacer l'aperçu du fichier uniquement côté client, et si vous aviez un message d'état vide, supprimez la classe dz-started pour empêcher le CSS Dropzone de le masquer:

$('.dropzone')[0].dropzone.files.forEach(function(file) { 
  file.previewElement.remove(); 
});

$('.dropzone').removeClass('dz-started');
7
Flavio Copes

Une autre option (similaire à la réponse de Giraldi, mais lorsque tous les fichiers sont terminés): 

myDropzone.on("queuecomplete", function () {
    this.removeAllFiles();
});
6
Allie

c’était en fait une chose facile à faire, mais un peu de temps c’est difficile, donc je supprime simplement le code généré par dropzone à l’aide de jquery et ajoute un bouton avec 'id = btnCreate', puis

 $('#btnCreate').click(function () {
        $('div.dz-success').remove();
   });

et quand je télécharge la vignette supprimée après avoir cliqué sur le bouton 

4
Fadi
docsDropzone.on('complete', function (response)
{
   $(".dz-preview").remove();
});

Ci-dessus fonctionne pour moi

2
Irfan Ashraf

Juste un fyi ...

La méthode removeAllFiles n'est pas nécessairement le premier choix. Qui est identique à removeFile(file). 

J'ai un gestionnaire d'événements pour l'événement removedfile de dropZone ... Je l'utilise pour envoyer un message au serveur afin de supprimer le fichier correspondant du serveur (si un utilisateur supprime la vignette après son téléchargement). L'utilisation de la méthode removeAllFiles (ainsi que de la removeFile(file)) individualisée déclenche l'événement removedfile qui supprime les images téléchargées en plus d'effacer les vignettes.

Donc, on pourrait ajouter quelques précisions à ce sujet, mais dans la réalité, la méthode mentionnée dans la réponse principale sur ce fil n'est pas correcte. 

En regardant dans l'API pour Dropzone, je ne vois pas d'appel d'API pour simplement réinitialiser ou effacer les vignettes ... La méthode disable() effacera les noms de fichiers stockés et ce qui ne disparaît pas mais ne supprime pas les vignettes ... Semble que dropzoneJS manque appel API critique pour être honnête.

Mon travail consiste à réinitialiser manuellement le div contenant pour dropzone:

document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""

Cela efface les vignettes sans déclencher l'événement removedfile qui est censé être utilisé pour supprimer une image du serveur ...

2
kkthxby3

essayez ceci sur votre bibliothèque dropzone dropzone.js; mais le temps imparti pour fermer automatiquement 2500

success: function(file) {
  if (file.previewElement) {
    return file.previewElement.classList.add("dz-success"),
    $(function(){
      setTimeout(function(){
        $('.dz-success').fadeOut('slow');
      },2500);
    });
  }
},
0
heriipurnama

Une autre façon d'effacer ces vignettes

Dropzone.prototype.removeThumbnail = function () {
    $(".dz-preview").fadeOut('slow');
    $(".dz-preview:hidden").remove();
};

alors vous l'appelez comme ceci:

{your_dropzone}.removeThumbnail();
0
jfernandez_04