How do I update prop options value on the Dropzone VueJs component?

Question

I want to update the url option for the dropzone component dynamically later.

Following is the Vue component I have:

<div id="app">
  <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
  <button @click="updateUrl()">
  Update
  </button>
</div>
<script>

new Vue({
  el: "#app",
  data: {
    dropzoneOptions: {
        url : "https://google.com"
    }
  },
  computed:{  
  },
  components: {
    vueDropzone: vue2Dropzone
  },
  methods: {
    updateUrl(){
      console.log("Updating url")
      this.dropzoneOptions.url = "http://example.com"
    }
  }
})
</script>

When I try to update using the button click, I see that the dropzoneOptions.url has been updated. But, when I try uploading files, the files are still posted to the old url https://google.com

Link to JSFiddle: https://jsfiddle.net/1t7L6ouc/3/

Answer 1

There is an options property that lets you define the url. Since you have given it a ref, you should be able to update it like:

this.$refs.myVueDropzone.dropzone.options.url = 'http://example.com';

Answer 2

I know it's an old thread but I've come across a similar problem recently, and hopefully my solution might help someone.

I had to post an image to an endpoint looking like api/questions/24/image, 24 being the id of the current "question" being edited. This id would be a store property mapped to my computed properties as questionId. Problem is in my case, there was no button to hook an event to. The images would have to be automatically uploaded. So the URL I needed to use with dropzone was api/questions/${this.questionId}/image.

As I expected and feared, this URL wouldn't resolve correctly with the documented way of putting dropzoneOptions in the Data property, as in the object, this (in this.questionId) would no longer be referencing the vue instance. After playing around with dropzone hooks/events/methods, I ended up setting the whole dropzoneOptions object as a computed property like this:

computed: {
    dropzoneOptions() {
        return {
            acceptedFileTypes: "image/*",
            url: `/api/questions/${this.questionId}/image`, 
            headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
            }
        }
    },
   [...]
}

This way, if needed, you can map any parameter to another computed property like so:

computed: {
    uploadUrl() {
        return `/api/questions/${this.questionId}/image`;
    },
    dropzoneOptions() {
        return {
            acceptedFileTypes: "image/*",
            url: this.uploadUrl, 
            headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
            }
        }
    },
   [...]
}

It doesn't feel like an ideal solution, but that's not too awful either.

Answer 3

You need to make your data reactive.

https://v2.vuejs.org/v2/guide/reactivity.html

data: function () {
  
    return {
        dropzoneOptions: {
            url : "https://google.com"
        }
    }

}

If the value still does not change, you may also need to use the set method.

updateUrl(){
    this.$set(this.dropzoneOptions,'url','http://example.com');
}

https://jsfiddle.net/1t7L6ouc/8/