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. |
allowDuplicates | boolean | (optional) Allows uploading of duplicate files. Defaults to false. |
disableDragAndDrop | boolean | (optional) Disables file drag and drop, by removing the drop zone. 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. |
FileItem
The file item object is representing the files of the Upload component.
| Property | Type | Description |
|---|---|---|
file | File | (required) The file object. This is the same object as the one returned by the File API. |
id | string | (required) Unique ID for the file item. This ID is generated by the component and is not user-defined. |
exists | boolean | (optional) Indicates if the file item already exists in the list of files. This is useful for distinguishing between new and existing files. |
isLoading | boolean | (optional) Indicates if the file item is currently being loaded. This is useful for showing a loading state while the file is being processed. |
errorMessage | React.ReactNode | (optional) Provide an error message to be displayed. This is useful for indicating issues with the file upload process. |
description | React.ReactNode | (optional) Provide a description to be displayed. This is useful for providing additional information about the file. |
removeDeleteButton | boolean | (optional) Set to true to remove the delete button from the file item. This is useful for preventing users from deleting files. |
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. file size | Tillåtna filformat och max filstorlek |
Upload.fileTypeDescription | Tillatte filformater: | Allowed formats: | Tillåtna filformat: |
Upload.fileSizeDescription | Maks filstørrelse: | Max. file size: | 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. |