UploadingFile UploaderProgrammatic customizationCustom validation

Localization

Localize the messages your validators return so users always see clear, familiar text in their language. This page shows how to add keys, use them from validators, and keep things maintainable.

Quick start

  1. Pick message keys you’ll use in validators (for example: filename-no-spaces, collection-uniform-top-level-type).
  2. Add these keys to your locales using UC.defineLocale.
  3. In validators, return message: api.l10n('<your-key>').
  4. Switch the uploader language and verify messages appear as expected.

Add your keys to locales

Import your current locales and extend them with validator-specific keys.

1import { default as en } from "./locales/file-uploader/en.js";
2import { default as fr } from "./locales/file-uploader/fr.js";
3
4UC.defineLocale("en", {
5  ...en,
6  "filename-no-spaces": "Filenames cannot contain spaces",
7  "collection-uniform-top-level-type":
8    "Please select files of the same top-level type",
9});
10
11UC.defineLocale("fr", {
12  ...fr,
13  "filename-no-spaces":
14    "Les noms de fichiers ne doivent pas contenir d’espaces",
15  "collection-uniform-top-level-type":
16    "Veuillez sélectionner des fichiers du même type de niveau supérieur",
17});
18
19UC.defineComponents(UC);

Use keys from validators

File validator example (no spaces in filename)

1const noSpacesInFilename = (entry, api) => {
2  if (entry.fileName?.includes(" ")) {
3    return { message: api.l10n("filename-no-spaces") };
4  }
5};

Collection validator example (uniform top‑level MIME type)

1const uniformTopLevelMime = (collection, api) => {
2  const top = (m) => m.split("/")[0];
3  const types = new Set(
4    collection.allEntries
5      .filter((e) => !!e.mimeType)
6      .map((e) => top(e.mimeType))
7  );
8  if (types.size > 1) {
9    return { message: api.l10n("collection-uniform-top-level-type") };
10  }
11};

See also