0

I'm working on a small project using VueJS and Dropzone library, I would like to access a data attribute from dropzoneOptions but I get an error ( undefined ) :

the error is in console.log(this.name)

this is my code :

return {
            name: 'John',
                dropzoneOptions: {
                    url: window.location.origin+'/api/contacts/avatar/',
                    self : this,
                    init: function() {
                        this.on("sending", function(file, xhr, formData) {
                            formData.append("contactID", document.getElementById('contactID').value);
                            console.log(this.name)
                        });
                        this.on("success", function(file){
                            document.getElementById("contactID").setAttribute("src",file.dataURL);
                            console.log(file)
                            //console.log('test:' + this.contactID)
                        })
                    },
                    uploadMultiple: false,
                    clickable: true,
                    addRemoveLinks: true,
                    thumbnailWidth: 150,
                    maxFilesize: 0.5,
                    method:'patch',
                    paramName:'avatar',
                    headers: {'X-CSRFTOKEN': CSRF_TOKEN }
            },
            contactID: null,
            avatar: null,
            collection: [],
            loadingData: true,
        }
Ruth Davis
  • 112
  • 8
  • `this` is not the Vue instance inside `dropzoneOptions.init()`, rather it's the dropzone instance. I would pass in a reference to the Vue instance: Set `const vm = this;` before the `return`, and use `vm.name` inside `init()`. – tony19 May 25 '21 at 03:52
  • When you have a callback that is written using "function() {" then "this" becomes the parent element. Instead, you can use arrow functions such as "init: () => {" so that "this" is still VueJS. – recoilnetworks May 26 '21 at 08:12

0 Answers0