Displaying error messages on upload

Hi!

I’m using the JS API to open a dialog, and passing a validator array to check for minimum pixel dimensions. I’m also writing window.UPLOADCARE_LOCALE_TRANSLATIONS to provide custom error messages. This works great when the settings object is set to {..., multiple: true } (top image):

However, when the settings object is set to {..., multiple: false }, the validation still works but the error message isn’t custom (bottom image).

Any ideas how I can get a sensible error message shown? Currently it just looks to the user like the uploads are broken if the validation fails.

Thanks :slight_smile:

Hi @toby,

There are two places in the custom locale where you specify the error message. This is how it should look like:

window.UPLOADCARE_LOCALE_TRANSLATIONS = {
  // for the widget and the "multiple: true" mode
  errors: {
    'fileSizeError': 'File is too big'
  },
  //for the dialog and the "multiple: false" mode
  dialog: {
    tabs: {
      preview: {
        error: {
          'fileSizeError': {
            title: 'ERROR',
            text: 'File is too big',
            back: 'Please try again'
          }
        }
      }
    }
  }
}; 

Hope that helps!

That works like a charm – thanks!

Slightly related: when { previewStep: true, multiple: true } and the effects tab is set up, it’s possible to click on the file name to access the crop/enhance settings. But is there any way to make the preview step appear automatically, as it does with {multiple: false}? I’m not sure customers will realize they can crop or enhance the image from the list as things stand – though I can probably add some messaging to this effect if necessary.

Am I making any sense?!

Thanks!

There’s no way to force the preview step when the “multiple” mode is enabled, but yes, you can add a custom hint for your users to let them know how to crop/edit images. See this topic to learn more.

Got it, thanks! That’s what I had in mind; I can see how it would be difficult to have the preview step show on e.g. multiple drag+drop anyway.

Thanks for the responses, and for all the excellent work.