V3 to v4: `getResponseError`

Uppy
1

Hello,

I’m currently upgrading from Uppy v3 to v4, and I’ve encountered an issue regarding custom validation error messages.

In Uppy v3, we used the getResponseError method to display user-specific validation error messages based on server responses. Here’s an example of our previous implementation:

      getResponseError (responseText, response) {
        if (response.status !== 422) return

        return new Error(JSON.parse(responseText).error)
      },

This worked seamlessly for us when handling HTTP 422 responses (used by Rails for validation errors), allowing us to show clear and user-friendly error messages.

After reviewing the Uppy v4 release notes, I noticed that getResponseError has been removed, but I couldn’t find clear instructions on how to replicate the same functionality in v4.

For example, given the following server response for a 422 error:

{"error":["File File extension does not match file type"]}

Expected Behavior (v3):

Custom error messages were displayed, as shown in the screenshot:

image
image788×260 16 KB

Current Behavior (v4):

The error appears as a generic tooltip without the specific validation message:

Can’t post two images, so I can’t provide the screenshot. The error message is generic, please imagine the following error in the tooltip:

[Uppy] [19:06:24] This looks like a network error, the endpoint might be blocked by an internet provider or a firewall.

Question:

How can I achieve the same behavior as in v3, where I can display detailed error messages from server responses in the tooltip using Uppy v4?

Any guidance or examples would be greatly appreciated.

Thank you for your support!

2

Hi, have you tried using onAfterResponse() for this?

3

Hello,

thanks for your answer.

onAfterResponse is what I’m currently using:

      onAfterResponse (response) {
        if (response.status !== 422) return

        return new Error(JSON.parse(response.responseText))
      },

But I guess it should not be used this way, and it is not clear how to provide the correct error to the front-end. I did also read the code and tried several ai chatbots, but as a non-javascript developer I’m struggling into understanding if this is possible in v4 and how to do that

response.responseText is a String containing:

{"error":["File File extension does not match file type"]}

4

Apparently it was a regression,

I will provide an answer when @uppy/xhr-upload: allow custom error message in onAfterResponse by Murderlon · Pull Request #5578 · transloadit/uppy · GitHub will be released

5

You need to update to Uppy >= 4.12.0 and @uppy/xhr-upload to >= 4.3.1 and then change

getResponseError (responseText, response) {
  if (response.status !== 422) return;

  return new Error(JSON.parse(responseText).error);
}

to

onAfterResponse (response) {
  if (response.status !== 422) return

  throw new Error(JSON.parse(response.responseText).error)
}