How to remove the existing file dropzone?

user_5907084 0
Viewed 57957

I have this sample:

link

CODE HTML:

<div class="dropzone dz-clickable" id="myDrop">
     <div class="dz-default dz-message" data-dz-message="">
          <span>Upload or drag patient photo here</span>
     </div>
</div>

CODE JS:

 Dropzone.autoDiscover = false;
 var myDropzone = new Dropzone("div#myDrop", {
   addRemoveLinks: true,
   url: "#",
   maxFiles: 1,
   init: function() {

     this.on("maxfilesexceeded", function(file) {
       alert("You are not allowed to chose more than 1 file!");
       this.removeFile(file);

     });

     this.on("addedfile", function(file) {
       myDropzone.options.removefile.call(myDropzone, mockFile);
       //  I want to delete an existing element
     });

   }
 });

 var fileName = $('#profilePicture').val();
 var mockFile = {
   name: fileName,
   size: 12345
 };
 myDropzone.options.addedfile.call(myDropzone, mockFile);
 myDropzone.options.thumbnail.call(myDropzone, mockFile, "https://lh3.googleusercontent.com/-eubcS91wUNg/AAAAAAAAAAI/AAAAAAAAAL0/iE1Hduvbbqc/photo.jpg?sz=104");

What I want to do is when the user uploads a file, then the existing one to be removed.

How can you do this correctly?

Thanks in advance!

dropzone.js html jquery javascript
6 Answers

Try this approach:

 success: function (file, response) {
                    if (this.files.length > 1)
                        this.removeFile(this.files[0]);
                    //Do others tasks...
                }

With this approach the previous item will be removed.

user_39545140

hi you can just add addRemoveLinks: true, to dropzone function and add success function after dropzon ajax 

            success:function(file,response){
              file.serverId = response.id;
    $(".dz-preview:last .dz-remove").attr('onclick','delete_file('+file.serverId+')');
            }

in this code after success upload files comes add into last a tag from dropzone in onclick to call delete_file function and on this function you can receive id and send id to backend, find file in backend and delete files

user_89227850
Related