Vue-dropzone: Can not call method on dropzone ref

[chiragparekh]

HI,

I tried to call setOption method on this.$refs.dz.setOption but it gives me error "this.$refs.myDropzone.setOption is not a function". I tried also other method but it gave me same error.

P.S: dz is ref name of my dropzone element.

Right now I solved my issue by

this.$refs.dz.dropzone.options.headers ={
// HEADER OPTINS
};

[rowanwins]

Hi @chiragparekh

Thanks for the report, we've experienced this before so it looks like it's something of a sporadic issue, I'll take a look at the code base to see if I can work out what's going on.

Can you post your full component code so I can see how you've set it up?

Thanks

[arifhussain353]

@rowanwins I have same issue.I want to set image on page load to dropzone. Here is my code below
In html i use with ref tag. Reference issue #75

<dropzone ref="myVueDropzoneRef" id="myVueDropzone" url="/dropzoneFileUpload/DiscoveryArticleImage" v-bind:use-custom-dropzone-options="true" v-bind:dropzone-options="dropzoneOption()" v-on:vdropzone-success="vDropzoneCallback" v-on:vdropzone-error="vDropzoneCallback" v-on:vdropzone-removed-file="vDropzoneRemoveImage('DiscoveryArticleImage')"></dropzone>

And on same page below in created hook:

  created(){

            let dropzone = this.$refs.myVueDropzoneRef;
            var mockFile = { name: "icon.jpg", size: 12345 };
            dropzone.manuallyAddFile(mockFile, "http://correctpathtoexistingfile.png");

        }

I got this error when try to use dropzone methods

TypeError: Cannot read property 'manuallyAddFile' of undefined

[arifhussain353]

I was using dropzone in bootstrap model and issue solved by calling dropzone on boostrap shown.bs.modal event.

[wa05]

@arifhussain353 Can you show me how you used into the modal .. Its like I have the same ref in all the modals an always I open a second modal it takes me the images from the first one..

Also the images doesnt show in the uploadedFiles :/

      events: {
    'update-post'(data) {

      this.$refs.dropzone.removeAllFiles()       <---- this doesnt work

      let dropzones = this.$refs.dropzone
      for(var i= 0; i< data.images.length; i++){
        var file = { size: 526 , name: "File_" + i };
        var url = APP_URL + "/img/posts/" + data.images[i].description;
        dropzones.manuallyAddFile(file, url);      <--- adds the files but not to the uploadedFiles
      }
    }
  }

[guyver-dash]

@arifhussain353 @rowanwins It doesn't work... Actually it should be put in the mounted() but still it doesn't work @version2.3.4. Reference: https://stackoverflow.com/questions/40884194/vuejs-cant-access-refs-from-component

[guyver-dash]

I don't know what happened but it works now @version2.3.4.

[rowanwins]

I'm going to close this due to a major release of v3, check out the new docs. If this is still an issue let us know.