Support async upload parameters on XHR upload

[lmyslinski]

Support async upload parameters on XHR upload

[Murderlon]

Closing this in favor of the mentioned issue.

[Murderlon]

Hi, you can also do this and not destroy the instance:

  useEffect(() => {
    uppy.getPlugin('XHRUpload').setOptions({
      headers: {
        Authorization: `Bearer ${token}`,
      }
    })
  }, [token]);

The problem then is that it isn't retried. With tus you can do this:

import Uppy from '@uppy/core';
import Tus from '@uppy/tus';

new Uppy().use(Tus, {
  endpoint: '',
  async onBeforeRequest(req) {
    const token = await getAuthToken();
    req.setHeader('Authorization', `Bearer ${token}`);
  },
  onShouldRetry(err, retryAttempt, options, next) {
    if (err?.originalResponse?.getStatus() === 401) {
      return true;
    }
    return next(err);
  },
  async onAfterResponse(req, res) {
    if (res.getStatus() === 401) {
      await refreshAuthToken();
    }
  },
});

Ideally this would be consistent between uploaders.

[lmyslinski]

yeah onBeforeRequest is exactly what I had in mind. I'll try this one out for now, thanks

[Murderlon]

I just saw this in the codebase:

uppy/packages/@uppy/xhr-upload/src/index.ts

Lines 417 to 426 in 5004e84

	queuedRequest = this.requests.run(() => {
	// When using an authentication system like JWT, the bearer token goes as a header. This
	// header needs to be fresh each time the token is refreshed so computing and setting the
	// headers just before the upload starts enables this kind of authentication to work properly.
	// Otherwise, half-way through the list of uploads the token could be stale and the upload would fail.
	const currentOpts = this.getOptions(file)
	Object.keys(currentOpts.headers).forEach((header) => {
	xhr.setRequestHeader(header, currentOpts.headers[header])
	})

So my useEffect suggestion in #5042 (comment) should be sufficient for now.