@uppy/tus: add response to upload-success

[ikopmans]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

uploader = new Uppy({ autoProceed: true, allowMultipleUploadBatches: true })
.use(Tus, { endpoint: 'http://localhost/upload' });
uploader.on('upload-success', (file, response) => console.log('Upload completed with response ', response));

Expected behavior

body field in response object contains response body, as returned from server (if any)

Actual behavior

response.body is always empty (hard-coded to be {}), even though it seems to be supported by underlying tus-js-client library

[Murderlon]

What would you expect to get for the body? And why do you need it?

[ikopmans]

tusd (which seems to be a protocol reference implementation) allows PreFinishResponseCallback for post-upload validation. In my case it checks if uploaded image is already uploaded by some another user using signature database. I can imagine many other reasons to validate file content after it was uploaded, like check for nudity and other explicit content and reject the file based on that. In all such cases there should be a way to respond that a file is rejected by server side. I guess that's the reason to have this callback. But so far I see no ways to accept this response on Uppy side.

tus-client-js has onSuccess event handler, that can accept such data:

onSuccess: function (payload) {
	  const { lastResponse } = payload
...

So, at least according to the docs, underlying tus-client-js library has mechanism to receive such check results, by providing lastResponse data.

However this event handler is explicitly overrided by Uppy omitting payload parameter for event and setting Body to {} explicitly:

uploadOptions.onSuccess = () => {
        const uploadResp = {
          uploadURL: upload.url ?? undefined,
          status: 200,
          body: {} as B,
        }
...

which looks like temporary hack gone wrong for me. It explicitly ignores available parametrs and returns hard-coded values instead of data provided by underlying library. I don't really see a point to return body and status fields at all, considering the fact that they are hard-coded values that have nothing to do with actual server response.

[ikopmans]

Just tried using onSuccess handler with tus-client-js directly, and in fact the tus-client-js documentation is wrong.
API docs say that onSuccess even handler receives some payload, bit in fact it does get nothing.

So, this issue makes no sense. There is no way for Uppy to get this data. Sorry for wasting your time. :(

[Murderlon]

You can open an issue in tus-js-client and once it's added there, we'll add it here.

[alexmv]

This functionality looks to have been added in tus/tus-js-client#689. Can you update Uppy to make that lastResponse available to the upload-success event?

[jarvis394]

I have been getting Tus response data from onAfterResponse method like this:

const handleUploadResponse = async (_req: HttpRequest, res: HttpResponse) => {
  try {
    // You can implement parsing with zod, yup, etc.
    const parsedBody = JSON.parse(res.getBody() || '') as TusHookResponse

    switch (parsedBody.type) {
      ...
    }
  } catch (e) {
    ...
  }
}

const [uppy] = useState(() =>
  new Uppy({ ... }).use(Tus, {
    onAfterResponse: handleUploadResponse,
  })
)

Types to make this safe

Typings

// Backend
export enum TusHookType {
  PRE_CREATE = 'pre-create',
  POST_CREATE = 'post-create',
  POST_RECEIVE = 'post-receive',
  PRE_FINISH = 'pre-finish',
  POST_FINISH = 'post-finish',
  POST_TERMINATE = 'post-terminate',
}

export type BaseTusHookResponseBody = {
  type: TusHookType
  ok: boolean
}

export type BaseTusHookResponseErrorBody = {
  type: TusHookType
  ok: false
  statusCode: number
  message: string
}

... // Inherit your responses from `BaseTusHookResponseBody`

export type TusHookResponse = TusHookPreCreateResponse | TusHookPreFinishResponse
// Respond to client with types above

TusHookResponse builder

export class TusHookResponseBuilder<
  ResBody extends Record<
    string,
    string | number | boolean
  > = BaseTusHookResponseBody,
> {
  private readonly data: TusHookResponse
  #body: ResBody = { ok: true } as unknown as ResBody

  get body(): ResBody {
    return this.#body
  }

  constructor() {
    this.data = {
      HTTPResponse: {
        StatusCode: 200,
        Body: JSON.stringify(this.body),
        Header: {
          'Content-Type': 'application/json',
        },
      },
    }
  }

  private stringifyBody() {
    this.data.HTTPResponse.Body = JSON.stringify(this.#body)
    return this
  }

  setStatusCode(code: number) {
    this.data.HTTPResponse.StatusCode = code
    return this
  }

  setBody(data: ResBody) {
    this.#body = data
    this.stringifyBody()
    return this
  }

  setBodyRecord(key: keyof ResBody, value: ResBody[keyof ResBody]) {
    this.#body[key] = value
    this.stringifyBody()
    return this
  }

  setRejectUpload(state: boolean) {
    this.data.RejectUpload = state
    return this
  }

  build(): TusHookResponse {
    return this.data
  }
}

Although, it would be heavily appreciated if Uppy client would emit response body in its events.