Adding custom notification to Dashboard

How should I add a custom popup to the Dashboard when the upload or using the getUploadParameters (with AwsS3 plugin) fail?

So far I have tried using uppy.info() but this doesn’t show any popup on the dashboard.

I want to show the error when the following happens:

uppy.on('upload-error', (file, error, response) => {
            console.log('error with file:', file.id);
            console.log('error message:', error);
            console.log('Response: ', response);
        });

and

uppy.use(Uppy.AwsS3, {
            getUploadParameters: file => {
                const file_data = {
                    filename: file.name,
                    content_type: file.type
                };
                return axios.post(https://someurl.com, file_data, {
                    headers: {
                        accept: 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRFToken': 'token'
                    }
                }).then(response => {
                    console.log(response.data);
                    return response.data
                }).then(data => {
                        if (data.filename) {
                            uppy.info(`Valid filename is required.`, 'error', 500);
                            return false
                        } else if (data.content_type) {
                            uppy.info(data.content_type[0], 'error', 500);
                            return false
                        }
                        return {
                            method: 'PUT',
                            url: data.url,
                            fields: {},
                            headers: {
                                'x-ms-blob-type': 'BlockBlob'
                            }
                        }
                    }
                ).catch(error => {
                        console.log(error)
                    }
                )
            }
        });

Note: I am using this in an HTML file using the CDN link

I realize I’m pretty late to the party here, but wondering if you ever solved this? I’m likewise trying to figure out how to send custom errors messages from the server to the dashboard (for example, when an upload fails server-side validation). Like you, tried uppy.info() with no success. Also using AWS S3 plugin. Would appreciate any guidance, if you managed to solve this.

This seems strange, as according to the documentation for uppy.info it

Sets a message in state, with optional details, that can be shown by notification UI plugins. Currently, that means just the Informer plugin, included by default in Dashboard.

Seems like it should’ve worked. Nevertheless, I might be able to help.

You could manually loading the Informer plugin.

What does happen when you do run uppy.info()?

- Andrew

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?

I still have this issue. Not sure what to do

Hello,

I’ve recently found a few more things that might help in debugging this issue.

This code (from this docs link) will fire anytime that there is an info event fired, and it should allow us to see if this is a UI issue or an internal state issue

uppy.on('info-visible', () => {
  const info = uppy.getState().info
  // info: {
  //  isHidden: false,
  //  type: 'error',
  //  message: 'Failed to upload',
  //  details: 'Error description'
  // }
  alert(`${info.message} ${info.details}`)
})

Let me know what results from this
- Andrew