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

images/download/attachments/113283841/image2018-12-7_10-38-13-version-1-modificationdate-1663679307550-api-v2.png

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.

images/download/attachments/113283841/image2018-12-7_10-42-1-version-1-modificationdate-1663679307542-api-v2.png

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,
to directly capture a drawing or signature (see Darstellungstyp "Zeichenfläche").
To switch, a separate button is displayed for this purpose.

images/download/attachments/113283841/image2018-12-10_8-54-6-version-1-modificationdate-1663679307566-api-v2.png

Show border

Only active if the 'File/Pen switch allowed' option is enabled.
Defines whether the pen pad should be displayed with a frame.

Default file name

Specifies the name of the file, if this cannot be determined.
For example, when capturing a signature or if no file name is given (e.g. when loading a file from the form data).

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.
The MIME types are standardized and can be easily found by a short internet search.

An example of a filter which should filter common image file formats and PDF files:
'image/jpeg, image/png, application/pdf'

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.
Afterwards, the file type can be viewed via the ribbon function 'Structure Export'.

Upload mode

The Upload mode defines how the selected files should be uploaded.

  • BASE64
    The file is written completely locally as ByteArray in the form data and encoded for processing as text (e.g. Lobster_data node) as BASE64 string.
    Advantages:
    - The file can be processed directly
    Disadvantages:
    - Large files can exhaust the available memory of the browser or application, causing the application to crash
    - No possibility to display a progress bar. The process blocks the application until the data has been transferred

  • SERVER_UPLOAD (not usable in connection with the 'pen pad').
    The file is either transferred directly to the target directory on the server (relative to the configured upload directory of Lobster Data Platform / Orchestration) or written to the temporary directory of Lobster_data with an automatically generated file name. Depending on the variant used, either the file path used as the destination (remoteFilePath) or the generated name of the temporary file (tempFileName) is available in the element's form data after uploading.
    Advantages:
    - Large files can be uploaded without consuming the client's memory
    - The user is shown the progress of the upload process. In addition, the process can even be canceled
    Disadvantages:
    - Files cannot be processed or displayed directly, but must first be read or otherwise stored on the server side
    - Without specifying a target directory, uploaded content cannot be displayed directly in the form (keyword: preview)


►NOTE◄ To process a temporarily uploaded file, Lobster_data provides the Lobster_pro: resolve temporary uploaded file path (_data function), which uses the name of the temporary file tempFileName to determine the relative path to this file.

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.
►NOTE◄ The upload directory can be managed in the file manager.

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

FileInfo (de.lobster.scm.utils.file.FileInfo)
"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.


images/download/attachments/113283841/image2018-12-10_9-50-23-version-1-modificationdate-1663679307554-api-v2.png

(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.

images/download/attachments/113283841/image2019-11-15_15-32-44-version-1-modificationdate-1663679307534-api-v2.png

When selecting a file via the .Datei v4.8.0 element, it is temporarily uploaded to the server.

images/download/attachments/113283841/selectFile-version-1-modificationdate-1663679307514-api-v2.png

If the file upload was successful, the corresponding FileInfo object is written to the form data of the file element.

Form data after successful upload as JSON
{
"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.

images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/warning.svg CAUTIONimages/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/warning.svg Lobster_data's temporary upload directory is automatically emptied! Therefore, the file should be processed or moved promptly, as it will subsequently disappear!