Data Providers
...
REST
Create an app using REST APIs

Upload product images (POST)

8min

Scenario

From the view customer  On the screen, tap the Add Images button, which will direct you to a screen that allows you to upload multiple images of products for each customer.



Upload images using REST
Upload images using REST


How does this work

The REST APIs POST operator for the images table is used in a function with an inputTransform to capture the image metadata. configuring the conversion property ensures that the images are uploaded in the correct format to the REST service. Specifying the id in the ouputTransform in the function enables the local data provider temp_id to be automatically updated with the REST id once the images are created in the datastore. The media-field takes a photo or selects from existing images on the device.

This code sample builds upon the previous List customers (GET) step, to develop a complete and functional solution.

REST API

REST

Detail

URL

https://[your_rest_service]/api/images

Operation/Method

POST

Function

The REST APIs POST operator is used in a function with body parameters to specify the exact columns to be created for the image record. The inputTransform specifies the image metadata that is sent to the REST service. This transformation process ensures that the data adheres to the expected schema or format required by the REST service for processing the request. In the outputTransform the id is configured to ensure that the properties are automatically returned once the image is created and the local provider's temp_id is updated with the actual id. The customer images are stored in the REST service in base64, stores the iamges in local-uri format for display. A conversion is configured in the function to change the images from local-uri to base64.

rest-upload-customer-images.jigx


Action (global)

Create a load-data.jigx file under the actions folder. This file is configured with an action that syncs the data from the REST service, by calling the function, to the local Sqlite table. The action file is referenced in the index.jigx file to load the data when the app is opened or is in focus on the device.

The rest-get-customers-images function is NOT added to the sync-entities action due to the large number of images that will be returned. Rather the images are returned on demand in the per customer which reduces the number of images loaded on the device ensuring that the performance is not affected.

load-data.jigx


Jig (screen)

  • On the customer-composite add a go-to action to add a button that links to the add-customer-images .
  • Add parameters to the go-to action to use the customer id as inputs.
  • Use a default with the media-picker component to capture or select images.
  • Add an execute-entities action to call the rest-upload-customer-images function and use the media-field's state to configure the metadata to be uploaded for the image.
add-customer-images.jigx
view-customer-details.jigx
customer-composite.jigx
list-customers.jigx


Index

For performance and offline support the data is synced from the REST service as soon as the app is opened or recieves focus. This is achieved by calling the global action in the OnFocus and onLoad events.

index.jigx