removeAllFiles Doesn't work in manuallyAddFile

[guyver-dash]

I have managed to add files manually...

for(let i=0; i <= response.data.images.length - 1; i++){
              
              var img = new Image();
              img.onload = function() {}
              img.src = vm.windowLocation + response.data.images[i].path;

               var mockFile = {
                  id: response.data.images[i].id,
                  name: response.data.images[i].name,
                  size: response.data.images[i].size
                };

              var fileUrl = img.src
              vm.$refs.myVueDropzone.manuallyAddFile(mockFile, fileUrl)
            }

My Html for removing looks like this...
<button @click="ClearExample($event)">Clear</button>

My methods:

ClearExample(e){
         e.preventDefault()
         console.log('asdf');
         console.log(this.$refs.myVueDropzone)
         this.$refs.myVueDropzone.removeAllFiles();
      }

I can console log the asdf and myVueDropzone . I can also see the .removeAllFiles function see screenshot but it doesn't work. Any idea? Thanks..

[ecuation]

The method removeAllFIles() doesn't work, but, watching the dropzone documentation you can use the removeFIle() method. I've achieved to remove the files:

this.$refs.fileUploadZone.dropzone.getAcceptedFiles().forEach((file) =>
{
    this.$refs.fileUploadZone.removeFile(file);
});

[vrajroham]

@bobbygerez @ecuation Strange! Which version are you guyz using? Just tested it works fine with me.

[guyver-dash]

It works if you added the file but it doesn't work on manuallyAddFile @version2.3.4

[rowanwins]

ah good clarification thanks @bobbygerez . The way dropzone handles those manually added files isn't the same as ones added by users, it's causing a fair bit of grief and has a number of related issues unfortunantly.

[guyver-dash]

@rowanwins anyway I just used this.$refs.myVueDropzone.$el.innerHTML='' it works but no other choice. Thanks...

[oldskool73]

Also just hit this :(

@ecuation's suggestion didn't seem to work for me, but building on @bobbygerez solution...

let elements = this.$refs.dropzone.$el.getElementsByClassName('dz-preview')
while(elements.length > 0) {
	elements[0].parentNode.removeChild(elements[0])
}

...so it doesn't wipe out the upload prompt or any other html or hidden fields you've inserted (like the laravel csrf token)

[guyver-dash]

@oldskool73 use props :headers="headers" and the data headers: {'X-CSRF-TOKEN': Laravel.csrfToken} I have tried looping the child and deleted it but it seems only one child is removed per events. I don't know why...

[oldskool73]

@bobbygerez : appears to be working for me. If I try calling the removeFile as @ecuation suggested before I loop over the children it does only clear one, then mysteriously puts the rest back after!

Thanks for the headers tip.

[vrajroham]

@bobbygerez @oldskool73 It's really weired! I have vue2-dropzone updated to latest version in this demo, You can test it in demo. Everything is working as expected in demo as per documentation.

[guyver-dash]

@vrajroham the removeAllFiles doesn't work if you will use manuallyAddFile @version2.3.4 other than that it works. According to @rowanwins "The way dropzone handles those manually added files isn't the same as ones added by users, it's causing a fair bit of grief and has a number of related issues unfortunantly."

[vrajroham]

Hi folks,

Version 3 is now released. Check out the new docs for more info.