Language (i18n)
All built-in copy (instructions, drag states, format/size labels, upload
failure, retry) is translated. Pick a language with locale: "en"
(default), "es", "fr" or "de":
<DropUpload locale="fr" />If you don't pass instructionLabel, it falls back to the selected locale's
default instruction text instead of always being English.
A language the component doesn't ship falls back to English rather than
rendering nothing, which is handy when locale comes from a user profile or a database
column you don't control.
Overriding individual strings
Use translations to override specific strings on top of the chosen locale,
without having to translate everything yourself:
<DropUpload
locale="es"
translations={{
retry: "Reintentar de nuevo",
}}
/>Adding a language
The same prop takes a language the component doesn't ship: hand translations
a full dictionary and nothing falls back.
import type { DropUploadTranslations } from "@/components/DropUpload"
const pt: DropUploadTranslations = {
instructionLabel: "Solte os seus ficheiros aqui",
/* …the rest of the keys */
}
<DropUpload translations={pt} />Or add it to locales/translations.ts next to the four that ship. It is one
more object of the same shape, and DropUploadLocale picks it up on its own.
Every view reads its copy from a single t context value, so there is no
hardcoded string left anywhere else to find.
See locales/translations.ts in the component source for the full list of
translatable keys and the en/es/fr/de dictionaries.