Localization

All keys and values for UI texts and translations are embedded in CSS. You can find a basic English locale template on GitHub.

How to update existing localization

You can create your own variant of any UI text:

CSS:

.my-locale-override {
  --l10n-upload-files: 'Choose your documents';
}css

JavaScript:

<lr-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
></lr-config>

<lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.30.2/web/lr-file-uploader-regular.min.css"
    ctx-name="my-uploader"
    class="my-locale-override"
>
</lr-file-uploader-regular>html

How to create a new localization

Creating a new localization is quite similar to overriding an existing one. You can create a new locale by adding a new CSS class with your locale name and overriding the default English values.

Here is an example of a locale for Portuguese:

.l10n-pt-PT {
  --l10n-locale-name: 'pt-PT';

  --l10n-upload-file: 'Carregar ficheiro';
  --l10n-upload-files: 'Carregar ficheiros';
  --l10n-choose-file: 'Escolher ficheiro';
  --l10n-choose-files: 'Escolher ficheiros';
  --l10n-drop-files-here: 'Colocar ficheiros aqui';
  --l10n-select-file-source: 'Selecionar origem do ficheiro';
  --l10n-selected: 'Selecionado';
  --l10n-upload: 'Carregar';
  --l10n-add-more: 'Adicionar mais';
  --l10n-cancel: 'Cancelar';
  --l10n-clear: 'Limpar';
  --l10n-camera-shot: 'Tirar';
  --l10n-upload-url: 'Importar';
  --l10n-upload-url-placeholder: 'Colocar link aqui';
  --l10n-edit-image: 'Editar imagem';
  --l10n-edit-detail: 'Detalhes';
  --l10n-back: 'Voltar';
  --l10n-done: 'Concluído';
  --l10n-ok: 'Ok';
  --l10n-remove-from-list: 'Remover';
  --l10n-no: 'Não';
  --l10n-yes: 'Sim';
  --l10n-confirm-your-action: 'Confirme a sua ação';
  --l10n-are-you-sure: 'Tem a certeza?';
  --l10n-selected-count: 'Selecionado:';
  --l10n-upload-error: 'Erro de carregamento';
  --l10n-validation-error: 'Erro de validação';
  --l10n-no-files: 'Nenhum ficheiro selecionado';
  --l10n-browse: 'Procurar';
  --l10n-not-uploaded-yet: 'Ainda não carregado...';
  --l10n-file__one: 'ficheiro';
  --l10n-file__many: 'de ficheiros';
  --l10n-file__other: 'ficheiros';
  --l10n-error__one: 'erro';
  --l10n-error__many: 'de erros';
  --l10n-error__other: 'erros';
  --l10n-header-uploading: 'A carregar {{count}} {{plural:file(count)}}';
  --l10n-header-failed: '{{count}} {{plural:error(count)}}';
  --l10n-header-succeed: '{{count}} {{plural:file(count)}} carregados';
  --l10n-header-total: '{{count}} {{plural:file(count)}} selecionados';

  --l10n-src-type-local: 'Do dispositivo';
  --l10n-src-type-from-url: 'Do link';
  --l10n-src-type-camera: 'Câmara';
  --l10n-src-type-draw: 'Desenhar';
  --l10n-src-type-facebook: 'Facebook';
  --l10n-src-type-dropbox: 'Dropbox';
  --l10n-src-type-gdrive: 'Google Drive';
  --l10n-src-type-gphotos: 'Google Photos';
  --l10n-src-type-instagram: 'Instagram';
  --l10n-src-type-flickr: 'Flickr';
  --l10n-src-type-vk: 'VK';
  --l10n-src-type-evernote: 'Evernote';
  --l10n-src-type-box: 'Box';
  --l10n-src-type-onedrive: 'Onedrive';
  --l10n-src-type-huddle: 'Huddle';
  --l10n-src-type-other: 'Outro';

  --l10n-src-type: var(--l10n-src-type-local);

  --l10n-caption-from-url: 'Importar do link';
  --l10n-caption-camera: 'Câmara';
  --l10n-caption-draw: 'Desenhar';
  --l10n-caption-edit-file: 'Editar ficheiro';

  --l10n-file-no-name: 'Sem nome...';

  --l10n-toggle-fullscreen: 'Alternar para ecrã inteiro';
  --l10n-toggle-guides: 'Alternar guias';
  --l10n-rotate: 'Rodar';
  --l10n-flip-vertical: 'Virar verticalmente';
  --l10n-flip-horizontal: 'Virar horizontalmente';
  --l10n-brightness: 'Brilho';
  --l10n-contrast: 'Contraste';
  --l10n-saturation: 'Saturação';
  --l10n-resize: 'Redimensionar imagem';
  --l10n-crop: 'Cortar';
  --l10n-select-color: 'Selecionar cor';
  --l10n-text: 'Texto';
  --l10n-draw: 'Desenhar';
  --l10n-cancel-edit: 'Cancelar edição';

  --l10n-tab-view: 'Pré-visualizar';
  --l10n-tab-details: 'Detalhes';

  --l10n-file-name: 'Nome';
  --l10n-file-size: 'Tamanho';
  --l10n-cdn-url: 'URL CDN';
  --l10n-file-size-unknown: 'Desconhecido';

  --l10n-camera-permissions-denied: 'Acesso à câmara negado';
  --l10n-camera-permissions-prompt: 'Por favor, permita o acesso à câmara';
  --l10n-camera-permissions-request: 'Solicitar acesso';

  --l10n-files-count-limit-error-title: 'Limite de contagem de ficheiros excedido';
  --l10n-files-count-limit-error-too-few: 'Escolheu {{total}}. Pelo menos {{min}} é necessário.';
  --l10n-files-count-limit-error-too-many: 'Escolheu demasiados ficheiros. {{max}} é o máximo.';

  --l10n-files-max-size-limit-error: 'O arquivo é muito grande. O tamanho máximo do arquivo é {{maxFileSize}} bytes.';
  --l10n-has-validation-errors: 'Ocorreu um erro de validação do arquivo. Por favor, verifique seus arquivos antes de fazer o upload.';
  --l10n-images-only-accepted: 'Apenas imagens são aceitas.';
  --l10n-file-type-not-allowed: 'Não é permitido fazer upload deste tipo de arquivos.';
}css
<lr-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
></lr-config>

<lr-file-uploader-regular
      ctx-name="my-uploader"
      class="l10n-pt-PT"
      css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.30.2/web/lr-file-uploader-regular.min.css"
    >
</lr-file-uploader-regular>html

Pluralization

The property --l10n-locale-name should be set to the Unicode Language and Locale Identifier corresponding to the locale you are creating. This is used to apply plural rules.

Here's an example of a pluralized string:

.locale {
  --l10n-file__one: 'ficheiro';
  --l10n-file__many: 'de ficheiros';
  --l10n-file__other: 'ficheiros';
  --l10n-header-uploading: 'A carregar {{count}} {{plural:file(count)}}';
}css

Here,

  • --l10n-file__one, --l10n-file__many, and --l10n-file__other are the pluralized variants of the word 'file'.
  • Double curly braces {{ and }} are used for value interpolation.
  • {{count}} is a variable that will be replaced with the number of files being uploaded.
  • {{plural:file(count)}} employs special syntax to apply plural rules to the word 'file'.
  • The terms one, many, and other are plural categories. They are used to select the appropriate variant of the string.

For more information about plural categories, please refer to the provided link.