web-dev-qa-db-fra.com

comment télécharger et supprimer des fichiers de dropzone.js

J'ai utilisé le code ci-dessous, l'image a été supprimée mais la vignette est toujours affichée.

 Dropzone.options.myDropzone = {
  init: function() {
    this.on("success", function(file, response) {
      file.serverId = response; 

    });
    this.on("removedfile", function(file) {
      if (!file.serverId) { return; }
      $.post("delete-file.php?id=" + file.serverId); 
    });
  }
javascriptphpjquerydropzone.js
48
Aaru

Pour supprimer les vignettes, vous devez activer AddRemoveLinks: true, .__ et utiliser l'option "removefile" dans dropzonejs

removedfile: Appelé chaque fois qu'un fichier est supprimé de la liste. Vous pouvez écouter cela et supprimer le fichier de votre serveur si vous le souhaitez.

addRemoveLinks: true,
removedfile: function(file) {
    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
  }

J'ai également ajouté un appel ajax pour supprimer un script, qui se présente comme suit:

addRemoveLinks: true,
removedfile: function(file) {
    var name = file.name;        
    $.ajax({
        type: 'POST',
        url: 'delete.php',
        data: "id="+name,
        dataType: 'html'
    });
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
              }

Cela fonctionne de mon côté, alors j'espère que cela aidera.

86
6opko

en plus de la meilleure réponse ci-dessus - pour supprimer des espaces et les remplacer par des tirets et convertir en minuscules, appliquez ce js dans le fichier dropzone.js:

name=name.replace(/\s+/g, '-').toLowerCase();

à la gestion du nom de fichier - j'ai modifié le fichier dropzone.js ET l'appel ajax ci-dessus. De cette façon, le client gère le nom de fichier et il est AUTOMATIQUEMENT envoyé au côté php/serveur afin que vous n'ayez pas à le refaire là-bas, et son URL est sécurisée.

Dans certains cas, le js a changé en fonction de la fonction/nommage:

dropzone.js - ligne 293 (environ):

node = _ref[_i];
node.textContent = this._renameFilename(file.name.replace(/\s+/g, '-').toLowerCase());

dropzone.js - ligne 746 (environ):

Dropzone.prototype._renameFilename = function(name) {
   if (typeof this.options.renameFilename !== "function") {
   return name.replace(/\s+/g, '-').toLowerCase();
   }
   return this.options.renameFilename(name.replace(/\s+/g, '-').toLowerCase());
};

J'ai déplacé toute la section removeFile vers le haut de dropzone.js comme ceci:

 autoQueue: true,
  addRemoveLinks: true,

  removedfile: function(file) {

     var name = file.name;    
     name =name.replace(/\s+/g, '-').toLowerCase();    /*only spaces*/
      $.ajax({
          type: 'POST',
          url: 'dropzone.php',
          data: "id="+name,
          dataType: 'html',
          success: function(data) {
                    $("#msg").html(data);

            }
      });


    var _ref;
    if (file.previewElement) {
      if ((_ref = file.previewElement) != null) {
        _ref.parentNode.removeChild(file.previewElement);
      }
    }
    return this._updateMaxFilesReachedClass();
  },
  previewsContainer: null,
  hiddenInputContainer: "body",

Remarque: j'ai également ajouté une boîte de message au format HTML: (div id = "msg">) au format HTML permettant au traitement des erreurs côté serveur/à la suppression de poster également un message à l'utilisateur.

dans dropzone.php:

if(isset($_POST['id']){
//delete/unlink file 
echo $_POST['id'].' deleted'; // send msg back to user
}

Ce n'est qu'une extension avec un code de travail de mon côté. J'ai 3 fichiers, dropzone.html/dropzone.php/dropzone.js

Évidemment, vous créeriez une fonction js au lieu de répéter le code, mais comme le nom change, cela me convient. Vous pouvez simplement passer les variables dans une fonction js vous-même pour gérer les espaces de nom de fichier/caractères/etc.

0
Fstarocka Burns