The File component
The File component allows users to upload files, and is the counterpart of the ResultFile component. In comparison to the gui_upload functionality, there are several differences.
- The
Filecomponent does not block the user interface during upload. It also does not trigger an event in the back-end. - For deployed applications, the file is uploaded to the webserver instead of being part of the submission data. This makes the
Filecomponent suitable for uploading larger files.
There are two modes of operation:
- base64: In base64 mode, the selected files are base64 encoded and put in the submission data. This is the only available mode for local applications.
- portal: In portal mode, the selected files are uploaded to the portal webserver. Download URLs are provided in the submission data. This is the default mode for deployed applications.
Note: the File component also offers upload capabilities for a number of cloud storage services. These are not facilitated yet.
In addition to the properties and methods listed below, this component inherits properties and methods from the superclass Component. For example, any File component has a label and tooltip property even though these are not explicitly listed here.
Properties
| Name | Description | Datatype | Default |
|---|---|---|---|
| fileMaxSize | Maximum size allowed for files. E.g. "10MB". | String | Null |
| fileMinSize | Minimum size allowed for files. E.g. "10KB". | String | Null |
| filePattern | Pattern or MIME type for allowed file types. E.g. ".pdf,image/png" | String | "*" |
| fileTypes | Allowed file types to be uploaded. Combinations of 'label', and 'value' with the filePattern. | List of dicts / struct array | |
| image | Display the uploaded file as image instead of the file name. | Boolean | False |
| imageSize | The image display size. Allows for downscaling. | String | Null |
| tableView | When true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid. | Boolean | False |
| uploadOnly | Whether the files cannot be downloaded again from the File component. | Boolean | True |
| multiple | Allow the user to upload multiple files when set to True. | Boolean | False |
| webcam | Allow the user to take a picture with a webcam / camera. | Boolean | False |
| webcamSize | Display size for webcam images. | String | Null |
Methods
| Name | Syntax | Description |
|---|---|---|
| storeUploadedFiles | [payload, filePaths] = File.storeUploadedFiles(metaData, payload, key, Parent=parent, NestedForm=nestedForm) | Use the submission data to save the files in the back-end and provide the local file paths as output1. |
| useBase64Upload | obj.useBase64Upload() | Use base64 mode in deployed mode. |
Basic usage
-
In the
guiInitfunction or builder add aFilecomponent and modify the properties to allow users to select the intended files types. -
In an event callback run the
File.storeUploadedFilesmethod to move the selected files to the back-end and make them available for your code. Note that the second output of the method contains the unique, full names to the files in the back-end1. These can directly be used to access the file contents in your back-end code. Note that the mode of operation does not affect your code. -
(In a later event callback) you can get more information on the uploaded files by using the utils.getSubmissionData function. The function returns a list of dicts / struct array with per uploaded file:
name: the unique local file name1. Note that it includes a unique suffix to prevent overwriting files and that it does not contain the folder path.originalName: The original name of the uploaded file. Includes the file extension. Useful when the (changed) file needs to be made available for download in a ResultFile component.size: The size of the uploaded file, in bytes.storage: theFilecomponent's operation mode.type: file type.
-
The local files can be reached and processed in your back-end code by combining the:
- session folder where the files are stored:
sessionFolder = utils.getSessionFolder(meta_data), and - the local file "name" as described above.
- session folder where the files are stored:
See also
ResultFilefor downloading files created in the back-end.
The files are saved in the session folder. This folder is removed when the application is closed.