Setting the upload URL after component initialization

[cb109]

Hi,

I am currently using a <vue-clip> instance within a bootstrap modal, meaning the component is rendered alongside the modal when the page is loaded and only hidden/shown as needed.

The Problem

The upload URL is not yet known at that point in time and I would like to update it once a user has performed some action that will let us know which URL to use (e.g. /groups/{id}/upload).

I haven't figured out a way how to do this yet, vue-clip seems to ignore changes to its options.url value after initialization and I also can't update the XMLHTTPRequest.responseURL inside the onSending() method because that is read-only.

Any ideas how I could achieve that? If there is no way, please consider this a humble feature request ;)

Thanks for creating the library and cheers

[cb109]

Nevermind I just realized you are using Dropzone under the hood. It allows to specify a function as the url option and that lazily computes the URL as needed before the actual upload is happening.

[alexsasharegan]

@cb109 Could you possibly add in a code example of this solution? I often use computed urls, and I would love to have this thread be a little knowledge base article of sorts.

[cb109]

Sure, it was basically just this within my parent component that wrapped the vue-clip (options being passed to it as a prop here):

  methods: {
    getDropzoneUploadUrl: function(files) {
      return '/dynamically/computed/upload/url';
    },
  },
  data: function() {
    var vm = this;
    return {
      options: {
        // Dropzone allows us to specify a function here to compute the 
        // URL later, because we don't know it yet.
        // See: http://www.dropzonejs.com/#configuration-options -> 'url'
        url: vm.getDropzoneUploadUrl,  // Note: No '()' here!
        uploadMultiple: false,
      },
    }
  },

[alexsasharegan]

Awesome, thank you! I'm about to dive into a project that'll make heavy use of this. You don't think the this binding will get tricky when vue-clip invokes the url function, do you? This is my first Vue project. I thought you might have to pass the options like this:

  methods: {
    getDropzoneUploadUrl: function(files) {
      // var vm = this; // shouldn't be necessary here, right?
      return '/dynamically/computed/upload/url';
    },
  },
  data: function() {
    var vm = this; // we'd need it here, right?

    return {
      options: {
        // Dropzone allows us to specify a function here to compute the 
        // URL later, because we don't know it yet.
        // See: http://www.dropzonejs.com/#configuration-options -> 'url'
        url: vm.getDropzoneUploadUrl.bind(vm),  // now we should always get our `this` binding right
        uploadMultiple: false,
      },
    }
  },

[cb109]

Hey, yes I fixed two small errors right after posting. I don't think you have to use bind() and will still be able access the vm context correctly within getDropzoneUploadUrl(), at least it did work for me.