Question

37

how to add removefile option in dropzone plugin?

rated 0 times [ 41] [ 4] / answers: 1 / hits: 61654 / 9 Years ago, mon, november 16, 2015, 12:00:00

I have used dropzone.js (http://www.dropzonejs.com/). I am trying to add delete button to delete the image. but i am getting 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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

debra

Add To Favorites

Follow

Total Points: 583

Total Questions: 111

Total Answers: 111

Location: Reunion

Member since Mon, Dec 28, 2020

4 Years ago

answered 9 Years ago jenamackennac · Accepted Answer

I think you are not configuring the dropzone in proper way.

init: function() {

 addRemoveLinks: true,

The code above is not valid .

Use like this

Dropzone.options.myAwesomeDropzone = {

  addRemoveLinks: true,

  init: function() {



  }



  ...



};

or else you can also use like this.addRemoveLinks = true

If you want to handle the event of removing file you can use like this

removedfile: function(file) {

    x = confirm('Do you want to delete?');

    if(!x)  return false;

}

Handle the deletion of file on server side.

on success method of dropzone push the file name to an array eg : file_up_names=[];

 success:function(file){

   file_up_names.push(file.name);

now on delete get the name and pass it to the php page for file deletion.

 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 if you have changed the file name on server side you have to get back that file name to delete.