If I try and use a S3-presigned-URL to PUT a file and the CORS configuration is not correct, i.e. PUT isn't allowed, no appropriate error message is sent to the upload-error callback. This means I can't let the user know what went wrong.
E.g.
this._uppy.on('upload-error', this._uppyError);
private readonly _uppyError: Function = (_file: any, error: Error, response: any) => {
// response is undefined
// error contains the text 'Upload error'
};
These values were sent by the error Event-Handler:
var error = buildResponseError(xhr, opts.getResponseError(xhr.responseText, xhr));
_this3.uppy.emit('upload-error', file, error);
xhr is:
mozAnon: false
mozSystem: false
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
ontimeout: null
readyState: 4
response: ""
responseText: ""
responseType: "text"
responseURL: ""
status: 0
statusText: ""
timeout: 0
upload: XMLHttpRequestUpload
withCredentials: false
In the logs I receive the following two error messages:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.eu-central-1.amazonaws.com/[omitted]. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3.eu-central-1.amazonaws.com/[omitted]. (Reason: CORS request did not succeed).
As far as I can tell, this doesn't work as it should, but maybe there is an alternative way of getting at the error?
By spec, a CORS error is indistinguishable from other connection errors. You can override getResponseError() to provide custom error messages and the like based on the xhr object, but that is all the information that is available to JS. The browser itself can tell that a request failed because of CORS restrictions but web pages cannot.
Ah ok. Thanks for the quick feedback.
Would a more specific message like "Connection error" be possible instead of simply "Upload error"? With the more technical message, I'd be more inclined to look in the logs or speak to an admin. "Upload error" sounds like I (as an end-user) did something wrong.
Yeah :) https://github.com/transloadit/uppy/pull/2110 should have done something like that in the most recent xhr-upload and aws-s3 upload versions, actually. Maybe we missed a spot?
Ah, that's great. We don't have the latest version yet so I'll have a check to see if that's any better. Thank you!
It might have taken a while, but I've confirmed that this now works: we can ignore the request object and simply read out what's in error.message, if it's present, which is:
This looks like a network error, the endpoint might be blocked by an internet provider or a firewall. Source error: [Error: Upload error]
As that's all we can get from the browser, it'll have to do and if necessary we can check in the client's browser logs :-)
Most helpful comment
Ah, that's great. We don't have the latest version yet so I'll have a check to see if that's any better. Thank you!