Skip to content
Last update: June 19, 2025

Files Control Descriptor

This control uses the file-upload component. The corresponding npm package is also available.

Property Type Description
accept string Comma-separated list of accepted file extensions or MIME types.
Used directly in accept attribute.
multiple boolean Allows multiple file uploads. Default is true.
sortable boolean Allows files to be reordered. Default is true.
maxFileSize number Maximum allowed file size (in bytes).
collapseThreshold number Number of files after which the preview panel collapses. Default is 6.
collapseCount number Number of file previews shown in collapsed state. Default is 4.
skipRemoveConfirmation boolean Skips the confirmation prompt when removing a file.
removeMessage string Message shown in the remove confirmation dialog.
urlField string Field name containing the file URL (if value is an object).
filenameField string Field name containing the filename (if value is an object).
element ControlDescriptor[] Additional descriptors for custom fields in the file object.
UploadAcceptRequest
AssetsRequest
string
inline		 Custom request descriptor used to upload assets.

The value of this control is an array of URLs by default, or an array of objects if the element property is defined.

If uploadAssetsRequest is inline, the file will be converted into base64 and stored directly into page, without uploading to server. Such image can be used as the data URL.

If uploadAssetsRequest is string, it should be property name from the builder settings object. Also it can be just ServerRequestDescriptor object, which will be used to upload files to server.

If uploadAssetsRequest is not defined, the default request will be used, which is defined in builder settings as uploadAssetsRequest.

Examples

Single file

...
    "settings": [
        {
            "id": "attachment",
            "label": "Attach a file",
            "type": "files",
            "multiple": false,
            "accept": ".pdf,application/pdf"
        },
        ...
    ]
...

Result

Single file

...
    "content": [
        {
            "attachment": "https://localhost:5001/cms-content/Pages/B2B-store/assets/pages/contract.pdf"
            ...
        },
        ...
    ]
...

Multiple files

...
    "settings": [
        {
            "id": "attachment",
            "label": "Attach a file",
            "type": "files",
            "multiple": false,
            "accept": ".pdf,application/pdf"
        },
        ...
    ]
...

Result

Multiple files

...
    "content": [
        {
            "attachments": [
              "https://localhost:5001/cms-content/Pages/B2B-store/assets/pages/2-requerimento.pdf",
              "https://localhost:5001/cms-content/Pages/B2B-store/assets/pages/89e49b95-98e5-43fe-a250-3746af0660bf.pdf",
              "https://localhost:5001/cms-content/Pages/B2B-store/assets/pages/6268a3827af6a8c184ce400727.pdf",
              ...
            ]
            ...
        },
        ...
    ]
...

Files as objects

...
    "settings": [
        {
            "id": "attachments",
            "label": "Attach files",
            "type": "files",
            "urlField": "url",
            "filenameField": "filename",
            "element": [
                {
                    "id": "filename",
                    "type": "string",
                    "label": "File name"
                },
                {
                    "id": "url",
                    "type": "string",
                    "label": "File url"
                },
                {
                    "id": "altText",
                    "type": "string",
                    "label": "Alternative text"
                }
            ]
        },
        ...
    ]
...

Result

Multiple files

...
    "content": [
        {
            "attachments": [
                {
                    "filename": "2-requerimento.pdf",
                    "url": "https://localhost:5001/cms-content/Pages/B2B-store/assets/pages/2-requerimento.pdf",
                    "altText": "Requerimento"
                },
                {
                    "filename": "89e49b95-98e5-43fe-a250-3746af0660bf.pdf",
                    "url": "https://localhost:5001/cms-content/Pages/B2B-store/assets/pages/89e49b95-98e5-43fe-a250-3746af0660bf.pdf",
                    "altText": "Another file"
                },
                ...
            ]
            ...
        },
        ...
    ]
...