Status of a file

This example demonstrates how to track the upload status of a file and retry uploads for any that fail. The _fileStatus system table, along with the expense Dynamic Data table, are used as datasources to display upload progress.

Progress is shown in a list-item using color, progress, and a status label. If a file fails to upload, swipe left and use the action.retry-queue-command to attempt the upload again.

# Use this jig to upload a file. 
title: Expense Claim
description: Expense
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://cdn.pixabay.com/photo/2016/05/04/23/02/receipts-1372960_1280.jpg

inputs:
  expenseId:
    type: string
    
onFocus:
  type: action.reset-state
  options:
    state: [email protected]
    
children:
  - type: component.form
    instanceId: expense
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.field-row
          options:
            children:
              - type: component.text-field
                instanceId: expenseitem
                options:
                  label: Expense detail
              - type: component.number-field
                instanceId: expenseamount
                options:
                  label: Amount
                  format:
                    numberStyle: currency
                    currency: USD
        - type: component.text-field
          instanceId: fileName
          options:
            label: File name      
        - type: component.media-field
          instanceId: expenseimage
          options:
            label: Expense receipt
            mediaType: any
            maximumFileSize: =500 * 1024 * 1024
            isMultiple: false

actions:
  - children:
      - type: action.action-list
        options:
          title: Submit
          isSequential: true
          actions:
            - type: action.execute-entity
              options:
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/expenses
                method: create
                data:
                  expenseitem: [email protected]
                  expenseamount: [email protected]
                file: 
                  localPath: [email protected]
                  fileName: [email protected]
            # The file upload progress is shown in a new jig, 
            # use go-to action to navigate to the jig.
            # Provide the inputs for the file.    
            - type: action.go-to
              options:
                linkTo: expense-file-upload-status
                inputs: 
                  expenseId: [email protected]
                  fileName: [email protected]

title: Expense file upload status
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://cdn.pixabay.com/photo/2021/02/04/19/58/fabric-5982467_640.jpg
# The expenseId is used as an input to see the progress on the specific file.     
inputs:  
    expenseId:
      type: string
    fileName:
      type: string 
# Configure a datasource to use the _fileStatus table,
# to evaluate the upload status and the expense table that the file is
# associated with.       
datasources:
  file-status-ds:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - _fileStatus
        - default/expenses
      query: |
        SELECT
          e.id,
          '$.expenseId',
          e.timestamp,
          json_extract(e.file, '$.localPath') as localPath,
          json_extract(e.file, '$.fileName')  as fileName,
          fs.commandId as commandId,
          fs.progress as progress,
          fs.state as uploadstatus
        FROM [_fileStatus] AS fs
        LEFT JOIN [default/expenses] AS e ON
        e.id = fs.id
        ORDER BY e.timestamp
      queryParameters:
        expenseId: [email protected]
  
children:
  - type: component.form
    instanceId: expenseitem
    options:
      isDiscardChangesAlertEnabled: false
      children:
        - type: component.text-field
          instanceId: name
          options:
            label: File name
            initialValue: [email protected]
  # Configure a list-item to show the progress of the file upload,
  # with a color and percentage.         
  - type: component.list
    options:
      data: [email protected]
      maximumItemsToRender: 20
      item: 
        type: component.list-item
        options:
          title: [email protected]
          color:
            - color: color11
              when: =(@ctx.current.item.progress >= 1)
            - color: color2
              when: =(@ctx.current.item.progress >= 75 and @ctx.current.item.progress < 100)
            - color: color1
              when: =(@ctx.current.item.progress < 75 and @ctx.current.item.progress > 30)
            - color: color8
              when: =(@ctx.current.item.progress <= 30)
          description: [email protected] & '%'
          # Add a label to display the upload status.
          label:
            title: [email protected]
          progress: >
            [email protected] != null ? (@ctx.current.item.progress / 100) :
            0
          # Configure a swipeable action,
          # to allow a retry on any files that fail. 
          swipeable:
            left:
              - color: primary
                icon: pencil-2
                label: Retry
                onPress:
                  type: action.action-list
                  options:
                    isSequential: true
                    actions:
                      - type: action.retry-queue-command
                        options:
                          id: [email protected]

PreviousDelete a file NextMicrosoft Azure SQL

Last updated 4 months ago

Was this helpful?

title: Expense file upload status type: jig.default header: type: component.jig-header options: height: small children: type: component.image options: source: uri: https://cdn.pixabay.com/photo/2021/02/04/19/58/fabric-5982467_640.jpg # The expenseId is used as an input to see the progress on the specific file. inputs: expenseId: type: string fileName: type: string # Configure a datasource to use the _fileStatus table, # to evaluate the upload status and the expense table that the file is # associated with. datasources: file-status-ds: type: datasource.sqlite options: provider: DATA_PROVIDER_LOCAL entities: - _fileStatus - default/expenses query: | SELECT e.id, '$.expenseId', e.timestamp, json_extract(e.file, '$.localPath') as localPath, json_extract(e.file, '$.fileName') as fileName, fs.commandId as commandId, fs.progress as progress, fs.state as uploadstatus FROM [_fileStatus] AS fs LEFT JOIN [default/expenses] AS e ON e.id = fs.id ORDER BY e.timestamp queryParameters: expenseId: [email protected] children: - type: component.form instanceId: expenseitem options: isDiscardChangesAlertEnabled: false children: - type: component.text-field instanceId: name options: label: File name initialValue: [email protected] # Configure a list-item to show the progress of the file upload, # with a color and percentage. - type: component.list options: data: [email protected] maximumItemsToRender: 20 item: type: component.list-item options: title: [email protected] color: - color: color11 when: =(@ctx.current.item.progress >= 1) - color: color2 when: =(@ctx.current.item.progress >= 75 and @ctx.current.item.progress < 100) - color: color1 when: =(@ctx.current.item.progress < 75 and @ctx.current.item.progress > 30) - color: color8 when: =(@ctx.current.item.progress <= 30) description: [email protected] & '%' # Add a label to display the upload status. label: title: [email protected] progress: > [email protected] != null ? (@ctx.current.item.progress / 100) : 0 # Configure a swipeable action, # to allow a retry on any files that fail. swipeable: left: - color: primary icon: pencil-2 label: Retry onPress: type: action.action-list options: isSequential: true actions: - type: action.retry-queue-command options: id: [email protected]

Good night