Is it possible to add reactive parameter in endpoint when uploading file on vue.js

[subashdbc]

Hi, I want to add a dynamic/reactive parameter value which can be added as a path parameter to my endpoint when uploading the file on uppy.

uppy.use(XHRUpload, {
    endpoint: `[DYNAMIC_API_URL]/${this.textContent}`,
    formData: true,
    bundle: true,
    headers: {
      'Authorization': `Bearer ${token}`
    }
})

I do this on mounted hook. Here textContent is a reactive property that we created on Vue js. But this textContent is not being reactive property to endpoint URL that is added How can we do this?

Thanks in advance!

[goto-bus-stop]

In the future, there will be an official way to do this using setOptions(): https://github.com/transloadit/uppy/pull/1728

At the moment, you can override options for XHRUpload specifically using setState():

const { xhrUpload } = uppy.getState()
uppy.setState({
  xhrUpload: {
    ...xhrUpload,
    endpoint: 'https://new-endpoint.com/'
  }
})

The object merge is important because other plugins may use the xhrUpload state to pass information to the plugin as well.

(Doing this when an upload is already in progress is not supported and will cause weird unknown breakage.)

[subashdbc]

@goto-bus-stop thanks for the reply.

In which state it is good to use setState like (file-added, upload, onBeforeUpload) Could you suggest?

[goto-bus-stop]

You can do it whenever the textContent property in your Vue state changes, or uppy.on('upload') would work as well!

[subashdbc]

Thanks

[subashdbc]

@goto-bus-stop

uppy.on('upload', (data) => {
  console.log(JSON.stringify(uppy.getState()))
  const { xhrUpload } = uppy.getState() // it says it is undefined
})

this is result when I print getState() there is no xhrUpload object found

{"plugins":{"Dashboard":{"isHidden":true,"showFileCard":false,"showAddFilesPanel":false,"activePanel":false,"metaFields":[],"targets":[{"id":"Dashboard:StatusBar","name":"StatusBar","type":"progressindicator"},{"id":"Dashboard:Informer","name":"Informer","type":"progressindicator"},{"id":"Url","name":"Link","type":"acquirer"}],"containerWidth":721.75,"containerHeight":548}},"files":{"uppy-appletouchiconpng-image/png-4944-1561973708020":{"source":"Dashboard","id":"uppy-appletouchiconpng-image/png-4944-1561973708020","name":"apple-touch-icon.png","extension":"png","meta":{"name":"apple-touch-icon.png","type":"image/png"},"type":"image/png","data":{},"progress":{"percentage":0,"bytesUploaded":0,"bytesTotal":4944,"uploadComplete":false,"uploadStarted":false},"size":4944,"isRemote":false,"remote":"","preview":"blob:http://localhost:8081/1a74bbc7-2049-4bfb-9f08-6f44739a7490"}},"currentUploads":{},"allowNewUpload":true,"capabilities":{"uploadProgress":true,"resumableUploads":false,"bundled":true},"totalProgress":0,"meta":{},"info":{"isHidden":true,"type":"info","message":""},"error":null}

can you help me with this?

[goto-bus-stop]

xhrUpload may be undefined at that point, yes, but the snippet I posted should work fine with that (if you use ...xhrUpload or Object.assign).

[subashdbc]

@goto-bus-stop This is the code block that I use, while overwriting xhrUpload on setState not working

const uppy = Uppy({ restrictions: { allowedFileTypes: ['image/*'] } })
      .use(Dashboard, {
        trigger: '#post-opener-btn',
        inline: true,
        target: '#file-upload-area',
        showProgressDetails: true
      })
      .use(Url, {
        target: Dashboard,
        serverUrl: 'https://companion.uppy.io/',
        locale: {}
      })
      .use(XHRUpload, {
        endpoint: `${axios.defaults.baseURL}/gallery/add_post/`,
        formData: true,
        bundle: true,
        headers: {
          'Authorization': `Bearer ${this.userDetails.token}`
        }
      })
    uppy.on('upload', (data) => {
     const { xhrUpload } = uppy.getState()
     uppy.setState({
        xhrUpload: {
           ...xhrUpload,
          endpoint: `${axios.defaults.baseURL}/gallery/add_post/${self.caption}` // not getting updated

      }
     })
})

Is there anything that I miss? Can you help me here?

[Teslenk0]

In the future, there will be an official way to do this using setOptions(): #1728

At the moment, you can override options for XHRUpload specifically using setState():

const { xhrUpload } = uppy.getState()
uppy.setState({
  xhrUpload: {
    ...xhrUpload,
    endpoint: 'https://new-endpoint.com/'
  }
})

The object merge is important because other plugins may use the xhrUpload state to pass information to the plugin as well.

(Doing this when an upload is already in progress is not supported and will cause weird unknown breakage.)

Thank you!!!

[goto-bus-stop]

For the record, in current Uppy versions you can do:

uppy.getPlugin('XHRUpload').setOptions({
  endpoint: buildEndpointUrl()
})

Hopefully that should properly address this use case 🙏