media-field

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 can only be used in jig default docid\ rtomyji3uoxiqxdultz3o inside a form docid\ digx9ijgzlsa22yfyeszy component the media field requires a data source to store the files, you can configure one of the data providers docid\ bpvjnsbhaqeahebc4od1o for this file handling docid\ ugaq4ae3icfrecrwfif01 allow you to determine the format the files are stored in and returned in {{jigx}} does not recommend storing images in {{dynamicdata}} (via any conversion), as the max file size per record is 350k configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their 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 extension 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 using the reset state action with initialvalues does not clear the media field, it resets the field back to it's initialvalue 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 actions action open media picker configure the open media picker docid\ efq 9bey6cdflsrtpdxaj action that either immediately opens the device camera, allowing you to tap the action button on the screen to take an image or video, or allow you to select media files and output selected paths 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 android 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 file handling docid\ ugaq4ae3icfrecrwfif01 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 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 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 500 height 450 isfreestylecropenabled true actions \ 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 provider entity products method create data image =@ctx components media field state value createdby =@ctx user displayname createdate =$now() onsuccess type action go back 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%3d datasources 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 false children \ type component media field instanceid scenery options \# set media field to allow multiple image uploads ismultiple true label capture your hike mediatype image actions \ children \ type action execute entity options title save photos provider data provider dynamic entity default/hike method create data scenery =@ctx components scenery state value onsuccess type action go back 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 video jigx title media field 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 1485846234645 a62644f84728?q=80\&w=2659\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d children \ 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 true actions \ 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 provider entity products method create data image =@ctx components media video state value createdby =@ctx user displayname createdate =$now() onsuccess type action go back 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 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%3d children \ 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 true actions \ 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 provider entity products method create data image =@ctx components media mixed state value state value createdby =@ctx user displayname createdate =$now() onsuccess type action go back 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%3d children \ 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 500 height 450 isfreestylecropenabled true ismultiple true actions \ 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 submit claim provider data provider local entity products method create data image =@ctx components media field state value createdby =@ctx user displayname createdate =$now() onsuccess type action go back upload images using rest in this example the rest apis post operator is used to store images a {{jigx}} 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) docid\ qp0owmjuygmgyenn9826j topic to understand how to upload files using the rest data provider upload images using rest add customer 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 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 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" $ } onsuccess type action go back rest upload images jigx provider data provider rest \# creates data in the backend method post \# use your rest service url url https //jigx training azurewebsites net/api/images \# direct the function call to use local execution, \# between the mobile device and the rest service uselocalcall true parameters accesstoken location header required true type string \# use manage jigx com to define credentials for your solution value service oauth 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 \# ensure images from ios with a heic binary are viewable on android, \# by converting the the image to jpg convertheictojpg true use intialvalue to show multiple images using rest this example shows how multiple images can be loaded in the media field using the intialvalue property take note of the following configuration the initialvalue uses a datasource to return all the existing images a local datasource ensures the images from the rest enpoint are stored locally on the device, for offline and performance reasons the local datasource has a queryparameter restricting the images returned to be for the specific customer to store images in the correct format a conversion is set on the rest post function, converting the file from local uri to base64 added to this the convertheictojpg property is set to true , which allows the image to be viewable on ios and android the media field requires images to be in local uri format, a conversion is set in the rest get function, converting the file from base64 to local uri when clicking on the media field to add additional images the intial images are loaded in the field depending on the function used, for example post, if the images are not cleared or removed using the trash icon, the initial images will be uploaded as new images, creating duplicates using a patch or put function could avoid duplicates add customer 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 \#use a local datasource to return images & details,from the rest api datasources all products type datasource sqlite options provider data provider local entities \ entity customer images query | select cim id as id, json extract(cim data, '$ createddate') as createddate, json extract(cim data, '$ custid') as custid, json extract(cim data, '$ createdby') as createdby, json extract(cim data, '$ description') as description, json extract(cim data, '$ image') as image from \[customer images] as cim where json extract(cim data, '$ custid') = @custid order by json extract(cim data, '$ createddate') desc \# just return the images for the specific customer queryparameters custid =@ctx jig inputs customer id 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 \# all images for the specificed customer will load when the jig opens \# add new images via the media field initialvalue =@ctx datasources all products image label image mediatype image ismultiple true maximumfilesize =20 1024 1024 actions \ children \ type action execute entities options title upload images provider data provider rest entity customer images method create function rest upload customer images data | \=@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" $ } onsuccess type action go back rest get images jigx (function) provider data provider rest method get url https //jigx training azurewebsites net/api/images?custid={custid}\&includeimage=true uselocalcall true forrowswithvalues custid custid parameters accesstoken location header required true type string \# use manage jigx com to define credentials for your solution value service oauth custid type string location query required true outputtransform | $ images { "id" id, "custid" $$ inputs custid, "createddate" createddate, "createdby" createdby, "description" description, "image" image }\[] \#convert the images returned from the rest service to local uri, \# which the jig expects to be able to display the image conversions \ property image from base64 to local uri rest upload images jigx (function) provider data provider rest \# creates data in the backend method post \# use your rest service url url https //jigx training azurewebsites net/api/images \# direct the function call to use local execution, \# between the mobile device and the rest service uselocalcall true parameters accesstoken location header required true type string \# use manage jigx com to define credentials for your solution value service oauth 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 \# ensure images from ios with a heic binary are viewable on android, \# by converting the the image to jpg convertheictojpg true convert files to buffer in sql function {{jigx}} 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 docid\ ugaq4ae3icfrecrwfif01 for more information get sql function 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 jig conversions \ property photo from buffer to local uri update sql function provider data provider sql connection hikers azure method query query | update hikers set name = @name, contact = @contact, photo = @photo where id = @hikersid parameters hikersid type string location input required true name type string location input required true contact type string location input required true photo type file location input required true encoding binary \# add the conversion from local uri which is what the media picker uses to buffer when the image is updated in sql conversions \ property photo from local uri to buffer update hiker jigx title update details type jig default icon climbing mountain header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1682685797736 dabb341dc7de?q=80\&w=1470\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdf8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d onfocus type action sync entities options provider data provider sql entities \ entity hikers \# use the sql function containing the conversion from buffer to local uri to display the intialvalue photo in the form media field function get sql function datasources friend update type datasource sqlite options provider data provider local entities \ entity hikers query | select id, '$ name', '$ contact', '$ photo' from \[hikers] where id = @friendid queryparameters friendid =@ctx jig inputs friendid children \ type component form instanceid hike info options isdiscardchangesalertenabled false children \ type component text field instanceid id options label id initialvalue =@ctx datasources friend update id ishidden true \ type component text field instanceid name options label hiker's name initialvalue =@ctx datasources friend update name \ type component text field instanceid contact options label mobile number initialvalue =@ctx datasources friend update contact \ type component media field instanceid photo options \# control the size of the image to be stored in sql imagecropping height 64 width 64 label profile photo mediatype image initialvalue =@ctx datasources friend update photo actions \ children \ type action execute entity options title update record provider data provider sql entity hikers method functioncall \# call the function containing the conversion from local uri to buffer to update the iamge in sql function update hikers functionparameters hikersid =@ctx components id state value name =@ctx components name state value contact =@ctx components contact state value \# use the state value to upload the image photo =@ctx components photo state value onsuccess type action go back get hiker list jigx title my hiking friends type jig list icon contact header type component jig header options height medium children type component image options resizemode cover source uri https //images unsplash com/photo 1539635278303 d4002c07eae3?q=80\&w=1470\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d onfocus type action sync entities options provider data provider sql entities \ entity hikers \# use the sql function containing the conversion from buffer to local uri to display the avatar photo in the list function get sql function onrefresh type action sync entities options provider data provider sql entities \ entity hikers function get sql function datasources friendslist type datasource sqlite options provider data provider local entities \ entity hikers query | select id, '$ name', '$ contact', '$ photo' from \[hikers] data =@ctx datasources friendslist item type component list item options title =@ctx current item name subtitle =@ctx current item contact leftelement element avatar text profile uri =@ctx current item photo swipeable left \ label update icon upload brackets color primary onpress type action go to options linkto update details parameters friendid =@ctx current item id see also upload product images (post) docid\ qp0owmjuygmgyenn9826j file handling docid\ ugaq4ae3icfrecrwfif01 state docid 0js3trstyj4kcu6vviv1y