File Upload

Overview

The File Upload component is a utility component that helps select files in a component. The component can select files from the Photos folder, the Drive, and choose files after capturing the image from the camera. The File Upload component contains the Attach Document option that provides the options given below in a Native Action Sheet.

  • Camera: Opens the Camera widget to take a picture and upload the captured image.
  • Photos: Opens the gallery to select an image.
  • Drive: Opens the File Manager/ Storage of the mobile device for the user to select a file.

NOTE: The File Upload component is used inside the Mobile Banking application.

File Upload Contracts

The File Upload component contains the following methods and events to define the options in the component.

setData Method

This method sets data to the component. The setData method invokes in the Form controller under the preShow or postShow event callback.

Parameter Value
Input parameter

A JSON object with the following key-value pairs.

  • documentUploadTitle: Sets the header of the component in a String format.
  • attachDocsText: Sets the text for the Document Label in a String format.
  • infoData: JSON object containing the Info Icon data.
  • typeError: Sets the Invalid File Type error text in a String format.
  • sizeError: Sets the error text when the user files exceed the size set in the maxFileSize key.
  • maxNumberOfFilesError: Sets the error text when the number of files uploaded exceeds the number set in the maxNumberOfFiles key.
  • optionsToSet: JSON object that specifies the locations to add a file. This object contains the following keys, and each key accepts a Boolean value to enable or disable the option.
    • camera
    • photos
    • drive
  • maxNumberOfFiles: Sets the number of files that the user can upload in an integer format.
  • maxFileSize: Sets the maximum upload file size limit in an integer format.
  • expectedFileFormat: Sets the array of format types that the user can upload.
  • onWarningCallback: Sets the callback function executed when a warning occurs while uploading the file.
  • onErrorCallback: Sets the callback function invoked when an error occurs while uploading the file.
  • fileSelectedCallback: Sets the callback function executed when user selects a file for upload.
  • fileAddedtoSegCallback: Sets the callback function executed when user adds a file to the Segment in the component.
  • removeFileCallback: Sets the callback function executed when user removes a file.
  • filesData: Sets an array of JSON object containing the information about the files/ attachments data to be set to the segment.
    If this key does not contain a value, the Segment containing the files does not appear. Each JSON object includes the following keys.
    • lblDocName: Contains the file name in a String format.
    • lblFileIcon: JSON object containing the text and skin of the File type icon.
    • fileObject: JSON object containing the following file data.
      • base64: Contains the base64 value of the file.
      • size: Contains the file size.
      • fileMimeType: Contains the file type.
      • name: Contains the file name.
    • btnCloseIcon: JSON object containing the following properties of the Close icon.
      • text: Sets the text value of the font icon in a String format.
      • onClick: Sets the callback function executed when the user clicks the Close icon.
    • template: Sets the Segment template name in a String format.

Sample Input 

var data={
    "documentUploadTitle": "Supporting Documents (Optional):",
    "attachDocsText": "Attach Documents (Optional)",
    "infoData": {
        "title": "Time-Weighted Return",
        "description": "Return calculation eliminates the effects on growth rates created by any inflows or outflows of cash. The time-weighted return breaks up the return into separate intervals based on whether cash was added or withdrawn.",
        "closeBtnText": "Close",
        "closeCallback": this.closeCallbackfun,
        "isModalContainer": false
    },
    "typeError": "Please select valid file",
    "sizeError": "Please select file less than 25MB",
    "maxNumberOfFilesError": "Number of files should not be more than 3",
    "optionsToSet": {
        "camera": true,
        "photos": false,
        "drive": true
    },
    "maxNumberOfFiles": 5,
    "maxFileSize": 2,
    "expectedFileFormat": [
        "jpeg",
        "pdf",
        "docx",
        "xls",
        "xlsx",
        "csv"
    ],
    "onErrorCallback": this.uploadErrorCallback,
    "onWarningCallback": this.onWarningCallback,
    "fileSelectedCallback": this.uploadCallback1,
    "fileAddedtoSegCallback": this.uploadCallback2,
    "removeFileCallback": this.uploadCallback3,
    "filesData": [{
            "lblDocName": "FileName",
            "lblFileIcon": {
                "text": "fontIconValue",
                "skin": "skinName"
            },
            "fileObject": fileObject,
            "btnCloseIcon": {
                "text": "\ue935",
                "onClick": this.showAlertToRemove
            },
            "template": this.componentUtility.getDynamicTemplateName(templateConfig)
        },
        {
            "lblDocName": "FileName",
            "lblFileIcon": {
                "text": "fontIconValue",
                "skin": "skinName"
            },
            "fileObject": fileObject,
            "btnCloseIcon": {
                "text": "\ue935",
                "onClick": this.showAlertToRemove
            },
            "template": this.componentUtility.getDynamicTemplateName(templateConfig)
        }
    ]
};
this.view.fileupload.setData(data);

Return Type

NA

getFilesData Method

This method retrieves the data of the files that the user selects in the component.

Parameter Value

Syntax

this.view.<ComponentID>.getFilesData();

Input parameter

NA

Sample Input 

var data = this.view.fileupload.getFilesData();

Return Type

Returns the data of the files selected in the component.

onWarningCallback Event

This event handles any warning that occurs in the component. When this event is triggered, the component invokes the callback function set as part of context data in the setData method.

Parameter Value
Input parameter

NA
Programmatic Name onWarningCallback

Sample Code 

this.onWarningCallback();

Return Type

NA

onErrorCallback Event

This event handles any error that occurs in the component. When this event is triggered the component invokes the callback function set as part of context data in the setData method.

Parameter Value
Input parameter

NA
Programmatic Name onErrorCallback

Sample Code 

this.onErrorCallback();

Return Type

NA

fileSelectedCallback Event

This event is triggered when the user selects a file in the component. When this event is triggered, the component invokes the callback function set as part of context data in the setData method.

Parameter Value
Input parameter

NA
Programmatic Name fileSelectedCallback

Sample Code 

this.fileSelectedCallback();

Return Type

NA

fileAddedtoSegCallback Event

This event is triggered when the user adds a file to the Segment in the component. When this event is triggered, the component invokes the callback function set as part of context data in the setData method.

Parameter Value
Input parameter

NA
Programmatic Name fileAddedtoSegCallback

Sample Code 

this.fileAddedtoSegCallback();

Return Type

NA

removeFileCallback Event

This event is triggered when the user removes a file from the component. When this event is triggered, the component invokes the callback function set as part of context data in the setData method.

Parameter Value
Input parameter

NA
Programmatic Name removeFileCallback

Sample Code 

this.removeFileCallback();

Return Type

NA

Expand/Collapse
Share
Print

In this topic

Copyright © 2020- Temenos Headquarters SA

Published on :
Monday, May 2, 2022 5:08:52 PM IST

Feedback
x