web-dev-qa-db-fra.com

comment ajouter l'option removefile dans le plugin dropzone?

J'ai utilisé dropzone.js ( http://www.dropzonejs.com/ ). J'essaie d'ajouter un bouton Supprimer pour supprimer l'image. mais j'obtiens une erreur javascript indéfinie

 <script>
  Dropzone.options.myDropzone = {
init: function() {
 addRemoveLinks: true,  
thisDropzone = this;
 $.get('photo-add.php', function(data) {
 $.each(data, function(key,value){
var mockFile = { name: value.name, size: value.size };
  thisDropzone.options.addedfile.call(thisDropzone, mockFile);
 thisDropzone.options.thumbnail.call(thisDropzone, mockFile,      "upload/"+value.name);

});
 });

 this.on("removedfile", function(file) {
alert(file.name);
console.log(file);
     // Create the remove button
  var removeButton = Dropzone.createElement("<button>Remove file</button>");

 /    / Capture the Dropzone instance as closure.
  var _this = this;

 // Listen to the click event
 removeButton.addEventListener();

   // Add the button to the file preview element.
  file.previewElement.appendChild(removeButton);
    });
  }
  };
     </script>
javascriptphpjquerymysql
8
markatte team

Je pense que vous ne configurez pas la dropzone de manière appropriée. 

init: function() {
 addRemoveLinks: true,

Le code ci-dessus n'est pas valide.

Utiliser comme ça

Dropzone.options.myAwesomeDropzone = {
  addRemoveLinks: true,
  init: function() {

  }

  ...

};

ou bien vous pouvez aussi utiliser comme this.addRemoveLinks = true

Si vous voulez gérer l'événement de suppression de fichier, vous pouvez utiliser comme ceci

removedfile: function(file) {
    x = confirm('Do you want to delete?');
    if(!x)  return false;
}

Gérer la suppression du fichier côté serveur.  

en cas de succès méthode de dropzone Poussez le nom du fichier dans un tableau, par exemple: file_up_names=[];

 success:function(file){
   file_up_names.Push(file.name);

maintenant sur delete, récupérez le nom et transmettez-le à la page php pour la suppression du fichier.

 removedfile: function(file) {

    x = confirm('Do you want to delete?');
    if(!x)  return false;
    for(var i=0;i<file_up_names.length;++i){

      if(file_up_names[i]==file.name) {

        $.post('delete_file.php', 
             {file_name:file_up_names[i]},
           function(data,status){
             alert('file deleted');
             });
       }
    }
 }

notez également que si vous avez modifié le nom du fichier côté serveur, vous devez récupérer ce nom pour le supprimer.

17
Tintu C Raju

Essayez ci-dessous le code: 

Dropzone.autoDiscover = false;
var acceptedFileTypes = "image/*"; //dropzone requires this param be a comma separated list
var fileList = new Array;
var i = 0;
$("#dropzone").dropzone({
    addRemoveLinks: true,
    maxFiles: 10, //change limit as per your requirements
    dictMaxFilesExceeded: "Maximum upload limit reached",
    acceptedFiles: acceptedFileTypes,
    dictInvalidFileType: "upload only JPG/PNG",
    init: function () {

        // Hack: Add the dropzone class to the element
        $(this.element).addClass("dropzone");

        this.on("success", function (file, serverFileName) {
            fileList[i] = {
                "serverFileName": serverFileName,
                "fileName": file.name,
                "fileId": i
            };
            $('.dz-message').show();
            i += 1;
        });
        this.on("removedfile", function (file) {
            var rmvFile = "";
            for (var f = 0; f < fileList.length; f++) {
                if (fileList[f].fileName == file.name) {
                    rmvFile = fileList[f].serverFileName;
                }
            }

            if (rmvFile) {
                $.ajax({
                    url: path, //your php file path to remove specified image
                    type: "POST",
                    data: {
                        filenamenew: rmvFile,
                        type: 'delete',
                    },
                });
            }
        });

    }
});
3
Dhaval Bharadva

"Tous vos événements" comme: succès - erreur - envoi - fichier supprimé ou fichier ajouté, etc.

http://www.dropzonejs.com/#event-list

init : function () {
    self.on('Every your events', function (file, response) {
        this.removeFile(file);
    }
}

pour supprimer le fichier de hors de cette fonction peut faire ceci:

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);
2
Mahdi Bashirpour

Je suis tombé sur le même problème. Je pensais que la réponse de Dhaval pourrait aider, mais j'ai trouvé un moyen plus clair grâce à la documentation. 

des docs:

Si vous souhaitez qu'un lien spécifique supprime un fichier (au lieu du fichier Intégré dans la configuration addRemoveLinks), vous pouvez simplement insérer des éléments dans le fichier modèle avec l'attribut data-dz-remove. Exemple:

<img src="removebutton.png" alt="Click me to remove the file."
> data-dz-remove />

J'ai testé ce même attribut sur un bouton de mon modèle de prévisualisation et cela a fonctionné selon les besoins. 

1
Greg Sipes

Essayez ci-dessous le code:

Dropzone.autoDiscover = false;

  var dropzone = new Dropzone ("#mydropzone", {
    maxFilesize: 256, // Set the maximum file size to 256 MB
    paramName: "document[attachment]", // Rails expects the file upload to be something like model[field_name]
    autoProcessQueue: false,
    addRemoveLinks: true // Don't show remove links on dropzone itself.
  });

  dropzone.on("removedfile", function(file){
    alert('remove triggered');
  });

  dropzone.on("addedfile", function(file){
    alert('add triggered');
  });

  dropzone.on("success", function(file){
    alert('success triggered');
  });
0
gauravbhai daxini

Du côté serveur

téléverser un fichier

Enregistrez le fichier et, si vous décidez de stocker les informations de fichier sur la base de données, echo ID de fichier de la table de base de données ou si vous décidez de stocker le fichier sur le disque uniquement, indiquez le nouveau nom du fichier.

effacer le fichier

Supprimez le fichier avec l'identifiant ou le nom reçu de POST var $ _POST ["fid"] ou. avec le nom spécifié dessus.

Javascript JQuery 

fileList = new Array();
$("#fm-dropzone").dropzone({
  url: siteurl, 
  addRemoveLinks: true, 
  dictRemoveFileConfirmation: "Are you sure you want to remove this File?",     
  success: function(file, serverFileName) {
             fileList[file.name] = {"fid" : serverFileName };
           },
  removedfile: function(file) {
            $.post(siteurl + "/removeFile", fid:fileList[file.name].fid}).done(function() {
                    file.previewElement.remove();
                }); 
           }
});
0
libnac