This component uploads files, images, videos, or a combination of them. You can use saved files from your device or your camera to take pictures and videos.
Media Field Preview
media-field can only be used in jig.default inside a form component.
The media-field requires a data source to store the files, you can configure one of the Data Providers for this.
Conversions allow you to determine the format the files are stored in and returned in.
does not recommend storing images in (via any conversion), as the max file size per record is 350K.
Configuration options
Core structure
instanceId
Provide an id for the media-field component.
label
Label is displayed as a placeholder if there is no value provided. Use this property to provide a value that will guide the user to identify what must be uploaded, such as Upload file or Upload a video.
mediaType
By default the value is set to image. The following options are available for selection:
any is for files of any extention such as pdf, jpeg, png, mpeg, txt, or docx. Set to any allows you to take a picture, record a video, select an image or video from the library, or select a document. Using mediaType: any is recommended when uploading multiple media files as it caters for any file type.
image - used to take a picture or select from the image library.
imageAndVideo - take a picture, record a video or select an image or video from the library.
video - record a video or upload one from the library.
Other options
intialValue
The initialValue loads and displays the configured media in the media-field when the form is initially loaded. You can use this property to preset the field with default media so that you do not have to manually select it. To change the intialValue simply tap the media-field and upload a new set of media.
imageCropping
You can set any of the following with imageCropping :
isEnabled - allows you to crop an image.
height - maximum allowed is 5000px.
width- maximum allowed is 5000px.
isFreeStyleCropEnabled - when set to true it supports custom cropping to change the size or aspect ratio of an image.
imageQuality
Image quality after compression (from 0 to 100, where 100 is the best quality). On iOS, values larger than 80 don't produce a noticeable quality increase in most images, while a value of 80 will reduce the file size by about half or less compared to a value of 100. Default: 100 (Android)/ 80 (iOS).
isMultiple
Set to true allows for multiple file to be added. Set to false allows for a single file.
maximumFileSize
maximumFileSize =6 * 1024 * 1024 by default. Set the value to none if no size evaluations must be performed. File size format is in bytes. Applies to images and videos.
Considerations
To delete a media file, click on the trash icon shown on the media thumbnail at the bottom of the selection screen.
When multiple files are selected the first thumbnail displays the trash icon. Tap on the image thumbnail you want to delete, the trash icon will display, tap on the icon, the image is deleted.
An image, video, or file can be reference for upload from a data source.
When using the intialValue property to display a media file be aware that uploading media from Andriod and trying to read it in iOS and vice versus is not possible as it cannot display the image due to the local-uri path. When a media-file cannot be viewed an icon with the file's title is displayed. Use conversions to base64 to store files.
When uploading multiple files, by default only three files are displayed in the media-field. If there are more than three files for upload the third file is overlayed with a + and the number of files, e.g. +2 and the number of items displays in the top right-hand corner of the media-field.
Examples and code snippets
Upload image & use freestyle cropping
This component uploads an image using the mediaType: image property. Clicking on the paperclip icon will display a menu where you can choose to upload an existing file from your device or use the camera to take a new image. After selecting the file, or loading and cropping the image to the specified size, the file is first validated, then the upload button becomes enabled. Press the Upload file button at the bottom, which will trigger an action to create the file.
Examples:
See the full example using dynamic data in GitHub.
Image upload
media-field (dynamic)
title: Media field image upload
type: jig.default
icon: image-document-jpg
children:-type: component.form
instanceId: media-form
options:children:-type: component.media-field
instanceId: media-field
options:mediaType: image
label: Upload image
maximumFileSize: none
imageCropping:width:500height:450isFreeStyleCropEnabled:trueactions:-children:# Media field requires an action to be uploaded. # For this example we upload to the local data provider.-type: action.execute-entity
options:title: Upload file
provider: DATA_PROVIDER_LOCAL # you can use other data stores, e.g. REST data providerentity: products
method: create
goBack: previous
data:image:[email protected]-field.state.value
createdby:[email protected]createDate: =$now()
Upload multiple files
In this example we set the isMultiple property to true which allows for the selection of multiple files to be uploaded and MediaType to any which caters for images, videos and documents. The selected images display thumbnails at the bottom of the screen. Delete an image by pressing on the thumbnail until the trash icon appears then tap the icon and the image is deleted.
Upload multiple images
mulitple-files-mediafield.jigx
title: The Hiker's Diary Capturing Nature's Wonders
type: jig.default
icon: landmark-mountain
header:type: component.jig-header
options:height: medium
children:type: component.image
options:source:uri: https://images.unsplash.com/photo-1682687219640-b3f11f4b7234?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3Ddatasources:hike-photos:type: datasource.sqlite
options:provider: DATA_PROVIDER_DYNAMIC
entities:- default/hike
query: SELECT id,'$.name','$.cotact', '$.scenery' FROM [default/hike]children:-type: component.form
instanceId: hike-multiple
options:isDiscardChangesAlertEnabled:falsechildren:-type: component.media-field
instanceId: scenery
options:# Set media field to allow multiple image uploads isMultiple:truelabel: Capture your hike
mediaType: image
actions:-children:-type: action.execute-entity
options:title: Save photos
provider: DATA_PROVIDER_DYNAMIC
entity: default/hike
method: create
goBack: previous
data:scenery:[email protected]
Upload video
In this example multiple videos are uploaded, using the mediaType: video and isMultiple: true properties. Select videos from the library or record videos to be uploaded. Tap the + icon in the bottom left corner to add multiple videos. The execute-enitity action uploads the videos and the metadata configured under data to the required data source.
Example:
See the example in GitHub.
Media-field upload videos
media-field-video.jigx
title: Media field image upload
type: jig.default
icon: image-document-jpg
header:type: component.jig-header
options:height: small
children:type: component.image
options:source:uri: https://images.unsplash.com/photo-1485846234645-a62644f84728?q=80&w=2659&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3Dchildren:-type: component.form
instanceId: media-form
options:children:-type: component.text-field
instanceId: video-info
options:label: Description
-type: component.media-field
instanceId: media-video
options:mediaType: video
label: Upload your location videos
isMultiple:trueactions:-children:# Media field requires an action to be uploaded. # For this example we upload to the local data provider, -type: action.execute-entity
options:title: Upload
provider: DATA_PROVIDER_LOCAL # you can use other data stores, e.g. REST data providerentity: products
method: create
goBack: previous
data:image:[email protected]-video.state.value
createdby:[email protected]createDate: =$now()
Upload image or video
In this example multiple images and videos are uploaded, using the mediaType: imageAndVideo and isMultiple: true properties. Select images and videos from the library, take a picture or record videos to be uploaded. Tap the + icon in the bottom left corner to add multiple images and videos. The execute-enitity action uploads the videos and metadata to the required data source.
Example:
See the example in GitHub.
Media-field image and video
media-field-image-video.jigx
title: Media field image or video upload
type: jig.default
icon: image-document-jpg
header:type: component.jig-header
options:height: small
children:type: component.image
options:source:uri: https://images.unsplash.com/photo-1523805009345-7448845a9e53?q=80&w=2672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3Dchildren:-type: component.form
instanceId: media-form
options:children:-type: component.text-field
instanceId: media
options:label: Share your experience with us
-type: component.date-picker
instanceId: date-visted
options:label: Date visited
-type: component.media-field
instanceId: media-mixed
options:mediaType: imageAndVideo
label: Upload your location videos
isMultiple:trueactions:-children:# Media field requires an action to be uploaded. # For this example we upload to the local data provider, -type: action.execute-entity
options:title: Upload
provider: DATA_PROVIDER_LOCAL # you can use other data stores, e.g. REST data providerentity: products
method: create
goBack: previous
data:image:[email protected]-mixed.state.value.state.value
createdby:[email protected]createDate: =$now()
Upload any files
In this example multiple files are uploaded for a claim, using the mediaType: any and isMultiple: true properties. Select images, videos or documents from the library, take a picture or record videos related to the claim. Tap the + icon in the bottom left corner to add multiple files. The execute-entity action uploads the files and metadata to the required data source.
Example:
See the example in GitHub.
Media-field upload any file
media-field-any
title: Media field any file upload
type: jig.default
icon: image-document-jpg
header:type: component.jig-header
options:height: medium
children:type: component.image
options:source:uri: https://plus.unsplash.com/premium_photo-1661370367221-982fdba4ce89?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3Dchildren:-type: component.form
instanceId: media-form
options:children:-type: component.text-field
instanceId: video-info
options:label: Claim reference number
-type: component.media-field
instanceId: media-field
options:mediaType: any
label: Submit your claim documents
maximumFileSize: none
imageCropping:width:500height:450isFreeStyleCropEnabled:trueisMultiple:trueactions:-children:# Media field requires an action to be uploaded. # For this example we upload to the local data provider, you can use other data stores, e.g. REST data provider-type: action.execute-entity
options:title: Create Record
provider: DATA_PROVIDER_LOCAL
entity: products
method: create
goBack: previous
data:image:[email protected]-field.state.value
createdby:[email protected]createDate: =$now()
Upload images using REST
In this example the REST APIs POST operator is used to store images. A function with an inputTransform is used to capture the image metadata. Configuring the conversion property ensures that the images are uploaded in the correct format to the REST service.
See the example in Upload product images (POST) topic to understand how to upload files using the REST data provider.
Upload images using REST
add-customer-images.jigx
rest-upload-images.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 uplaodonFocus: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:falsechildren:-type: component.text-field
instanceId: description
options:label: Add the product name
-type: component.media-field
instanceId: image
options:label: image
mediaType: image
isMultiple:truemaximumFileSize: =20 * 1024 * 1024
actions:-children:-type: action.execute-entities #Action to upload the imagesoptions: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": $
}
Convert files to buffer in SQL function
stores files as local files on the device and returns the file's URI as the default value. When saving these files to a data source, 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 data source, you need to convert them from their saved state (base64, data-uri, or buffer) to a local-uri. In this example we upload a profile photo and convert from local-uri on the device to buffer for storage in SQL and then get the photo back from SQL and convert it from buffer to local-uri to display the photo as an avatar in a list. See File handling for more information.
File conversion in SQL function
get-sql-function.jigx
update-sql-function
update-hiker.jigx
get-hiker-list.jigx
provider: DATA_PROVIDER_SQL
connection: hikers.azure
method: query
query:|
SELECT
id,
name,
contact,
photo
FROM
hikers # add the conversion from buffer in SQL back to local-uri for display in the list jigconversions:-property: photo
from: buffer
to: local-uri