website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components
form

media-field

8min

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 Preview
Media Field Preview


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.

Configuration options

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.

Examples and code snippets 

Media field example

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.

Image upload
Image upload

media-field (dynamic)
|
title: Media field
type: jig.default
      
children:
  - type: component.form
    instanceId: media-form
    options:
      children:
        - type: component.media-field
          instanceId: media-field
          options:
            mediaType: image
            label: Upload file
            maximumFileSize: none
            color:
              - when: true
                color: color1
            imageCropping:
              width: 500
              height: 450
              isFreeStyleCropEnabled: true
            isHidden: false
            isIgnored: false
            isMultiple: false
            style:
              flex: 0

actions:
  - children:
  # Media field requires an action to be uploaded. On a form you can use submit-form action
      - type: action.submit-form
        options:
          formId: media-form
          provider: DATA_PROVIDER_DYNAMIC
          title: Upload file
          entity: default/form
          method: create
          onSuccess: 
            title: Media form
            description: Your file was uploaded        


See also

  • Developer reference
  • Related examples (Github)



Updated 13 Jul 2023
Did this page help you?
PREVIOUS
avatar-field
NEXT
text-field
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Core structure
Other options
Examples and code snippets
Media field example
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service