Upload Panel

Upload Component is a panel of dedicated items for file upload handling. End users can attach files by drag-and-drop or selecting a file from the file browser.

For the Upload Component, you must specify the file formats that can be uploaded in the Settings menu.

The following label keys in the componentspreferences.properties file provides additional restriction for File Upload component:

Path to maintain the uploaded files. This should be a relative path with respect to the root path configured in the default descriptor for the key CT_WORK_CENTRALIZED_PATH.
UPLOAD_TEMP_FOLDER = /FileUpload
Provide the Max File Size in MB (Do not include 'MB' along with the file size). The file size can be in decimals also.
MAX_FILE_SIZE_MB = 10

Form Items > Action > Upload Panel

The following table provides information about the properties that are applicable to this form item:

#	Property	Description	Sample Values
1	Form ID	Unique ID of the Form on which you want to place the Form Item.	CT_TEST_FORM#457
2	Item ID	Unique ID to the Form item. This value is automatically configured once the form is selected from the pop-up window.	UPLOAD_FIELD1
3	Item Type	To identify the item type in a form.	UPLOADPANEL
4	Channel	Assigns the form item compatibility for various devices.	Desktop / Tablet / Mobile
5	Bundle Key	Name of the key associated with the property file which provides the localized label text for the current form item. Form item bundle key supersede the form level bundle key. If this value is blank, form level bundle key will be used to find label keys.	Common
6	Plain Label	Text entered in Plain Label field appears as the label of the form item without the resource bundle key translation. 18.1: If you are using the property files, leave the Plain Label field as blank. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. Display Name Key is the property-driven label key for the form item. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. 19.1: In Canvas 19.1, the Display Name Key field is a configuration-driven label key for the form item. See About Display Name Key and Plain Label from 19.1 and Managing Display Names for Forms for more information.
7	Display Name Key		INPUT_DEBIT_ORG_ACC_NO
8	Edit	Selected: Renders the Form in edit enabled mode. De-Selected: Renders the Form in edit disabled mode.	Selected
9	Visibility	Selected: Shows the form item on the Form. De-Selected: Hides the form item from the form, but the data will still be in active.	Selected
10	Help	Selected: Renders the form item with a help icon. De-Selected: Renders the form item without a help icon. Refer the Configuring Help Messages and Tooltips for Form Items section for more information on configuring help text.	Selected
11	Anchor	Defines the size of the form item in terms of percentage (without % symbol).	50
12	Print	Selected: Allows printing the form item while printing the form. De-Selected: Does not print the particular form item while printing the form.	Selected
13	Column Span	Occupies the specified number of item spaces horizontally for the current item.	1
14	Label Alignment	Indicates the alignment of the labels of the form items. Select Options: Left () or Top ()	Top
15	Hide Label	Selected: Hides the label of the form item. De-Selected: Shows the label of the form item.	De-selected
16	Mandatory	Selected: Shows the red asterisk ({}{}) on the label of the form item, and converts the particular field as mandatory. De-Selected:* Considers the particular field as non-mandatory.	Selected
17	Conditional Mandatory	Selected: Shows the blue double asterisks ({}{}) on the label of the form item, and converts the particular field as conditional mandatory. If selected, write the conditional logic in the CFEC.PRE_VALIDATE event. See Form Item Handlers for more information. De-Selected: Considers the particular field as normal. If 'Mandatory' is already selected, do not select this property.	De-Selected
18	Event Wiring	The Event Wiring option enables you to assign various events for different set of actions. For detailed information on Event Wiring, refer Form Items Event Wiring.
19	Settings Menu: List of File Formats to be Supported	This is a mandatory configuration that is used to specify the list of file formats that can be uploaded. Use comma (,) to specify multiple file formats, e.g. PDF, XLS, PNG.	.docx
20	Switch	Enables you to switch from one form item to another form item along with the applicable properties and their values. To switch from one form item to another form item, execute the steps that follow: Select the form item in the form designer area. Click the Switch icon () on the primary ribbon. Select another form item to switch the existing form item.	NA
21	Clone	Enables you to create a duplicate of the selected form item along with its applicable properties except for the Item ID.	2

Canvas now enables you to configure maximum allowed size for upload panels per MIME type (PDF, JPG, etc.) and per form item. Earlier the maximum allowed size for upload panels was set as a global configuration. This means that the total configured size was divided across different MIME types.

The global configuration gave rise to ambiguity where the end-users had to upload different files within limited sizes. For example, let’s assume that the file upload size is set to 2 MB max. When users upload an image (.jpeg file) of size 1 MB and in the same form they upload a data file of size 1.5 MB, the application would have prevented the upload.

With the latest updates, you can set different limits for different upload panel form items. The maximum file size would be configured in componentspreferences.properties file for each MIME type and the same will be used to validate the maximum allowed size at globally.

Refer componentspreferences.properties.txt for reference.

To configure the maximum file upload size as global parameter, set the value to MAX_FILE_SIZE_MB in properties file.
e.g. MAX_FILE_SIZE_MB = 10
To configure the maximum file upload size per MIME type, set the values to MAX_FILE_SIZE_BY_MIME_TYPE_MB in properties file as a new parameter entry.
e.g. MAX_FILE_SIZE_BY_MIME_TYPE_MB={"jpg" : 5, "png" : 3}
To configure the maximum file upload size at upload panel form item level, set the values to UPLOAD_FILE_FORMATS column in FORM_ITEM_DEFINITION table.
e.g. UPLOAD_FILE_FORMATS = pdf:5,jpg:5,png:3 (upload format : max allowed size)

Note: Item specific configuration can override the global limit by specifying in USER_UPLOAD_FORMATS in FORM_ITEM_DEFINITION as jpg:5, png:3

To serve the purpose of file upload in Upload Panel, you must ensure that the fm.uploadFile API is called and it is the fm.uploadFile API, which facilitates the file upload process. For detailed information on form and form item APIs, refer Form and Form Item APIs. The following code snippet serves as a sample reference:

this.fm.registerHandler(CFEC.FILE_ADD, 'FILTER_upload', function(fm, fieldName, filename, uploadcount, store) {
   alert(success);
   fm.uploadFile('state', function(params) {
      var fileDetails = fm.model.getValue('FILTER_upload');
      if (fileDetails) {
        var fileName = fileDetails[0].filename;
        var refNo = params.FileData[0].attachmentRefNumber;
      }
   })
});

Priority of Configuration

If all of the above three configurations are specified, the order of size validation is as follows:

Against the upload panel form item specific configuration.
Against the MIME type specific configuration.
Against the default global configuration.