File Upload

The file Upload component can be used to Upload multiple files and even can set limit to upload files.

Schema

[
    {
        "name": "upload aadhar",
        "meta": {
            "displayType": "file",
            "displayName": "Upload aadhar",
            "description": "upload front and back of the card",
            "validation": {
                "required": true,
                "requiredDetail": {
                    "errorMsg": "Aadhar is a required field"
                }
            },
            "htmlProps": {
              "multiple": true,
              "accept": ".jpg,.png",
               "maxSize": 50 * 1048576, // 50MB
              "maxFiles": 2,
              "preview": true
          },
          "readOnly": false,
        }
    }
]

Example

Form Data:

{}

Field properties

Name	Description	Type
`multiple`	A boolean indicating whether multiple files can be selected.	boolean
`accept`	A Comma separated string defining the file types that the input should accept.	string
`maxSize`	The maximum size of the files to be accepted (in bytes).	number
`maxFiles`	The maximum number of files that can be selected.	number
`preview`	A boolean indicating whether a preview of the selected files should be displayed.	boolean
`displayType`	The type of control, which defines how the input is presented (e.g., "file").	string
`displayName`	The display name of the control, shown as a label or header.	string
`placeholder`	The placeholder text for the input field, guiding the user on what to enter.	string
`readOnly`	A readonly field is not editable and value cannot be changed	boolean
`required`	A boolean indicating if the control is required.	boolean

Sample 1: Single File Upload with All File Types Accepted

{
  "name": "single-file-upload",
  "form": {
    "displayName": "Upload File",
    "displayType": "file",
    "placeholder": "Choose a file",
    "description": "Upload a single file of any type.",
    "validation": {
      "required": true
    },
    "htmlProps": {
      "multiple": false,
    "accept": "*",
    "maxSize": 50 * 1048576, // 50MB
    "maxFiles": 1,
    "preview": false
    },
    "className": "file-upload-control"
  }
}

Sample 2: Multiple Image Upload with Preview

{
  "name": "multiple-image-upload",
  "form": {
    "displayName": "Upload Images",
    "displayType": "file",
    "placeholder": "Choose images",
    "description": "Upload up to 5 images. Each image should not exceed 10MB.",
    "validation": {
      "required": true
    },
    "htmlProps": {
      "multiple": true,
      "accept": "image/*",
      "maxSize": 10 * 1048576, // 10MB
      "maxFiles": 5,
      "preview": true,
    },
    "className": "image-upload-control"
  }
}

Sample 3: Document Upload with Specific File Types

{
  "name": "document-upload",
  "form": {
    "displayName": "Upload Documents",
    "displayType": "file",
    "placeholder": "Choose documents",
    "description": "Upload PDF, Word, or Excel documents. Maximum 5 files, each up to 20MB.",
    "validation": {
      "required": true
    },
    "htmlProps": {
        "multiple": true,
        "accept": ".pdf,.doc,.docx,.xls,.xlsx",
        "maxSize": 20 * 1048576, // 20MB
        "maxFiles": 5,
        "preview": false,
      },
    "className": "document-upload-control"
  }
}

Sample 4: Video Upload with Preview Disabled

{
  "name": "video-upload",
  "form": {
    "displayName": "Upload Video",
    "displayType": "file",
    "placeholder": "Choose a video",
    "description": "Upload a single video file. Maximum size is 100MB.",
    "validation": {
      "required": true
    },
    "htmlProps": {"multiple": false,
    "accept": "video/*",
    "maxSize": 100 * 1048576, // 100MB
    "maxFiles": 1,
    "preview": false,},
    "className": "video-upload-control"
  }
}

Sample 5: Audio Upload with Multiple Files Allowed

{
  "name": "audio-upload",
  "meta": {
    "displayName": "Upload Audio",
    "displayType": "file",
    "placeholder": "Choose audio files",
    "description": "Upload up to 10 audio files. Each file should not exceed 5MB.",
    "validation": {
      "required": false
    },
    "htmlProps": {"multiple": true,
    "accept": "audio/*",
    "maxSize": 5 * 1048576, // 5MB
    "maxFiles": 10,
    "preview": false,},
    "className": "audio-upload-control"
  }
}

Field Properties - Validation Details

The validation settings within the Textarea component are crucial for ensuring that user input meets specific requirements. Here’s a breakdown of the available validation properties:

Property	Description
`required`	Boolean value that specifies whether entering data into the field is mandatory.
`minLength`	Specifies the minimum number of characters allowed in the input.
`maxLength`	Specifies the maximum number of characters allowed in the input.
`min`	Specifies the minimum value allowed for number inputs, with support for dynamic values.
`max`	Specifies the maximum value allowed for number inputs, also supporting dynamic conditions.
`pattern`	A regex pattern that the input must match to be considered valid.
`validate`	A function for custom validation logic, which can return a boolean or an error message.
`requiredDetail`	Contains info msgs about the required validation property

Schema​

Example​

Field properties​

Sample 1: Single File Upload with All File Types Accepted​

Sample 2: Multiple Image Upload with Preview​

Sample 3: Document Upload with Specific File Types​

Sample 4: Video Upload with Preview Disabled​

Sample 5: Audio Upload with Multiple Files Allowed​

Field Properties - Validation Details​