media-field
This component is used to upload any file. You can use files from your device or use your camera to take a picture.
media-field can only be used in jig.default inside a form component. And it is only compatible with dynamic, SQL, or OneDrive data so that the file has somewhere to be stored.
Some properties are common to all components, see Common component properties for a list and their configuration options.
Core structure | |
instanceId | Provide an Id for the component |
label | Label is displayed as placeholder if there is no value provided. Use this to provide a value such as Upload file. |
mediaType | Is automatically set with a value of image Selecting any is for files of any extention such as pdf, jpeg, txt, or docx. This property can only be used with the OneDrive data provider |
Other options | |
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. |
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). |
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. |
This component uploads any file. Clicking on the paperclip icon will bring up 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 value, 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.
