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
﻿
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
provider: DATA_PROVIDER_REST
method: POST #Creates data in the backend
url: https://jigx-training.azurewebsites.net/api/images #Use your REST service URL
useLocalCall: true #Direct the function call to use local execution between the mobile device and the REST service 
  
parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: service.oauth #Use manage.jigx.com to define credentials for your solution

  custId:
    type: string
    location: body
    required: false
  createdBy:
    type: string
    location: body
    required: false
  description:
    type: string
    location: body
    required: false
  createdDate:
     type: string
     location: body
     required: false
     value: =$now()
  image:
    type: image
    location: body
    required: false
#Define the image metadata that must be created in the record in the REST API    
inputTransform: |
  {
    "custId": custId,
    "createdBy": createdBy,
    "description": description,
    "createdDate": createdDate,
    "image": image
  }
#Specifiying an outputTransform for the image_id ensure that the id created by the REST API is automatically synced back to the Jigx local datasource replacing the temp_id.    
outputTransform: |
  $.{
      "id": image_id
    }
#Convert the images to be uploaded to the REST service to base64 which the REST service expects to be able to store the image  
conversions:
  - property: image
    from: local-uri
    to: base64
provider: DATA_PROVIDER_REST
method: POST #Creates data in the backend
url: https://jigx-training.azurewebsites.net/api/images #Use your REST service URL
useLocalCall: true #Direct the function call to use local execution between the mobile device and the REST service 
  
parameters:
  accessToken:
    location: header
    required: true
    type: string
    value: service.oauth #Use manage.jigx.com to define credentials for your solution

  custId:
    type: string
    location: body
    required: false
  createdBy:
    type: string
    location: body
    required: false
  description:
    type: string
    location: body
    required: false
  createdDate:
     type: string
     location: body
     required: false
     value: =$now()
  image:
    type: image
    location: body
    required: false
#Define the image metadata that must be created in the record in the REST API    
inputTransform: |
  {
    "custId": custId,
    "createdBy": createdBy,
    "description": description,
    "createdDate": createdDate,
    "image": image
  }
#Specifiying an outputTransform for the image_id ensure that the id created by the REST API is automatically synced back to the Jigx local datasource replacing the temp_id.    
outputTransform: |
  $.{
      "id": image_id
    }
#Convert the images to be uploaded to the REST service to base64 which the REST service expects to be able to store the image  
conversions:
  - property: image
    from: local-uri
    to: base64
﻿
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
# The sync-entities action is used to get the data from the REST data provider using the function.
# The global action can be referenced throughout the solution for effieicency and performance.
# The data is synced from the REST data provider to a local data provider on the device.
action: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_REST
    entities:
      - entity: customers
        function: rest-get-customers
      - entity: us-states
        function: rest-get-usStates  
        
# The sync-entities action is used to get the data from the REST data provider using the function.
# The global action can be referenced throughout the solution for effieicency and performance.
# The data is synced from the REST data provider to a local data provider on the device.
action: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_REST
    entities:
      - entity: customers
        function: rest-get-customers
      - entity: us-states
        function: rest-get-usStates  
        
﻿
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
title: Upload images
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://www.dropbox.com/scl/fi/o1gobv6lj1l3076veyaff/cloud-7906280_1280.png?rlkey=c5ad2oknpw5fju9qjlb1c2d2o&raw=1
#Set the onFocus to clear all data from the jig and reset it for the next uplaod
onFocus: 
  type: action.reset-state
  options:
    state: [email protected]
    
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Customer
            value: [email protected]
  - type: component.form
    instanceId: newImage
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: description
          options:
            label: Add the product name
        - type: component.media-field
          instanceId: image
          options:
            label: image
            mediaType: image
            isMultiple: true
            maximumFileSize: =20 * 1024 * 1024

actions:
  - children:
      - type: action.execute-entities #Action to upload the images
        options:
          title: Upload images
          provider: DATA_PROVIDER_REST
          entity: customer-images
          method: create #Create the image record in the local SQLite table 
          goBack: previous
          function: rest-upload-customer-images #Create the image record in the REST service
          #Data configuration points to the collection of images with their metadata in the media-picker ensuring that the call to POST & create is executed multiple times for each image
            [email protected].
            {
              "custId": @ctx.jig.inputs.customer.id,
              "createdBy": @ctx.user.email,
              "description": @ctx.jig.components.description.state.value,
              "createdDate": $now(),
              "image": $ 
            }
title: Upload images
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://www.dropbox.com/scl/fi/o1gobv6lj1l3076veyaff/cloud-7906280_1280.png?rlkey=c5ad2oknpw5fju9qjlb1c2d2o&raw=1
#Set the onFocus to clear all data from the jig and reset it for the next uplaod
onFocus: 
  type: action.reset-state
  options:
    state: =@ctx.jig.components.newImage.state.data
    
children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Customer
            value: =@ctx.jig.inputs.customer.companyName
  - type: component.form
    instanceId: newImage
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: description
          options:
            label: Add the product name
        - type: component.media-field
          instanceId: image
          options:
            label: image
            mediaType: image
            isMultiple: true
            maximumFileSize: =20 * 1024 * 1024

actions:
  - children:
      - type: action.execute-entities #Action to upload the images
        options:
          title: Upload images
          provider: DATA_PROVIDER_REST
          entity: customer-images
          method: create #Create the image record in the local SQLite table 
          goBack: previous
          function: rest-upload-customer-images #Create the image record in the REST service
          #Data configuration points to the collection of images with their metadata in the media-picker ensuring that the call to POST & create is executed multiple times for each image
            =@ctx.components.image.state.value.
            {
              "custId": @ctx.jig.inputs.customer.id,
              "createdBy": @ctx.user.email,
              "description": @ctx.jig.components.description.state.value,
              "createdDate": $now(),
              "image": $ 
            }
﻿
 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
name: hello-rest-example
title: Hello REST Solution
category: sales
# onFocus is triggered whenever the jig is displayed. The sync-entities action in the global action calls the Jigx REST function and populates the local SQLite tables on the device with the data returned from REST service
onFocus: 
  type: action.execute-action
  options:
    action: load-data
# onLoad is triggered when the solution is loaded on the device. The sync-entities action in the global action calls the Jigx REST function and populates the local SQLite tables on the device with the data returned from REST service        
onLoad: 
  type: action.execute-action
  options:
    action: load-data
    
widgets:
  - size: 1x1 
    jigId: list-customers
name: hello-rest-example
title: Hello REST Solution
category: sales
# onFocus is triggered whenever the jig is displayed. The sync-entities action in the global action calls the Jigx REST function and populates the local SQLite tables on the device with the data returned from REST service
onFocus: 
  type: action.execute-action
  options:
    action: load-data
# onLoad is triggered when the solution is loaded on the device. The sync-entities action in the global action calls the Jigx REST function and populates the local SQLite tables on the device with the data returned from REST service        
onLoad: 
  type: action.execute-action
  options:
    action: load-data
    
widgets:
  - size: 1x1 
    jigId: list-customers
﻿
﻿
REST	Detail
URL	https://[your_rest_service]/api/images
Operation/Method	POST
Updated 06 Jun 2024
Did this page help you?
List product images (GET)
Update multiple records in a single REST call