Properties
| Property | Type | Description |
|---|---|---|
id | string Function Object React.Context | (optional) Unique id used with the useUpload hook to manage the files. Needed when wanting to connect with the useUpload hook. |
acceptedFileTypes | Array<string> Array<AcceptedFileType> | (required) List of accepted file types. Either as string or AcceptedFileType. When providing a list of AcceptedFileType, the accepted file types will be presented in a table(see example). |
filesAmountLimit | number | (optional) Defines the amount of files the user can select and upload. Defaults to 100. |
fileMaxSize | number false | (optional) Defines the max file size of each file in MB. Use either 0 or false to disable. Defaults to 5 MB. |
title | string | (optional) Custom text property. Replaces the default title. Can be disabled using false. |
text | string | (optional) Custom text property. Replaces the default text. Can be disabled using false. |
download | boolean | (optional) Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to false. |
skeleton | boolean | (optional) Skeleton should be applied when loading content. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
AcceptedFileType
The accepted file type object is used to define file max size for specific file types.
When providing a list of AcceptedFileType to Uploads acceptedFileTypes, the accepted file types will be presented in a table. Here is an example.
The table is sorted descending by maxFileSize. Multiple fileType for the same maxFileSize is sorted alphabetically ascending by fileType.
| Property | Type | Description |
|---|---|---|
fileType | string | (required) The name of the accepted file type. |
fileMaxSize | number false | (optional) Defines the max file size of the given file type in MB. Use either 0 or false to disable. If not provided, it defaults to the value of Uploads fileMaxSize which defaults to 5 MB. |
Translations
All translation keys listed in the translations table below, can be used as a component property (like title or text).
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | sv-SE (beta) |
|---|---|---|---|
Upload.title | Last opp dokumenter | Upload documents | Ladda upp dokument |
Upload.text | Dra og slipp eller velg hvilke filer du vil laste opp. | Drag & drop your files or choose files to upload. | Dra och släpp eller välj vilka filer du vill ladda upp. |
Upload.textSingular | Dra og slipp eller velg hvilken fil du vil laste opp. | Drag & drop your file or choose which file to upload. | Dra och släpp eller välj vilken fil du vill ladda upp. |
Upload.fileTypeTableCaption | Tillatte filformater og maks filstørrelse | Allowed formats and max. filesize | Tillåtna filformat och max filstorlek |
Upload.fileTypeDescription | Tillatte filformater: | Allowed formats: | Tillåtna filformat: |
Upload.fileSizeDescription | Maks filstørrelse: | Max. filesize: | Max filstorlek: |
Upload.fileAmountDescription | Maks antall filer: | Max. number of files: | Max antal filer: |
Upload.fileSizeContent | %size MB | %size MB | %size MB |
Upload.buttonText | Velg filer | Choose files | Välj filer |
Upload.buttonTextSingular | Velg fil | Choose file | Välj fil |
Upload.loadingText | Laster | Loading | Laddar |
Upload.errorLargeFile | Filen du prøver å laste opp er for stor, den maksimale støttede størrelsen er %size MB. | The file you are trying to upload is too big, the maximum size supported is %size MB. | Filen du försöker ladda upp är för stor, den maximalt tillåtna storleken är %size MB. |
Upload.errorAmountLimit | Det er begrenset hvor mange filer du kan laste opp (%amount). | There is a limit to how many files you can upload (%amount). | Det är begränsat hur många filer du kan ladda upp (%amount). |
Upload.errorUnsupportedFile | Filen du prøver å laste opp er ikke støttet. | The file you are trying to upload is not supported. | Filen du försöker ladda upp stöds inte. |
Upload.deleteButton | Slett | Delete | Radera |
Upload.fileListAriaLabel | opplastede filer | uploaded files | uppladdade filer |
Upload.errorRequired | Du må laste opp minst en fil. | You must upload a file. | Du måste ladda upp minst en fil. |
Upload.errorInvalidFiles | Fjern alle filer som har feil. | Remove all files that have errors. | Ta bort alla filer som innehåller fel. |