File
Form elements – Abstract
The file element offers the user the possibility to upload one or more files.
The File element offers the user the possibility to upload one or more files. These are then written to the form data as a single FileInfo object or as a list of FileInfo objects (see also Lobster Data Platform / Orchestration structure template FileInfo in _data mapping or Lobster SCM templates).
Whether uploading multiple files is possible can be controlled via the 'Allow multiple selection' option.
Display
Users can select the file both by clicking on the text or via drag and drop on the component.
Configuration
Property |
Description |
Allow download |
Displays a download button to the user when a file is selected. Clicking the download button will download the file directly. ►NOTE◄ If the 'content' field of the element data is empty/null and the 'remoteFilePath' field contains a valid server file path (relative to the Lobster Data Platform / Orchestration upload directory), the user additionally needs the right to read files (Administration/System/File manager/Read). |
Grow for drag & drop |
Enables/disables automatic 'growing' of the file component when a file is dragged over it. |
File/Pen switch allowed |
Allows the user to switch to the 'pen pad' display type,
|
Show border |
Only active if the 'File/Pen switch allowed' option is enabled. |
Default file name |
Specifies the name of the file, if this cannot be determined. A calculation expression can also be stored here. |
Type filter |
An optional comma-separated list of MIME types, which are set as file type filters in the browser's file selection dialog. Tip: The MIME type of a certain file can also be found out by uploading it via the file element (with data field!) in the test mode of the editor. |
Upload mode |
The Upload mode defines how the selected files should be uploaded.
|
Always replace existing files |
This setting option is only available if "SERVER_UPLOAD" has been selected as the upload mode. Disables/enables the user query in case an uploaded file already exists in the target directory. |
Target directory on the server |
This setting option is only available if 'SERVER_UPLOAD' has been selected as the upload mode and specifies the target directory on the server relative to the configured upload directory of Lobster Data Platform / Orchestration as calculation expression. |
Data
The .Datei v4.8.0 element writes the selected file, as already mentioned, as a FileInfo (en.lobster.scm.utils.file.FileInfo) object into the form data. The following describes the data structure of the FileInfo object in JSON format.
Field |
Description |
content |
The selected file as byte array (As text base also Base64 encoded) or empty, if SERVER_UPLOAD was selected as upload mode. |
name |
The name of the file. |
remoteFilePath |
Contains the file path on the server that can be reached by the client (only for SERVER_UPLOAD with defined target directory, otherwise null). |
tempFileName |
Contains the name of a temporarily uploaded file (only for SERVER_UPLOAD without defined destination directory, otherwise null). |
size |
The size of the file in bytes. |
creationDate |
The creation time of the file as UNIX timestamp in milliseconds. |
creator |
The creator of the file (optional). |
modificationDate |
The time of the last file change as UNIX timestamp in milliseconds. |
type |
The type of the file (e.g. 'image/png', 'application/pdf', ...). |
downloadUrl |
If no content and no remoteFilePath is set, this url – if filled – will be used for the download. |
Sample data as JSON for upload mode BASE64
"dataField"
: {
"clazz"
:
"de.lobster.scm.utils.file.FileInfo"
,
"content"
:
"iVBORw0KGgoAAAANSUhEUgAAAfAAAACSCAYAAAC655gD...ErkJggg=="
,
"name"
:
"Unterschrift.png"
,
"remoteFilePath"
:
null
,
"tempFileName"
:
null
,
"size"
:
"4579"
,
"creationDate"
: 1544092113126,
"creator"
:
null
,
"modificationDate"
: 1544092113126,
"type"
:
"image/png"
}
Display type 'Pen pad'
The .Datei v4.8.0 element offers, in addition to the default display type, a drawing area variant that allows the user to capture a drawing or signature. The display type is specified in the 'Common' properties rubric.
(1) Switches to the 'Upload file' display. Only displayed if the 'File/Pen switch allowed' option has been activated.
(2) Downloads the image as a file. Appears only if the 'Allow download' option has been enabled.
(3) Empties the drawing field
►NOTE◄
A fixed size is defined for the area (height/width fixed), because the resulting image is created with the pixel resolution of the pen pad.
Thus, setting a fixed pixel size prevents the creation of different sized images.A user-created drawing is written in 'png' image format
Working with the 'SERVER_UPLOAD' upload mode
If 'SERVER_UPLOAD' is selected as the Upload mode, the file content is not written to the form data, but uploaded directly to the server. However, the executing user then needs the right to upload files (Administration/System/File Manager: Create and Modify).
Larger files are uploaded in smaller steps in order to display the progress and to allow the user to cancel the process.
A target directory relative to the upload directory (directory of the file manager) of Lobster Data Platform / Orchestration can be configured for each file component, to which the files are uploaded. The files are stored there with their original file name without any further existence check and are permanently available there until they are explicitly deleted again.
If, on the other hand, no target directory is specified or the directory path is an empty string, the files are stored in a temporary directory with a generated and unique name. This directory is cleaned up regularly. The files are therefore not permanently available and should be processed promptly.
Example of uploading a file without a target directory
A .Datei v4.7. item is configured with the Upload mode 'SERVER_UPLOAD' and empty Target directory on server.
When selecting a file via the .Datei v4.8.0 element, it is temporarily uploaded to the server.
If the file upload was successful, the corresponding FileInfo object is written to the form data of the file element.
{
"file"
: {
"clazz"
:
"de.lobster.scm.utils.file.FileInfo"
,
"content"
:
null
,
"name"
:
"awesome_video_file.mp4"
,
"remoteFilePath"
:
null
,
"tempFileName"
:
"28fc99b1-58ff-4ae8-b6b6-5067d0dadfb7"
,
"size"
:
"3647310"
,
"creationDate"
: 1573817831335,
"creator"
:
null
,
"modificationDate"
: 1573817831335,
"type"
:
"video/mp4"
}
}
►NOTE◄ When 'mapping' (phase 3) in a Lobster_data profile, the Lobster_pro: resolve temporary uploaded file path (_data function) is available to resolve the temporary file name (tempFileName) to a relative file path for further processing steps.
CAUTION
Lobster_data's temporary upload directory is automatically emptied! Therefore, the file should be processed or moved promptly, as it will subsequently disappear!