Skip to main content
Version: Upcoming 🦄

FileUploader

The FileUploader ctrl enables the user to upload files inside the Form.

<div
    id="fileuploader-ctrl"
    data-hf-control="FileUploader"
    data-hf-options="{ 
        label: 'File Uploader',
        required: true,
        maxFileUploads: 10,
        allowedFormats: ['pdf', 'jpeg', 'jpg', 'png'],
        descriptionStart: 'Here you can upload your documents.',
        descriptionEnd: '<div class=\'custom-class\'><small>Only PDF, JPEG and PNG files allowed. <br> (Minimum file size: 10 KB, maximum file size: 5 MB, at most 7 files).</small></div>',
        minFileSizeKb: 100,
        maxFileSizeKb: 5000,
        minImagePixel: 10,
        maxImagePixel: 5000,
        buttonLabel: 'Add file',
        deleteOnNotFullfilledCondition: false
    }"
></div>

FormControl Options​

allowedCharacters​

Set the allowed characters for the filename. If not set, the media settings whitelist property or the Form settings whitelist property is used (in this order). If none of these properties is set, all characters are allowed.
How to use:
allowedCharacters: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
Type: string

allowedCharactersRegExp​

Set the allowed characters for the filename in RegExp-format. If not set, the media settings whitelist property or the Form settings whitelist property is used (in this order). If none of these properties is set, all characters are allowed.
How to use:
allowedCharactersRegExp: [a-zA-Z0-9]
Type: string

allowedFormats​

Define the allowed file formats by listing the file extensions.
How to use:
allowedFormats: ['pdf', 'jpeg', 'jpg', 'png']
Type: string[]

buttonLabel​

Provide an individual button label string.
How to use:
buttonLabel: 'Add file'
Type: string

deleteOnNotFullfilledCondition​

De/activate deletion of attachments on not fullfilled conditions.
How to use:
deleteOnNotFullfilledCondition: false
Type: boolean
Default: true

descriptionEnd​

Provide an additional information placed beyond the "file list". (Plain text or restricted HTML text)
How to use:
descriptionEnd: '<div class='custom-class'><small>Only PDF, JPEG and PNG Dateien allowed. <br> (Minimum file size: 5 KB, maximum file size: 5 MB, at most 7 files).</small></div>'
Type: string

descriptionStart​

Provide a short intro text. (Plain text or restricted HTML text)
How to use:
descriptionStart: 'Hier können Sie ihre Unterlagen hochladen.'
Type: string

doNotCopy​

Set "true" whenever the field should be cleared if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

label​

Define a label for your control element.
How to use:
label: 'File Uploader'
Type: string

maxDurationSec​

Define the maximum duration of an audio or video file (other file types ignore this config).
How to use:
maxDurationSec: 120
Type: number

maxFilenameLength​

Define the maximum length of a filename.
How to use:
maxFilenameLength: 100
Type: number
Default: 70

maxFileSizeKb​

Define the maximum file size of the uploaded file kB.
How to use:
maxFileSizeKb: 5000
Type: number

maxFileUploads​

Set the limit of files the user can upload.
How to use:
maxFileUploads: 10
Type: number

maxImagePixel​

Define the maximum pixel width of the uploaded image.
How to use:
maxImagePixel: 5000
Type: number

maxVideoPixel​

Define the maximum pixel width of the uploaded video.
How to use:
maxVideoPixel: 1920
Type: number
Default: 1920

minDurationSec​

Define the minimum duration of an audio or video file (other file types ignore this config).
How to use:
minDurationSec: 3
Type: number

minFileSizeKb​

Define the minimum file size of the uploaded file in kB.
How to use:
minFileSizeKb: 100
Type: number

minImagePixel​

Define the minimum pixel width of the uploaded image.
How to use:
minImagePixel: 10
Type: number

minVideoPixel​

Define the minimum pixel width of the uploaded video.
How to use:
minVideoPixel: 100
Type: number
Default: 100

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes.
How to use:
onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(value: IFileUploaderItem[]) => void

renameFileIfExists​

Set "true" for renaming the uploaded file if another one with the same name already exists.
How to use:
renameFileIfExists: true
Type: boolean
Default:

required​

Set "true" if the control has to be filled in i.e. at least one file has to be uploaded.
How to use:
required: true
Type: boolean
Info

A FileUploader is used to dynamically add files to a Form.

interface IFileUploaderItem {
    name: string;
    size: number;
    mimeType: string;
    width?: number;
    height?: number;
}

Stored data

​

For each uploaded file inside your Forms there are two ways of stored data:

The information contained by the upload control as JSON object...

{
    "id": "repair_cover_glass_brokenfileuploader-ctrl",
    "value": "[{\"name\":\"standgeraet.png\",\"size\":355283,\"mimeType\":\"image/png\",\"width\":1369,\"height\":1058}]"
}

...and the information of the files attached to the Form item (they are also listed by the feature "documents"):

"files": [
    {
        "filename": "standgeraet.png",
        "size": 355283,
        "contentType": "image/png",
        "modified": "2021-04-30T07:07:41.3235667Z",
        "version": 637553632613235700,
        "fileID": 104115
    }
]