Thanks sincerely for the reply, Andrew, and sorry for the lengthy delay responding - I’ve been wrestling with trying to pass validation errors to the Uppy Dashboard for 2 weeks now, without success.
My code below, front end and back end. In no cases can I get Uppy to display the actual error message - it always displays its own message (which is generally very unhelpful to users).
What I’d like to do is replace the Uppy error message with my validation error message(s) (generated server side), and also replace the tooltip when the error’s question mark is hovered.
I’m using Node JS, Express, express-validator.
I successfully use Uppy Informer elsewhere (for example, on the front side validation when users attempt to use invalid characters in the metadata fields, I successfully notify them the key isn’t permitted). I just cannot get it to work here, or intercept the error messages Uppy generates.
I will be extremely grateful (for whatever that’s worth) for any help or guidance - have literally spent days and days on this. I feel very defeated from this battle. Probably I have additional grey hairs.
My client side Uppy code:
.use(AwsS3, {
fields: [],
getUploadParameters(file){
return fetch('/uploader', {
method: 'POST',
headers: {
accept: 'application/json',
'content-type': 'application/json',
},
body: JSON.stringify({
filename:filename,
contentType: file.type,
metadata: {
originalFileName: originalFileName,
fileDescription: fileDescription,
},
})
}).then((response) => {
console.log(response);
// ERROR MESSAGE ISN'T AVAILABLE HERE
// console.log returns:
// body: (...)
// bodyUsed: true
// headers: Headers {}
// ok: false
// redirected: false
// status: 422 <-- status make it through...but error message didn't
// statusText: ""
// type: "basic"
// url: "https://a0b3669e5daf49d98946887629a54b9b.vfs.cloud9.us-east-2.amazonaws.com/brokers/uploader"
// ...AND THIS DOESN'T WORK IN ANY CASE:
// uppy.info({
// message: data.errors[0].msg,
// details: 'test error message',
// }, 'error', 10000)
// NOT MUCH SENSE IN THIS SINCE THERE IS NO ERROR MESSAGE TO PASS
if (response.status >= 200 && response.status <= 299) {
return response.json();
} else {
throw Error();
}
return response.json();
}).then((data) => {
console.log('>>>', data);
// HERE WE *HAVE* THE ERROR MESSAGE!
// console.log returns:
// Filename empty - please retry
// BUT THIS STILL DOESN'T WORK:
if(data.errors){
uppy.info({
message: errors[0].msg,
details: 'test error message',
}, 'error', 10000)
}
// Uppy Informer instead displays "Failed to upload testfile.png", the above invocation notwithstanding
// While the question mark in the Uppy Dashboard displays this tooltip when hovered: "AwsS3: got incorrect result from 'getUploadParameters()' for file 'testfile.png', expected an object '{ url, method, fields, headers }'.See https://uppy.io/docs/aws-s3/#getUploadParameters-file for more on the expected format." which is not helpful to our fine users
return {
method: data.method,
url: data.url,
fields: data.fields,
headers: data.headers,
};
}).catch((errors) => {
console.log(errors);
// WE HAVE THE ERROR MESSAGE (AND SOME OTHER STUFF) HERE:
// console.log returns:
// Error: Filename empty - please retry at new?searchStr=searchterm:1248
// BUT THIS STILL DOESN'T WORK:
uppy.info({
message: errors,
details: 'test error message',
}, 'error', 10000)
// Uppy Informer displays "Failed to upload testfile.png", the above invocation notwithstanding
// While the question mark in the Uppy Dashboard displays this tooltip when hovered: "AwsS3: got incorrect result from 'getUploadParameters()' for file 'testfile.png', expected an object '{ url, method, fields, headers }'.See https://uppy.io/docs/aws-s3/#getUploadParameters-file for more on the expected format." which is not helpful to our fine users
});
},
})
uppy.on('upload-error', (file, error, response) => {
// WE DO NOT HAVE THE ERROR MESSAGE HERE:
console.log(error)
// console.log returns:
// TypeError: AwsS3: got incorrect result from 'getUploadParameters()' for file 'testfile.png', expected an object '{ url, method, fields, headers }'.
// See https://uppy.io/docs/aws-s3/#getUploadParameters-file for more on the expected format.
// at n.i.validateParameters (index.js:154)
// at index.js:197
// at async Promise.all (path/index 0)
})
My server side Node JS/Express route:
// UPPY UPLOAD ROUTE
router.post("/uploader", middleware.isLoggedIn, [
//VALIDATION
body("filename")
.not().isEmpty().withMessage("Filename empty - please retry").bail()
.isString().withMessage("Please try that again with a different filename").bail()
.escape()
.trim(),
// END VALIDATION
],
(req, res) => {
const errors = validationResult(req);
if(!errors.isEmpty()){
return res.status(422).json({ errors: errors.array() });
}
...more stuff
Any ideas or suggestions?
Many thanks!
EDIT:
PS: I’ve been staring at this, from the XHR Upload plugin, because it looks like what I’m looking for, but it doesn’t seem to work with the AWS S3 plugin:
getResponseError(responseText, response)
(https://uppy.io/docs/xhr-upload/#getResponseError-responseText-response)
If the upload endpoint responds with a non-2xx status code, the upload is assumed to have failed. The endpoint might have responded with some information about the error, though.
Pass in a getResponseError function to extract error data from the XMLHttpRequest instance used for the upload.
For example, if the endpoint responds with a JSON object containing a { message } property, this would show that message to the user:
getResponseError (responseText, response) {
return new Error(JSON.parse(responseText).message)
}
Does something similar exist for AWS S3? If so, any chance you could point me in the direction of some sample code? Or am I on the wrong track here?