Vue-dropzone: manuallyAddFile doesn't work

[wilsonwg]

Hi,

My codes:

let dropzone = new Vue({
    el: '#demo',
    data: {

    },
    components: {
        Dropzone
    },
    methods: {
        'showSuccess': function (file, response) {
            console.log('A file was successfully uploaded');
        }
    },
    mounted(){

        var mockFile = {
            id: '1',
            name: 'new.jpg',
            size: 12345
        };

        var fileUrl = 'new.jpg';

        this.$refs.myUniqueID.manuallyAddFile(mockFile, fileUrl);

    }

})

@2.3.3
I get: Error in mounted hook: "TypeError: Cannot read property 'filename' of undefined"

@2.3.2
I get even more error messages such as TypeError: Cannot read property 'clickable' of undefined at VueComponent.mounted

@2.3.1
The file thumbnail shows in the dropzone but doesn't display correctly. And one error message: undefined: GET http://localhost/undefined.

@2.2.8
Everything works correctly and no error message.

[vrajroham]

@wilsonwg we will look into it. Thanks for brief explanation.

[iamgoodbytes]

Just wanted to confirm that after upgrading today to the latest version of vue-dropzone I'm also getting the error. This worked in older versions (I had "version": "2.3.1")

var file = { size: 123, name: "Icon" };
var url = "/storage/" + this.campaign.push_icon;
this.$refs.dropzone.manuallyAddFile(file, url);

but yields the above error Cannot read property 'filename' of undefined in the latest version

[vrajroham]

Sorry for the inconvenience @wilsonwg @iamgoodbytes.

I confirm that this is the bug, which is caused after updating base dropzone library (track here 474948b3) to 5.*. This issue is of base library which has nothing to do with our component. You can track about this issue in base library on their changelog. Since, they released newer version fixing this issue. Sorry for inconvenience caused guyz!

This issue will persist in our recent releases 2.3.1, 2.3.2, 2.3.3

I'll release next version soon fixing and referring this issue!
Thanks :man_technologist:

[vrajroham]

@wilsonwg @iamgoodbytes Please let me know if issue persists or you can close the issue.

[wilsonwg]

OK. Now everything works perfectly! Thank you!

[iamgoodbytes]

Adding files works again (although I get a GET request in my console to /undefined whenever I add a file manually) If I remove the line to manually add a file, that request goes away. The image shows up fine though. I'll look into this more. Thanks for fixing the manual file add!

[DavHanna]

@iamgoodbytes Did you find a fix or an explanation for this undefined get request?

[iamgoodbytes]

@DavHanna I did not. Are you having the same issue? If it's not related to vue-dropzone (still not sure about it), my other guess would be that one of my installed chrome extensions might be causing this.

[alexius]

Hi! Working with version 2.3.5 and adding files manually I get error

"[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'dontSubstractMaxFiles' of undefined"

and GET request to /undefined. I tried to do:

          let images = JSON.parse(myDropzone.images);
          let countImages = images.length;
          for(let i=0; i < countImages; i++){
            let mockFile = { name: images[i].name, size: images[i].size };
            myDropzone.$refs.fileUploadZone.manuallyAddFile(mockFile, images[i].fullPath);
          }

What I did wrong? And how I can resolve this issue?

In vue-dropzone.js I found this code that I suppose produces this error:

methods:{
manuallyAddFile:function(e,t,i,n,o){
this.dropzone.emit("addedfile",e),
this.dropzone.emit("thumbnail",e,t),
this.dropzone.createThumbnailFromUrl(e,t,i,n),
this.dropzone.emit("complete",e),
"undefined"!=typeof o.dontSubstractMaxFiles&&o.dontSubstractMaxFiles||(this.dropzone.options.maxFiles=this.dropzone.options.maxFiles-1)

So I have variable o = undefined

Need help ))
Thanks!

[alexius]

Today I tried add dropzone options like this:

myDropzone.$refs.fileUploadZone.manuallyAddFile(mockFile, images[i].fullPath, null, null,
              myDropzone.$refs.fileUploadZone.dropzoneOptions)

And now I don't have this error. But I still have GET request /undefined. How to deal with this issue? Thanks!

[rowanwins]

Hi @alexius

Try something like
vue.$refs.myVueDropzone.manuallyAddFile({ name: 'filename', size: 2222 }, image['tmpPath'], null, null, { dontSubstractMaxFiles: false, addToFiles: true } );
We need to update the doco for manually adding files

[alexius]

Thank you for reply @rowanwins!
I did like you wrote. It works in the same way like I have wrote before.
I just have this bad 404 request GET www. mysite. my/undefined.

[alexius]

I also have another problem - after manually adding files and than select additional file it doesn't send first (manually added) file. And I want to use PATCH method in request and I set it to method = PATCH but it sends POST method instead. How can I force it send all files (manually added and drop added) with PATCH method?
Thanks!

[vrajroham]

@alexius Answer to your last comment.

---

1. Send manually added file to server

It's obvious that your first file which is added manually is not sent to server, only if you select any file after that, is sent to server. Because manually added file is not intended to send it to server, It is used to show already uploaded files (from server) in preview box. Check official Dropzone Docs

Mock file(manually uploaded) is not a Dropzone File object. Hence uploading mock file JavaScript object along with File object may cause Dropzone or internal server error.

---

2. Patch method support
Right now Dropzone allows post and put. Check official Dropzone Docs also check Dropzone implementation for better understanding.

---

[iamsajidjaved]

Hope this short and to the point video will help you: Hope this video will help you. The video is short and to the point. https://www.youtube.com/watch?v=zoA5tizAa2w