How to add removefile parameter to dropzone plugin?

Question

I used dropzone.js ( http://www.dropzonejs.com/ ). I am trying to add a delete button to delete an image. but i get javascript undefined error

<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

I think you are not dropzone up dropzone .

 init: function() { addRemoveLinks: true, 

Invalid code.

Use it as

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

otherwise you can also use like this.addRemoveLinks = true

If you want to handle the file deletion event, you can use this as

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

Process file deletion on the server side.

with the successful dropzone method, click the file name into the array, for example: file_up_names=[];

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

now when you delete, get the name and submit it to the php page to delete the 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'); }); } 

Also note that if you changed the file name on the server side, you need to return this file name for deletion.

Answer 2

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

Answer 3

I ran into this problem. I thought the answer of Dhaval would help, but I found a cleaner way from the documentation.

from documents:

If you need a specific link to delete a file (instead of the built-in config addRemoveLinks), you can simply insert elements into the template with the data-dz-remove attribute. Example:

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

I tested the same attribute on a button in my preview template, and it worked as needed.

Answer 4

"All your events" Like: success - error - sending - deleted file or added file, etc.

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

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

To delete a file from this function, you can do the following:

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

Answer 5

Server side

uploadFile

Save the file and, if you decide to save the file information in the database, the file identifier of the echo file table, or if you decide to store the file on disk only, echo the new file name.

removeFile

Delete the file with the identifier or name obtained from POST var $ _POST ["fid"] or with the name specified by it.

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