how to upload and delete files from dropzone.js

问题:

I have used the below code the image has been deleted but the thumbnail image still showing.

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

回答1:

For deleting thumbnails you have to enable addRemoveLinks: true, and to use "removedfile" option in dropzonejs

removedfile: Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.

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

I also added an ajax call for delete script and it looks like this:

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

It works on my side, so I hope it helps.

回答2:

in addition to the best answer above - to remove spaces and replace with dashes and convert to lower case apply this js in the dropzone.js file:

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

to the filename handling - I edited the dropzone.js file AND the above ajax call. This way the client handles the filenaming and it AUTOMATICALLY gets sent to the php/server side so u dont have to redo it there, and its url safe pretty much.

In some instances the js changed depending on the function / naming:

dropzone.js - line 293 (approx):

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

dropzone.js - line 746 (approx):

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

I moved the whole removedFile section up to the top of dropzone.js like so:

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

Note I also added in a message box in the html: (div id="msg">) in the html that will allow server side error handling/deleting to post a message back to the user as well.

in dropzone.php:

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

This is only an expansion with working code on my side. I have 3 files, dropzone.html/dropzone.php/dropzone.js

Obviously you would create a js function instead of repeating the code but since the naming changes it suited me. You could just pass the variables in a js function yourself to handle filename spaces / chars / etc.

回答3:

Yes you can easily delete file from database as well as from server folder. I did this by writing a function and calling delete.php and passed fid as parameter:

function deletefile(value)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 alert(xmlhttp.responseText);
    }
  }
xmlhttp.open("GET","delete.php?fid="+value,true);
xmlhttp.send();
}

set fid like this

file.fid=responseText;  

You can get the working code from here