File Upload
File Upload is used to upload any type of document
Properties
Value "expression"
"expression"
The binding for the component. Use an appropriate expression to bind the component to its value and specify where the value is saved/read.
For example, use
'{{myVariableName}}'
to store the value of the component in a variable named'myVariableName'
Use prefixes to define the scope of the value.
For example,
'root.'
for referencing the root case to store the value in or'parent.'
to store the value in the parent work item of the current one.
Please refer to the section 'Frontend expressions' in the Flowable guide for more information.
After uploading the files, they will be saved in this variable as an array of objects. If the file has been uploaded successfully or if there has been an error due to size issues or any other reason, the file object will have a different format, including the error property or the successful file base64. You can check here the difference between both:
- Successfully uploaded file format:
The file will retrieve the fileBase64 property to be able to upload it to the API.
[
{
"path": "./image-name.jpg",
"relativePath": "./image-name.jpg",
"lastModified": 1213423412342,
"lastModifiedDate": "2021-01-01T12:00:00.000Z",
"name": "image-name.jpg",
"size": 1234121,
"type": "image/jpg",
"fileBase64": "/sdfsd/SdSADF/sdfasdfasd/ASDFsdfsdfsadf",
"documentSection": ""
}
]
- Rejected file format:
[
{
"path": "./image-name.jpg",
"relativePath": "./image-name.jpg",
"lastModified": 1213423412342,
"lastModifiedDate": "2021-01-01T12:00:00.000Z",
"name": "image-name.jpg",
"size": 1234121,
"type": "image/jpg",
"fileBase64": "",
"documentSection": "",
"error": {
"code": "error_max_size",
"message": "File size cannot exceed 10MB"
}
}
]
ℹ️ The error
can have different codes:
Code | Message property | Default message |
---|---|---|
error_not_supported | Invalid file type message | File not supported |
error_max_size | Maximum size error message | File size can not exceed 10MB |
error_min_size | Minimum size error message | File size must be bigger than 1KB |
error_generic | Generic error message | Invalid file |
Label "string", "variable", "expression"
| required
| multilanguage
This attribute adds a textlabel to the component.
Description "string", "variable", "expression"
| required
| multilanguage
This attribute adds a text description to the component.
Text to identify the section of the file "string", "variable", "expression"
The value will be retrieved on the file object so you can identify easily which section it belongs to.
Upload icon "ENUM"
Select a custom icon to be added to the uploader. By default, it will render the “upload” icon.
Multiple files upload "boolean"
Boolean to define if the user can upload individual or multiple files at a time. By default, this is set to “true”.
Maximum files "number"
This refers to the maximum number of files that may be uploaded when multiple uploading is enabled. This property will only be shown when “Multiple files upload” is enabled.
Accepted file types "string", "variable", "expression"
Applies to all accepted file types, and should be an array with all the types separated by commas. The uploader only accepts the following types: ['PNG','JPG','HEIC','HEIF','PDF','XML']
. By default will be ['PNG','JPG','HEIC','HEIF','PDF']
Maximum file size (bytes) "number"
This can set an upper size limit for uploaded files, which in no case may exceed the default maximum size, which is 1000000 bytes (10MB) for images or 20000000 bytes (20MB) for files. This value may also not be smaller than the “Minimum file size”.
Minimum file size (bytes) "number"
This can set a threshold for uploaded files sizes, which in no case may be smaller than the default size required, which is 1000 bytes (1k). This value may also not be larger than the “Maximum file size”.
Invalid file type message "string", "variable", "expression"
| multilanguage
Add an error message to show when an invalid file type has been uploaded.
Maximum size error message "string", "variable", "expression"
| multilanguage
Add an error message to show when a file size exceeds the defined maximum size.
Minimum size error message "string", "variable", "expression"
| multilanguage
Add an error message to show when a file size is below the defined minimum size.
Generic error message "string", "variable", "expression"
| multilanguage
Add a generic error message to show when there has been a problem uploading a file that does not correspond to any of the ones above.
Margin top "number"
Add space equivalent to the number of indicated pixels to the top margin.
Margin bottom "number"
Add space equivalent to the number of indicated pixels to the bottom margin.
Updated 4 days ago