Perform async action before upload with Uppy

Uppy
1

Hi!

I’ve been using Uppy to handle image uploads for my users, and it’s great! The problem is that I need to run an API call to get a target upload URL before the upload starts. The target URL depends on the file name the user added, so I need to run this call after the user adds a file, but before the upload starts.

I tried to implement a solution with an Uppy plugin and the uppy.addPreProcessor() method, but I encountered a different problem in doing this…my project uses @uppy/core 1.20.1, but the docs are for @uppy/core 2.0, and the plugin API seems to have changed. So I have two questions:

  1. Is the plugin approach the best way to do this?
  2. Are there docs available for the old version that used Plugin instead of BasePlugin and UIPlugin?

Thanks for any help :slight_smile:

2

Hi, good to hear Uppy has been working out for you. My thoughts:

1 Like
3

Thanks so much for the links, this is very helpful!

4

Okay, I managed to migrate the project to use the latest version of Uppy. However, I still am having trouble with the upload. The solution proposed in the linked comment isn’t working for me, but I’m using it in a bit of a different way. Rather than call uppy.setFileState from within an event handler, I’m calling it from within a callback passed to addPreProcessor within a plugin. This approach is more suitable for async calls. However, it seems like the endpoint is not being overridden; the bogus endpoint I’m providing initially when setting up XHRUpload is still being used. I have to provide this endpoint because XHRUpload is throwing an error if I don’t.

This is the function in question. Instance is a reference to an axios instance.

setUploadUrl(file) {
  return this.instance
    .get(`user/logo/sas/${this.userId}/${file.name}`)
    .then(response => {
       this.uppy.setFileState(file.id, {
         ...file.xhrUpload,
         endpoint: response.data.sas,
      });
      return;
    })
    .catch(error => console.error(error));
},
5

Hi, as seen in the comment shared before about changing the endpoint, you apply endpoint in the xhrUpload object. You are applying it directly.

this.uppy.setFileState(file.id, {
  xhrUpload: { // <--- this
    ...file.xhrUpload,
    endpoint: response.data.sas,
  }
})