Building Apps with Jigx
Data

File handling

11min

 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 .

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: =@ctx.datasources.conversions, applicable to both local and global actions.

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

  • file: =@ctx.components.profilePicture.state.value
  • image: =@ctx.components.image.state.value

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 provider; the file will not show.
  • When saving images to 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, and actions.

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



Examples and code snippets

Convert incoming data

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

rest-function-in
sql-function-in


Convert outgoing data

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
sql-function-out


Datasource conversion

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

datasource-conversion


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: =@ctx.datasources.conversions, applicable to both local and global actions.

execute-entity-action (static)
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
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, and actions.

YAML


See Also