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.

<template>
    <VsInputFile v-model="fileValue" />
</template>
<script setup>
import { ref } from 'vue'
import { VsInputFile } from '@opengis/form'

const fileValue = ref(null);
</script>

File Types

File input supports different configurations for various use cases.

Basic File Upload

  {
    name: 'photo',
    type: 'File',
    label: 'Photo'
  }

<VsInputFile v-model="fileValue" />

basic file upload

Multiple File Upload

<VsInputFile v-model="fileValue" multiple />

multiple file upload

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)
• format (string): Allowed file format/extension (e.g., '.pdf', '.jpg')
• 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

interface

interface FileProps {
  multiple?: boolean;
  format?: string;
  disabled?: boolean;
}

interface FileSchemaItem {
  name: string;
  type: 'file';
  label: string;
  multiple?: boolean;
  format?: string;
  placeholder?: string;
  disabled?: boolean;
  rules?: (string | object)[];
  conditions?: Conditions | Conditions[];
}

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