File handling

Jigx stores files as local files on the device and returns the file's URI as the default value. When saving these files to a datasource, you must convert files from the local-uri to base64, data-uri, or buffer. The opposite is true when handling the files returned from the datasource; you must convert them from their saved state (base64, data-uri, or buffer) to a local-uri.

Type of files:

• Images

• Documents

Image files can be used in the following functionality:

Data	Conversion configuration	Result
REST Provider calls with files	Add the conversion to the REST function	GET - incoming SAVE - outgoing CREATE - outgoing UPDATE - outgoing
SQL Provider calls with files	Add the conversion to the REST function	GET - incoming SAVE - outgoing CREATE - outgoing UPDATE - outgoing
Datasource queries with files	Add the conversion to the datasource when using Dynamic Data.	Incoming
Actions with files	Add the conversion to the action when saving images and files.	outgoing

The conversions property allows you to configure the file conversion to the required format.

Core structure

conversions:

This holds an array of properties that should be converted. The following properties control the conversion: property: The name of the property to convert. from: Format of the input data. It can be buffer, base64, data-uri, or local-uri. to: Format of the converted data. It can be base64, data-uri, buffer, or local-uri. convertHeicToJpg: When set to true, and the file being converted is HEIC, it is converted to JPG. Conversions can be set up as a static array of definitions or dynamically as an array returned by an expression. To set up dynamic conversions, use the expression conversions: [email protected], applicable to both local and global actions.

Referencing files in a jig - You can access the file using the state of the components and properties in a jig, such as media-field or avatar-field. When referencing files in jigs use the .state.value configuration. For example:

• file: [email protected]

• image: [email protected]

Considerations

• Conversions should be configured within the SQL and REST functions. When the conversion is configured in the function, it stores the data as the 'from' type in the datasource.

• When conversions are done at the datasource level, they are still stored in the datasource as their original value. They are only converted after the fact when requested; however, the datasource value does not change.

• Do not load data back from buffer using the Dynamic Data provider; the file will not show.

• When saving images to Dynamic Data consider the file size. You can reduce the file size in the media-field by configuring the imageQuality property.

• Use convertHeicToJpg to ensure images are visible on iOS and Android devices. The property is available for REST and SQL functions, Dynamic Data and actions.

Jigx does not recommend storing images in Dynamic Data (via any conversion), as the max file size per record is 350K.

Examples and code snippets

Convert incoming data

REST & SQL function

In the examples below, the file conversions are configured in the REST and SQL (GET) functions to convert the incoming files.

rest-function-in

provider: DATA_PROVIDER_REST
method: GET
# pdf indicates a generic binary type
format: pdf 
url: https://graph.microsoft.com/v1.0/me/photo/$value
# Add the email input to the output to identify image later in select
useLocalCall: true
outputTransform: $.{"data":$.data,"userId":$.inputs.userId.value} 
parameters:
  accessToken:
    location: header
    required: true
    type: string
    # Use manage.jigx.com to define credentials for your solution.
    value: oauth.microsoft 
  userId:
    type: string
    location: path
    required: true
conversions:
  - property: data
    from: base64
    to: local-uri

sql-function-in

Convert outgoing data

REST & SQL function

In the examples below, the file conversions are configured in the REST and SQL (SAVE/CREATE/UPDATE) functions to convert the files that are outgoing to REST and SQL.

rest-function-out

provider: DATA_PROVIDER_REST
method: PATCH
url: https://graph.microsoft.com/v1.0/me/photo/$value
useLocalCall: true
parameters:
  accessToken:
    location: header
    required: true
    type: string
    # Use manage.jigx.com to define credentials for your solution.
    value: oauth.microsoft 
  Content-Type:
    location: header
    required: true
    type: string
    # set the content type of the body.
    value: image/jpeg 
  file:
    location: body
    required: true
    type: image
conversions:
  - property: file
    from: local-uri
    to: buffer

sql-function-out

Datasource conversion

In this example, the Dynamic Data image file conversion is configured in the datasource to convert the files to be used in the solution.

datasource-conversion

type: datasource.sqlite
options:
  provider: DATA_PROVIDER_DYNAMIC
  entities:
    - default/category
  query: |
    SELECT id, '$.name', '$.description', '$.image'
    FROM [default/category]
    ORDER BY [name]
  conversions:
    - property: image
      from: base64
      to: local-uri

Action image conversion

File conversions in actions can be configured with Dynamic Data, SQL, and REST providers. They can be set up as a static array of definitions or dynamically as an array returned by an expression. To set up dynamic conversions, use the expression conversions: [email protected], applicable to both local and global actions.

execute-entity-action (static)

- type: action.execute-entity
    options:
      title: Save
      provider: DATA_PROVIDER_DYNAMIC
      entity: default/category
      method: save
      data:
        id: [email protected]
        name: [email protected]
        description: [email protected]
        # reference the image using an expression.
        image: [email protected]
      # Static conversion configuration.
      conversions:
        - property: image
          from: local-uri
          to: base64

execute-entity-action (dynamic)

datasource

Add multiple files with SQL data provider

This example uses the text-field with mediaType: image and isMultiple: true to add multiple images to SQL. The conversion of the files is done in the SQL function.

sql-add-widget-multiple-function.jigx

# Add under function folder
provider: DATA_PROVIDER_SQL
method: execute
connection: SportConnect
procedure: AddMultipleAvatar
parameters:
  avatarbuffer:
    encoding: binary
    location: input
    required: true
    type: file
  description:
    location: input
    required: true
    type: string

conversions:
  - from: local-uri
    property: avatar
    to: buffer

sql-get-widget-multiple-jigx

add-widget-mutiple-sql.jigx

Convert HEIC to JPEG

In this example, the file conversion is configured in the REST function to convert the files that are outgoing via REST. convertHeicToJpg is configured to true to convert HEIC images to JPEG which ensures images are visible on iOS and Android devices. The property is available REST and SQL functions, Dynamic Data and actions.

provider: DATA_PROVIDER_REST
method: PATCH
url: https://graph.microsoft.com/v1.0/me/photo/$value
useLocalCall: true
parameters:
  accessToken:
    location: header
    required: true
    type: string
    # Use manage.jigx.com to define credentials for your solution.
    value: oauth.microsoft 
  Content-Type:
    location: header
    required: true
    type: string
    # set the content type of the body.
    value: image/jpeg 
  file:
    location: body
    required: true
    type: image
conversions:
  - property: file
    from: local-uri
    to: buffer
    convertHeicToJpg: true

See Also

• Example converting local-uri to buffer in SQL function