Localization

All keys and values for the UI texts and translations are placed in CSS. You can find a basic English locale template on GitHub at this link: l10n.css

How to update existing localization

You can create your own variant of any UI text:

CSS:

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

JavaScript:

<lr-file-uploader-regular
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@0.22.8/web/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 similiar 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.

And 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.';
}

.config {
  --cfg-pubkey: 'demopublickey';
}css

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

Pluralization

Property --l10n-locale-name should be set to the Unicode Language and Locale Identifier of the locale you are creating. It's used to apply plural rules.

Here is an example of 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 pluralized variants of the file. Double curly braces {{ and }} are used to interpolate values. {{count}} is a variable that will be replaced with a number of files being uploaded. {{plural:file(count)}} is a special syntax to apply plural rules to the file. one, many and other are plural categories. They are used to select a proper variant of the string. You can find more information about plural categories here.