# Perform async action before upload with Uppy

**URL:** <https://community.transloadit.com/t/perform-async-action-before-upload-with-uppy/15865>\
**Category:** Uppy\
**Created:** [October 14, 2021, 6:23pm UTC](https://community.transloadit.com/t/perform-async-action-before-upload-with-uppy/15865 "2021-10-14T18:23:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tilly](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/tilly/32/491_2.png) [@tilly](https://community.transloadit.com/u/tilly)\
**Post date:** [October 14, 2021, 6:23pm UTC](https://community.transloadit.com/t/perform-async-action-before-upload-with-uppy/15865/1 "2021-10-14T18:23:53Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [October 18, 2021, 10:44am UTC](https://community.transloadit.com/t/perform-async-action-before-upload-with-uppy/15865/2 "2021-10-18T10:44:57Z")

</div>

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

- If possible, migrate to 2.0. Here is the [announcement post](https://uppy.io/blog/2021/08/2.0/) and the [migration guide](https://uppy.io/docs/migration-guides.html)
- Docs of 1x are not available on the website but you can view the [doc files of the last 1x version](https://github.com/transloadit/uppy/tree/uppy%401.31.1).
- If you are using `@uppy/xhr-upload`, checkout this [comment](https://github.com/transloadit/uppy/issues/1790#issuecomment-581402293) on how to change the `endpoint` per file.

---

<div class="post-metadata">

**Author:** ![tilly](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/tilly/32/491_2.png) [@tilly](https://community.transloadit.com/u/tilly)\
**Post date:** [October 21, 2021, 7:34pm UTC](https://community.transloadit.com/t/perform-async-action-before-upload-with-uppy/15865/3 "2021-10-21T19:34:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tilly](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/tilly/32/491_2.png) [@tilly](https://community.transloadit.com/u/tilly)\
**Post date:** [October 21, 2021, 11:24pm UTC](https://community.transloadit.com/t/perform-async-action-before-upload-with-uppy/15865/4 "2021-10-21T23:24:45Z")

</div>

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.

```auto
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));
},

```

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [October 25, 2021, 10:28am UTC](https://community.transloadit.com/t/perform-async-action-before-upload-with-uppy/15865/5 "2021-10-25T10:28:30Z")

</div>

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

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

```