File

The file input type is used for uploading and managing files. It supports both single file and multiple file uploads with preview capabilities, download functionality, and file deletion.

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'file'
• label (string): Display label for the field

Optional Properties

• multiple (boolean): Whether to allow multiple file selection (default: false)
• placeholder (string): Placeholder text for the upload area
• colSpan (number): Number of columns for grid layout
• disabled (boolean): Whether the field is disabled
• layout (string): Layout type (default, horizontal)
• rules (array): Validation rules for the field

Examples

Single File Upload

{
  name: 'profileImage',
  type: 'file',
  label: 'Profile Image',
  placeholder: 'Upload your profile image',
  rules: ['required']
}

Profile Image*

Multiple File Upload

{
  name: 'gallery',
  type: 'file',
  label: 'Photo Gallery',
  placeholder: 'Upload multiple photos',
  multiple: true,
  rules: ['required']
}

Photo Gallery*

File Upload with Type Validation

{
  name: 'document',
  type: 'file',
  label: 'Upload Document',
  placeholder: 'Upload PDF or Word document',
  rules: [
    'required',
    {
      type: 'custom',
      function: '(value) => {
        if (!value) return true;
        const allowedTypes = ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
        const file = document.querySelector("input[type=file]")?.files?.[0];
        return file ? allowedTypes.includes(file.type) : true;
      }',
      message: 'Please upload a PDF or Word document'
    }
  ]
}

Upload Document*

File Upload with Size Validation

{
  name: 'largeFile',
  type: 'file',
  label: 'Upload Large File',
  placeholder: 'Upload file (max 10MB)',
  rules: [
    'required',
    {
      type: 'custom',
      function: '(value) => {
        if (!value) return true;
        const file = document.querySelector("input[type=file]")?.files?.[0];
        return file ? file.size <= 10 * 1024 * 1024 : true;
      }',
      message: 'File size must be less than 10MB'
    }
  ]
}

Upload Large File*

Complex Form with File Uploads

const schema = [
  {
    name: 'firstName',
    type: 'text',
    label: 'First Name',
    placeholder: 'Enter your first name',
    rules: ['required'],
  },
  {
    name: 'lastName',
    type: 'text',
    label: 'Last Name',
    placeholder: 'Enter your last name',
    rules: ['required'],
  },
  {
    name: 'email',
    type: 'text',
    label: 'Email',
    placeholder: 'Enter your email',
    rules: ['required', 'email'],
  },
  {
    name: 'profileImage',
    type: 'file',
    label: 'Profile Image',
    placeholder: 'Upload your profile image',
    rules: ['required'],
  },
  {
    name: 'documents',
    type: 'file',
    label: 'Supporting Documents',
    placeholder: 'Upload supporting documents',
    multiple: true,
    rules: [],
  },
  {
    name: 'portfolio',
    type: 'file',
    label: 'Portfolio Images',
    placeholder: 'Upload portfolio images',
    multiple: true,
    rules: [],
  },
];

First Name*

Last Name*

Email*

Profile Image*

Supporting Documents

Portfolio Images

File Upload with Specific File Types

const schema = [
  {
    name: 'imageUpload',
    type: 'file',
    label: 'Image Upload',
    placeholder: 'Upload image files only',
    rules: [
      'required',
      {
        type: 'custom',
        function: '(value) => {
          if (!value) return true;
          const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
          const file = document.querySelector("input[type=file]")?.files?.[0];
          return file ? allowedTypes.includes(file.type) : true;
        }',
        message: 'Please upload an image file (JPEG, PNG, GIF, WebP)'
      }
    ]
  },
  {
    name: 'videoUpload',
    type: 'file',
    label: 'Video Upload',
    placeholder: 'Upload video files only',
    rules: [
      {
        type: 'custom',
        function: '(value) => {
          if (!value) return true;
          const allowedTypes = ["video/mp4", "video/avi", "video/mov", "video/wmv"];
          const file = document.querySelector("input[type=file]")?.files?.[0];
          return file ? allowedTypes.includes(file.type) : true;
        }',
        message: 'Please upload a video file (MP4, AVI, MOV, WMV)'
      }
    ]
  }
];

Image Upload*

Video Upload

Validation Rules

Common File Validation Patterns

// Required file upload
{
  type: 'required',
  message: 'Please upload a file'
}

// File type validation
{
  type: 'custom',
  function: '(value) => {
    if (!value) return true;
    const allowedTypes = ["image/jpeg", "image/png", "image/gif"];
    const file = document.querySelector("input[type=file]")?.files?.[0];
    return file ? allowedTypes.includes(file.type) : true;
  }',
  message: 'Please upload an image file (JPEG, PNG, GIF)'
}

// File size validation (5MB limit)
{
  type: 'custom',
  function: '(value) => {
    if (!value) return true;
    const file = document.querySelector("input[type=file]")?.files?.[0];
    return file ? file.size <= 5 * 1024 * 1024 : true;
  }',
  message: 'File size must be less than 5MB'
}

// Multiple file count validation
{
  type: 'custom',
  function: '(value) => {
    if (!value) return true;
    const files = document.querySelector("input[type=file]")?.files;
    return files ? files.length <= 5 : true;
  }',
  message: 'Please upload no more than 5 files'
}

// File extension validation
{
  type: 'custom',
  function: '(value) => {
    if (!value) return true;
    const file = document.querySelector("input[type=file]")?.files?.[0];
    if (!file) return true;
    const allowedExtensions = [".pdf", ".doc", ".docx"];
    const fileExtension = "." + file.name.split(".").pop().toLowerCase();
    return allowedExtensions.includes(fileExtension);
  }',
  message: 'Please upload a PDF or Word document'
}

// Conditional file validation
{
  type: 'custom',
  function: '(value, formValues) => {
    if (formValues.accountType === "business") {
      return value && value.length > 0;
    }
    return true;
  }',
  message: 'Business accounts must upload a company document'
}

Best Practices

1. Use clear, descriptive labels for file upload fields
2. Specify file type restrictions to prevent invalid uploads
3. Set appropriate file size limits to prevent server overload
4. Provide helpful placeholder text explaining what files are expected
5. Use multiple file upload for galleries, portfolios, and document collections
6. Implement proper validation for file types, sizes, and counts
7. Show file previews for better user experience
8. Provide download and delete functionality for uploaded files
9. Use consistent styling across your application
10. Consider accessibility with proper labels and keyboard navigation
11. Test with different file types and sizes
12. Provide clear error messages for validation failures
13. Handle upload progress for large files
14. Implement file compression for images when appropriate
15. Use secure file handling to prevent malicious uploads