Function: fileUpload()

function fileUpload(props: UiUploadFileProps): Element;

Defined in: src/UI/blocks/fileUpload.tsx:129

File upload component for handling file uploads with validation and limits.

Parameters

Parameter	Type	Description
props	UiUploadFileProps	Configuration object

Returns

Element

Examples

• The component exposes two states: validFiles and droppedFiles. Every array element is the same object type.

  export interface DroppedMwFile {
   name: string;
   type: string;
   isValid?: boolean;
   message?: string;
   processedFile?: any;
   webUrl?: string;
   fileId: string;
   arrayBuffer?: ArrayBuffer;
  }

• If file needs to be validated by file size, use maxFileSize prop.

maxFileSize: {
  size: 5 * 1024 * 1024, // 5MB
  message: 'File size must be less than 5MB',
}

• If file needs to be validated by file type, use allowedTypes prop. You can specify MIME types (e.g. 'application/pdf') or file extensions (e.g., '.pdf', '.jpg').

allowedTypes: {
  types: ['application/pdf', '.xlsx', '.docx'],
  message: 'File type must be an image, PDF, Excel, or Word document',
}

• The validate function's type definition is as follows:

validate: (file: DroppedMwFile) => Promise<{
  isValid: boolean;
  message: string;
  processedFile?: any;
}>;;

• The validate function is optional. If not provided, all files will be considered valid.
• The validate function is called when the user drops a file into the upload area or selects a file from the file system.

Basic usage with required props

fileUpload({
  name: 'upload-file',
  fileUploadTitle: 'Upload Files',
});

Usage with required and optional props

fileUpload({
  name: 'upload-file',
  fileUploadTitle: 'Upload Files',
  text: 'Please select file to upload.',
  error: 'You can upload up to 3 files only.',
  maxFileLimit: 3,
  minFileLimit: 1,
});

Usage with file validate function (Node.js libraries supported)

import {Workbook} from 'exceljs';

fileUpload({
  name: 'upload-file',
  fileUploadTitle: 'Upload Excel Files',
  validate: async (file) => {
    // file.arrayBuffer is automatically fetched and available
    const wb = new Workbook();
    await wb.xlsx.load(file.arrayBuffer);

    // Perform validation
    if (wb.worksheets.length === 0) {
      return {
        isValid: false,
        message: 'Excel file must contain at least one worksheet'
      };
    }

    return {isValid: true, message: ''};
  }
});

Usage with file size and type validation (MIME types and extensions)

fileUpload({
  name: 'upload-file',
  fileUploadTitle: 'Upload Files',
  maxFileSize: {
    size: 5 * 1024 * 1024, // 5MB
    message: 'File size must be less than 5MB',
  },
  allowedTypes: {
    types: ['application/pdf', '.xlsx', '.docx'],
    message: 'File type must be a PDF, Excel, or Word document',
  },
});