web-dev-qa-db-fra.com

Dropzone.js- Comment supprimer des fichiers du serveur?

J'utilise dropzone.js. Lorsque j'essaie de supprimer des fichiers, seules les vignettes sont supprimées, mais pas les fichiers du serveur. J'ai essayé de plusieurs manières mais cela me donne simplement le nom de l'image qui était côté client et non pas le nom côté serveur (les deux noms sont différents, stockant les noms sous forme cryptée).

Toute aide serait très appréciée..

javascriptjquerydropzone.js
9
Grish

La façon dont je gère cela, c’est après que chaque fichier est chargé et stocké sur le serveur, je renvoie en écho le nom que je donne au fichier sur mon serveur et le stocke dans un objet JS.

PHP:

move_uploaded_file($_FILES['file']['tmp_name'], $newFileName);
echo $newFileName;

JS:

dropZone.on("success", function(file, serverFileName) {
  fileList[serverFileName] = {"serverFileName" : serverFileName, "fileName" : file.name };
});

Avec cela, vous pouvez ensuite écrire un script de suppression dans PHP qui prend le "nomFichierServeur" et effectue la suppression proprement dite, telle que:

JS:

$.ajax({
    url: "upload/delete_temp_files.php",
    type: "POST",
    data: { "fileList" : JSON.stringify(fileList) }
});

PHP:

$fileList = json_decode($_POST['fileList']);

for($i = 0; $i < sizeof($fileList); $i++)
{
    unlink(basename($fileList[$i]));
}
15
FunkeDope

Autrement,

Obtenez response de votre serveur au format JSON ou une chaîne simple (utilisez uniquement response au lieu de response.path),

dropzone.on("success", function(file, response) {
  $(file.previewTemplate).append('<span class="server_file">'+response.path+'</span>');
});

Ici, le serveur peut renvoyer un JSON comme celui-ci,

{
    status: 200,
    path: "/home/user/anything.txt"
}

Nous stockons donc cette path dans une span à laquelle nous pouvons accéder lorsque nous allons la supprimer.

dropzone.on("removedfile", function(file) {
  var server_file = $(file.previewTemplate).children('.server_file').text();
  alert(server_file);
  // Do a post request and pass this path and use server-side language to delete the file
  $.post("delete.php", { file_to_be_deleted: server_file } );
});

Après le processus, le modèle de prévisualisation sera supprimé de Dropzone avec le chemin d'accès au fichier stocké dans une span.

15
Harsh Vakharia

Moyen le plus simple

JS, ce script sera exécuté lorsque vous cliquerez sur le bouton Supprimer

this.on("removedfile", function(file) {
alert(file.name);

$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'name': file.name}
});


});

fichier php "delete.php"

<?php
$t= $_POST['name'];
echo $t;
unlink($t); 
?>
6
yogesh singh

Le fichier sera supprimé lorsque vous cliquerez sur le bouton "Supprimer":

Mettez ceci sur votre fichier JS ou votre fichier HTML (ou votre fichier de vue/action PHP):

<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = { 
// Change following configuration below as you need there bro
autoProcessQueue: true,
uploadMultiple: true,
parallelUploads: 2,
maxFiles: 10,
maxFilesize: 5,
addRemoveLinks: true,
dictRemoveFile: "Remove",
dictDefaultMessage: "<h3 class='sbold'>Drop files here or click to upload document(s)<h3>",
acceptedFiles: ".xls,.xlsx,.doc,.docx",
//another of your configurations..and so on...and so on...
init: function() {
     this.on("removedfile", function(file) {
          alert("Delete this file?");
          $.ajax({
               url: '/delete.php?filetodelete='+file.name,
               type: "POST",
               data: { 'filetodelete': file.name}
          });
     });
}}
</script>

..et Mettez ce code dans votre fichier PHP:

<?php
     $toDelete= $_POST['filetodelete'];
     unlink("{$_SERVER['DOCUMENT_ROOT']}/*this-is-the-folder-which-you-put-the-file-uploaded*/{$toDelete}");
     die;
?>

J'espère que cela vous aide, mon frère :)

2
Raymond
success: function(file, serverFileName)
        {
            fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };

            alert(file.name);
            alert(serverFileName);
        },
        removedfile: function(file, serverFileName)
        {
            fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };

            alert(file.name);
            alert(serverFileName);
        }
2
Karthiga

J'ai simplifié la tâche en ajoutant une nouvelle propriété serverFileName à l'objet fichier: 

    success: function(file, response) {
        file.serverFileName = response.file_name;
    },
    removedfile: function (file, data) {
        $.ajax({
            type:'POST',
            url:'/deleteFile',
            data : {"file_name" : file.serverFileName},
            success : function (data) {
            }
        });
    }
1
Supervision

Cette solution simple fonctionnera pour le téléchargement de fichiers uniques, pas besoin de manipulation DOM.

PHP Script de téléchargement 

  [...]
  echo $filepath; // ie: 'medias/articles/m/y/a/my_article/my-image.png'

JS Dropzones 

  this.on("success", function(file, response) {
        file.path = response; // We create a new 'path' index
  });
  this.on("removedfile", function(file) {
        removeFile(file.path)
  });

JS en dehors de Dropzone 

var removeFile = function(path){
   //SEND PATH IN AJAX TO PHP DELETE SCRIPT
    $.ajax({
        url: "uploads/delete.php",
        type: "POST",
        data: { 'path': path}
    });
}
0
Tom Toms

Lorsque vous enregistrez l'image en téléchargement à partir de là, vous devez renvoyer un nouveau nom de fichier:

echo json_encode (array ("Nom de fichier" => "Nouveau nom de fichier"));

Et dans le fichier dropzone.js:

succès: fonction (fichier, réponse) {

    obj = JSON.parse(response);

    file.previewElement.id = obj.Filename;
    if (file.previewElement) {
      return file.previewElement.classList.add("dz-success");
    }
  },

Et quand le dropzone est initialisé ..

init: function () {

    this.on("removedfile", function(file) {
      var name = file.previewElement.id;
        $.ajax({
        url: "post URL",
        type: "POST",
        data: { 'name': name}
        });


    });

    return noop;
  },

Maintenant, vous recevrez un nouveau fichier image et vous pourrez le supprimer du serveur.

0
Hardik Deliwala

Dans mon cas, le serveur renvoie une réponse ajax avec deleteUrl pour chaque image spécifique. Je viens d'insérer cette URL en tant qu'attribut 'data-dz-remove', défini dans previewTemplate déjà.

Comme je l’utilise jquery, cela a l’air:

this.on("success", function (file, response) {
    $(file.previewTemplate).find('a.dz-remove').attr('data-dz-remove', response.deleteUrl);
});

Plus tard, cette attr utilisait pour envoyer un message ajax avec cette URL afin de supprimer un fichier sur le serveur par un événement removefile, comme mentionné ci-dessus.

0
aiho