Skip to content

sc-uploader

1 Purpose

This document is a user guide for the sc-uploader component as of version 4.02.

sc-uploader places an uploader field on a form, providing the user with two methods to upload a file. A file is uploaded by either:

  1. Clicking the "select file" button alt text and selecting the file.
  2. Or by dragging and dropping the file onto the "Or drop file here" area.

The file extensions that can be uploaded are listed in the "extensionWhitelist" field within the "fileUploader" field of the "Environment Configuration" document. Updating the "extensionWhitelist" will replace the existing "extensionWhitelist" (i.e. not add to it) and being a server configuration, will require a restart of the server. For example, an Environment Configuration document defined with the "fileUploader" field shown below lists 18 file extensions that can be uploaded by the uploader field:

        "fileUploader": {
            "defaultTemplateId": "2d5d90f0-9da9-11e7-b329-9f0a52692ed3",
            "relatedDocumentField": "relatedDocument",
            "fileUploaderField": "fileDetails",
            "extensionWhitelist": [
                "json",
                "jpeg",
                "jpg",
                "png",
                "tiff",
                "bmp",
                "gif",
                "txt",
                "doc",
                "docx",
                "ppt",
                "pptx",
                "xls",
                "xlsx",
                "zip",
                "rar",
                "7zip",
                "gzip"
            ]
        }

The sc-uploader definition provides fields for setting the properties of an uploader field and is fully described below.

 

2 Definition

sc-uploader is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for the sc-uploader definition fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-uploader The component name.
Example: "componentName": "sc-uploader"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the sc-uploader field in the document and database.
Example: "name": "testScUploader"

2.3 Optional Customizable Fields

Field Valid Values Description
enabled false The sc-uploader field is greyed out.
A Stop icon appears on mouseover.
A file for upload cannot be selected or dropped in the "Or drop file here" area.
Example: "enabled": false
true Default value. A file for upload can be selected or dropped in the "Or drop file here" area.
fullWidth true The sc-uploader field displays full width on the form.
Example: "fullWidth": true
false Default value. The sc-uploader field does not display full width on the form.
label Any value Defines the name of the sc-uploader field on the form i.e. the field label.
Example: "label": "Test sc-uploader"
Defaults to no label is displayed.
Example: "Test_sc_uploader" is the default value if the "name" field value was "testScUploader".
mandatory true The sc-uploader field displays as mandatory (i.e. label in red text with an asterisk).
Saving without a value, a message prompts the user to enter a value for the sc-uploader field.
Example: "mandatory": true
false Default value. The sc-uploader field displays as optional (i.e. label in black text).
maxImageHeight Integer The height resolution at which to compress and save an uploaded image file.
If the image height is less than the specified value then no compression occurs.
If the image height is greater than the specified value then compression occurs such that the aspect ratio is maintained.
Example: "maxImageHeight": 960
For this example:
If the resolution of the image to be uploaded was 640 x 480, then no compression would occur as 480 is less than 960
If the resolution of the image to be uploaded was 1920 x 1080, then compression would occur as 1080 is greater than 960. To maintain the aspect ratio (960/1080 = 0.88), the image would be saved with a resolution of 1690 x 960.
Defaults to upload and save the image with no change to the resolution.
visible false The sc-uploader field is not visible on the form.
Example: "visible": false
true Default value. The sc-uploader field is visible on the form.

 

3 Typical sc-uploader Definition

Below is a typical sc-uploader definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-uploader",
    "label": "Attachments",
    "name": "fileDetails",
    "fullWidth": true,
    "maxImageHeight": 960
}

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

    "mandatory": true,
    "enabled":false,
    "visible":false,

 

4 Examples

Example 1

sc-uploader defined with the typically needed fields.

        {
            "componentName": "sc-uploader",
            "fullWidth": true,
            "label": "Test sc-uploader",
            "name": "testScUploader",
            "maxImageHeight": 960
        }

Resulting field on the form:

alt text

Resulting field on the form after selecting a file for upload:

alt text

  • Each uploaded file will display as an icon under the sc-uploader field.
  • To view an uploaded file, click its icon.
  • To delete an uploaded file, click the trash can in the top right corner of its icon.

Resulting field in document and database after saving the uploaded file

    "testScUploader": [
        {
            "fileNo": "8d3460d0-8be2-11e8-880c-ed88b9e98def",
            "fileName": "sc-check-list field - Example 1, Image 1.png",
            "fileType": "PNG",
            "serverAssignedFileNo": "8d3460d0-8be2-11e8-880c-ed88b9e98def"
        }
    ]