come aggiungere l'opzione removefile nel plugin dropzone?

Question

Ho usato dropzone.js (http://www.dropzonejs.com/). Sto cercando di aggiungere il pulsante Elimina per eliminare l'immagine. ma sto ottenendo javascript errore non definito

<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> 

Answer 1

Credo che non si sta configurando il dropzone in modo corretto.

init: function() { 
addRemoveLinks: true, 

Il codice sopra non è valido.

Usa come questo

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

    } 

    ... 

}; 

altrimenti si può anche utilizzare come this.addRemoveLinks = true

Se si vuole gestire l'evento di rimozione di file che è possibile utilizzare in questo modo

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

maniglia la cancellazione del file sul lato server.

sul metodo di successo della zona di lancio spingere il nome di file a un array ad esempio: file_up_names=[];

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

ora in poi eliminare ottenere il nome e passarlo sulla pagina php per l'eliminazione dei file.

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

nota anche se è stato modificato il nome del file sul lato server è necessario recuperare il nome del file da eliminare.

Answer 2

Prova sottostante Codice:

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

    } 
}); 

Answer 3

mi sono imbattuto in questo stesso problema. Pensavo che la risposta di Dhaval avrebbe aiutato, ma ho trovato un modo più pulito dalla documentazione.

dalla documentazione:

Se volete qualche link specifico per rimuovere un file (invece del costruito in addRemoveLinks config), si può semplicemente inserire gli elementi nel modello con i dati-DZ rimuovere l'attributo. Esempio:

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

Ho provato questo stesso attributo su un pulsante nel mio modello di anteprima e ha funzionato come necessario.

Answer 4

Server Side

UploadFile

Salva file e, se si decide di memorizzare le informazioni di file su base di dati, eco ID file di tabella di database o se si decide di archiviare file su disco Solo , echo il nuovo nome per il file.

RemoveFile

file rimuove con id o il nome ricevuto da POST var $ _POST [ "FID"] o con il nome specificato su di esso.

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

Answer 5

"Ogni tuoi eventi" piace: il successo - errore - invio - removedfile o addedfile ed ecc

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

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

per rimuovere file da questa funzione può fare questo:

Dropzone.forElement("#YourDropBoxId").removeAllFiles(true);