FileUploadWithTag
🚧 This documentation is a work in progress.
Usage
Anatomy
Properties
The following is an autogenerated list of the properties available for FileUploadWithTag based on the component’s JSON schema file (linked below).
We are currently updating how we implement components, and the list of properties may not be entirely accurate.
Required properties: id,type,displayMode,maxFileSizeInMB,maxNumberOfAttachments,minNumberOfAttachments,optionsId
| Property | Type | Description |
|---|---|---|
| string | The component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with <dash><number>. |
| string | The component type. |
| object | Data model bindings for component |
basicDataModelBindings.simpleBinding | string | Data model binding for components connection to a single field in the data model |
| object | Text resource bindings for a component. |
textResourceBindings.title | string | |
| string | Reference to connected options by id. |
| string | Sets the display mode for the file upload component. Enum: [simple, list] |
| object | Settings for the components grid. Used for controlling horizontal alignment. Example(s): {xs: 12} |
gridSettings.innerGrid | gridProps | Optional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width. Example(s): {xs: 12}See: gridProps |
gridSettings.labelGrid | gridProps | Optional grid for the component label. Used in combination with innerGrid to align labels on the side. Example(s): {xs: 12}See: gridProps |
| boolean | Boolean value indicating if the component has valid file endings |
| boolean | Boolean value or expression indicating if the component should be hidden. Defaults to false. |
| mapping | Optionally used to map options |
| object | Mapping Example(s): {some.source.field: key1} |
| integer | Sets the maximum file size allowed in megabytes. |
| integer | Sets the maximum number of attachments allowed to upload. |
| integer | Sets the minimum number of attachments to upload |
| object | |
pageBreak.breakAfter | string | PDF only: Value or expression indicating whether a page break should be added after the component. Can be either: 'auto' (default), 'always', or 'avoid'. Example(s): auto,always,avoid |
pageBreak.breakBefore | string | PDF only: Value or expression indicating whether a page break should be added before the component. Can be either: 'auto' (default), 'always', or 'avoid'. Example(s): auto,always,avoid |
| boolean | Boolean or expression indicating if the component should be rendered as a summary. Defaults to false. |
| A separated string of valid file endings to upload. If not set all endings are accepted. Example(s): .csv,.doc,.docx,.gif,.jpeg,.pdf,.txt |
Configuration
We are currently updating Altinn Studio Designer with more configuration options!
The documentation is continuously updated, and there may be more settings available than what is described here, and some settings may be in beta version.
Add component
You can add a component in Altinn Studio Designer by dragging it from the list of components to the page area.
Selecting the component brings up its configuration panel.
Basic component:
App/ui/layouts/{page}.json{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
{
"data": {
"layout": [
{
// Basic component (required properties)
}
]
}
}
}