FileUploader
The FileUploader ctrl enables the user to upload files inside the form.
<div id="fileuploader-ctrl"
data-win-control="HFWinJSCtrl.FileUploader"
data-win-options="{
label: 'File Uploader',
required: true,
maxFileUploads: 10,
allowedFormats: ['pdf', 'jpeg', 'jpg', 'png'],
descriptionStart: 'Hier können Sie ihre Unterlagen hochladen.',
descriptionEnd: '<div class=\'custom-class\'><small>Only PDF, JPEG and PNG Dateien 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>
Property | Type | How to use | Description |
---|---|---|---|
allowedFormats | JSON Array | allowedFormats: ['pdf', 'jpeg', 'jpg', 'png'] | Define the allowed file formats by listing the file extensions. |
buttonLabel | String | buttonLabel: 'Add file' | Provide an individual button label string. |
deleteOnNotFullfilledCondition | Boolean | deleteOnNotFullfilledCondition: false | De/activate deletion of attachments on not fullfilled conditions. The defaultValue is true. |
descriptionStart | String | descriptionStart: 'Hier können Sie ihre Unterlagen hochladen.' | Provide a short intro text. (Plain text or restricted HTML text) |
descriptionEnd | String | 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>' | Provide a additional information placed beyond the "file list". (Plain text or restricted HTML text) |
doNotCopy | Boolean | doNotCopy: true | Set "true" whenever the field should get deleted if form is copied. |
label | String | label: 'File Uploader' | Define a label for your control element. |
maxFileUploads | Number | maxFileUploads: 10 | Set the limit of files the user can upload. |
minFileSizeKb | Number | minFileSizeKb: 100 | Define the minimum file size of the uploaded file in kB. |
maxFileSizeKb | Number | maxFileSizeKb: 5000 | Define the maximum file size of the uploaded file kB. |
minImagePixel | Number | minImagePixel: 10 | Define the minimum pixel width of the uploaded image. |
maxImagePixel | Number | maxImagePixel: 5000 | Define the maximum pixel width of the uploaded image. |
renameFileIfExists | Boolean | renameFileIfExists: true | Set "true" for renaming the uploaded file if another one with the same name already exists. |
required | Boolean | required: true | Set "true" if the control has to be filled in i.e. at least one file has to be uploaded. |
onChanged | Function(value: IFileUploaderItem[]) | onChanged: HFFormdefinition.Namespace.Method | Call a pre-defined JS-method to do something when the status of the control changes |
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
}
]