Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/uploadcare/file-uploader/llms.txt

Use this file to discover all available pages before exploring further.

The ConfigType interface defines all available configuration options for the Uploadcare File Uploader. Configuration can be set via HTML attributes on the uc-config element or programmatically through JavaScript.

Overview

The File Uploader accepts over 70 configuration options organized into categories:
  • Upload settings - Basic upload behavior (pubkey, multiple, confirmUpload)
  • File validation - File type and size restrictions
  • Upload sources - Available upload methods
  • Camera settings - Camera and video recording options
  • Storage & CDN - CDN and storage configuration
  • UI settings - Interface customization
  • Security - Secure uploads and delivery
  • Localization - Language and translations

Type Definition

export type ConfigType = {
  // Core settings
  pubkey: string;
  multiple: boolean;
  multipleMin: number;
  multipleMax: number;
  confirmUpload: boolean;
  
  // File validation
  imgOnly: boolean;
  accept: string;
  maxLocalFileSizeBytes: number;
  
  // Upload sources
  sourceList: string;
  
  // Camera settings
  cameraMirror: boolean;
  cameraCapture: 'user' | 'environment' | '';
  cameraModes: string;
  
  // Storage
  store: boolean | 'auto';
  cdnCname: string;
  
  // UI
  thumbSize: number;
  showEmptyList: boolean;
  filesViewMode: FilesViewMode;
  
  // Security
  secureSignature: string;
  secureExpire: string;
  
  // Localization
  localeName: string;
  
  // Complex types
  metadata: Metadata | MetadataCallback | null;
  fileValidators: FileValidators;
  collectionValidators: CollectionValidators;
  
  // ... and many more options
};

Plain vs Complex Configuration

Configuration options are divided into two categories:

Plain Configuration

Simple values that can be set via HTML attributes:
<uc-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
  multiple="true"
  max-local-file-size-bytes="10485760"
  source-list="local, url, camera"
></uc-config>

Complex Configuration

Objects, functions, or arrays that must be set via JavaScript:
const config = document.querySelector('uc-config[ctx-name="my-uploader"]');

config.metadata = {
  subsystem: 'uploader',
  userId: '12345'
};

config.fileValidators = [
  {
    name: 'file-size',
    fn: (file) => file.size < 10485760,
    message: 'File is too large'
  }
];

Key Types

FilesViewMode

type FilesViewMode = 'list' | 'grid';

MetadataCallback

type MetadataCallback = (fileEntry: OutputFileEntry) => Promise<Metadata> | Metadata;

FileValidators

type FileValidators = FileValidator[];

Usage Example

import type { ConfigType } from '@uploadcare/file-uploader';

// Access configuration programmatically
const config = document.querySelector<ConfigType>('uc-config[ctx-name="my-uploader"]');

// Update configuration
config.multiple = true;
config.maxLocalFileSizeBytes = 10485760;
config.sourceList = 'local, url, camera';

See Also