Properties
Field-specific properties
| Property | Type | Description |
|---|---|---|
fileHandler | function | (optional) File handler function that takes newly added files (newFiles: UploadValue) as a parameter and returns the processed files. The function can either be synchronous or asynchronous. It returns a promise (Promise<UploadValue>) containing the processed files when asynchronous. |
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. |
children | React.ReactNode | (optional) Content to display below the title and text. Can be used to add custom content. |
variant | normal compact | (optional) defines the appearance. Use one of these: normal or compact. Defaults to normal. |
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. |
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. |
buttonProps | ButtonProps | (optional) Define any valid Eufemia Button properties or HTML attribute inside an object, to customize the upload button behavior and appearance. |
skeleton | boolean | (optional) Skeleton should be applied when loading content. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
General properties
| Property | Type | Description |
|---|---|---|
value | Array<{ file, id }> | (optional) Source data value for the field. Will take precedence over the path value given in the data context. |
defaultValue | Array<{ file, id }> | (optional) Default source data value for the field. Will not take precedence over the path value given in the data context. |
path | string | (optional) JSON Pointer for where the data for the field is located in the source dataset (when using Form.Handler or DataContext). The path will also be set as the name attribute for the string-field. |
info | React.Node Array<React.Node> function | (optional) Info message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
warning | React.Node Array<React.Node> function | (optional) Warning message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
error | Error FormError Array<Error | FormError> function | (optional) Error message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with { conditionally, getValueByPath, getFieldByPath }. To show the message first after the user has interacted with the field, you can call and return conditionally function with a callback and with options: conditionally(() => 'Your message', { showInitially: true }) |
disabled | boolean | (optional) Set true to show the field but without the possibility of changing the value. |
emptyValue | Array<{ file, id }> undefined | (optional) The value to use (in onChange events etc) when emptying the field. Makes it possible for instance to provide undefined instead of an empty string when clearing the content of a text input. |
required | boolean | (optional) When set to true, the field will give an error if the value fails the required validation. When set to false, the field will not be required, but will add a "(optional)" suffix to the label. |
schema | object | (optional) Custom JSON Schema for validating the value. |
validateInitially | boolean | (optional) Set to true to show validation based errors initially (from given value-prop or source data) before the user interacts with the field. |
validateUnchanged | boolean | (optional) Set to true to show validation based errors when the field is touched (like focusing a field and blurring) without having changed the value. Since the user did not introduce a new error, this will apply when the value was initially invalid based on validation. |
validateContinuously | boolean | (optional) Set to true to show validation based errors continuously while writing, not just when blurring the field. |
errorMessages | object | (optional) Custom error messages for each type of error, overriding default messages. The messages can be a React.ReactNode or a string. |
transformIn | function | (optional) Transforms the value before its displayed in the field (e.g. input). |
transformOut | function | (optional) Transforms the value before it gets forwarded to the form data object (context) or returned as the onChange value parameter. The first parameter is the internal value. Some fields do support a second parameter, like the SelectCountry, where the country object is given. |
label | string | (optional) Field label to show above / before the input feature. |
labelDescription | string | (optional) A more discreet text displayed beside the label (i.e for "(optional)"). |
help | object | (optional) Provide help content for the field using title and content as a string or React.Node. Additionally, you can set open to true to display the inline help, set the breakout property to false to disable the breakout of the inline help content, or use renderAs set to dialog to render the content in a Dialog (recommended for larger amounts of content). |
width | string false | (optional) Will set the width for the whole block. Use small, medium, large for predefined standard widths. You can also set a custom width {number}rem or use stretch or false. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Translations
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
Upload.title | Last opp dokumenter | Upload documents | Ladda upp dokument | Upload dokumenter |
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. | Træk og slip eller vælg hvilke filer du vil uploade. |
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. | Træk og slip eller vælg hvilken fil du vil uploade. |
Upload.fileTypeTableCaption | Tillatte filformater og maks filstørrelse | Allowed formats and max. file size | Tillåtna filformat och max filstorlek | Tilladte filformater og maks filstørrelse |
Upload.fileTypeDescription | Tillatte filformater: | Allowed formats: | Tillåtna filformat: | Tilladte filformater: |
Upload.fileSizeDescription | Maks filstørrelse: | Max. file size: | Max filstorlek: | Maks filstørrelse: |
Upload.fileAmountDescription | Maks antall filer: | Max. number of files: | Max antal filer: | Maks antal filer: |
Upload.fileSizeContent | %size MB | %size MB | %size MB | %size MB |
Upload.buttonText | Velg filer | Choose files | Välj filer | Vælg filer |
Upload.buttonTextSingular | Velg fil | Choose file | Välj fil | Vælg fil |
Upload.loadingText | Laster | Loading | Laddar | Indlæser |
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. | Filen du prøver at uploade er for stor, den maksimale understøttede størrelse er %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). | Der er en grænse for, hvor mange filer du kan uploade (%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. | Filen du prøver at uploade er ikke understøttet. |
Upload.deleteButton | Slett | Delete | Radera | Slet |
Upload.fileListAriaLabel | opplastede filer | uploaded files | uppladdade filer | uploadede filer |
Upload.errorRequired | Du må laste opp minst en fil. | You must upload a file. | Du måste ladda upp minst en fil. | Du skal uploade mindst én fil. |
Upload.errorInvalidFiles | Fjern alle filer som har feil. | Remove all files that have errors. | Ta bort alla filer som innehåller fel. | Fjern alle filer, der indeholder fejl. |