Uploader

Overview

The VUploader component provides an accessible UI for selecting and dropping files, with validation, previews, and support for preloaded items. Location - ui-kit/src/components/VUploader/VUploader.vue

Features

Drag & drop: Users can drag and drop files into the upload area.
Previews: Optional preview list with the option to remove items.
Preloaded items: Show existing files from API together with new selections.
Validation: File size limit, max files count, and duplicate detection.
States: Disabled, loading, and error visual states.
Accessibility: Keyboard operable with proper label-input association.

Importing the Component

To use the VUploader component, import it as follows:

vue

import VUploader from 'UiKit/components/VUploader/VUploader.vue';

Component Props

The component accepts the following props:

Prop	Type	Default	Description
`isError`	`boolean`	`false`	Forces error visual state.
`isDisabled`	`boolean`	`false`	Disables interactions.
`isLoading`	`boolean`	`false`	Shows skeletons and disables interactions.
`maxFiles`	`number`	`1`	Maximum total items (preloaded + new).
`maxFileSize`	`number`	`10`	Max file size in MB.
`acceptedFileTypes`	`string`	`*`	Native `accept` attribute, e.g., `image/*,application/pdf`.
`dragDropText`	`string`	`Drag & drop files here or click to upload`	Dropzone helper text.
`uploadButtonText`	`string`	`Upload`	Button label.
`supportedFilesText`	`string`	`all types`	Text for supported types hint.
`maxSizeText`	`string`	`10MB`	Text for max size hint.
`showFilePreview`	`boolean`	`true`	Toggle preview cards.
`showSupportedFilesInfo`	`boolean`	`true`	Toggle supported files hint.
`showMaxSizeInfo`	`boolean`	`true`	Toggle max size hint.
`customClass`	`string`	`""`	Extra class on root.
`multiple`	`boolean`	`false`	Allow selecting multiple files. In single mode, the new selection replaces previous. If `maxFiles === 1`, preloaded items are cleared on select.
`preloadedItems`	`Array<{ id?: string	number; name: string; url: string; mimeType?: string; thumbnailUrl?: string; }>`	`[]`
`canUpload`	`boolean`	`true`	If `false`, hides label and upload button and disables upload interactions.
`canRemove`	`boolean`	`true`	If `false`, hides delete buttons in the preview and prevents removals.

Notes:

In multiple mode, new files append after validations. In single mode, the new selection replaces existing files; if maxFiles is 1, it also clears preloaded items.
Validations performed: size (maxFileSize), count (maxFiles across preloaded + new), duplicates (by name+size against new files and by name against preloaded).

Events

Event	Payload	When
`update:files`	`File[]`	Emitted whenever the list of newly selected files changes.
`update:items`	`PreloadedItem[]`	Emitted when preloaded items change (e.g., cleared or removed).
`remove`	`number`	Index of removed file in the `File[]` list.
`removePreloaded`	`{ index: number; id?: string	number }`
`error`	`string`	On validation error (size/count/duplicate).
`click`	`number`	When a preview item (file or preloaded) is clicked.

Full Example

vue

<script setup lang="ts">
import VUploader from 'UiKit/components/VUploader/VUploader.vue';

const preloaded = [
  { id: 101, name: 'contract.pdf', url: 'https://example.com/contract.pdf', mimeType: 'application/pdf' },
  { id: 102, name: 'logo.png', url: 'https://example.com/logo.png', mimeType: 'image/png', thumbnailUrl: 'https://example.com/logo-thumb.png' }
];

const handleFilesUpdate = (files) => {
  console.log('New files:', files);
};

const handleItemsUpdate = (items) => {
  console.log('Preloaded items now:', items);
};

const handleRemove = (index) => {
  console.log('Removed file at index:', index);
};

const handleRemovePreloaded = (payload) => {
  console.log('Removed preloaded item:', payload);
};

const handleError = (message) => {
  console.warn('Uploader error:', message);
};
</script>

<template>
  <VUploader
    multiple
    :max-files="5"
    :max-file-size="10"
    accepted-file-types="image/*,application/pdf"
    :preloaded-items="preloaded"
    supported-files-text="images and PDF"
    max-size-text="10MB"
    @update:files="handleFilesUpdate"
    @update:items="handleItemsUpdate"
    @remove="handleRemove"
    @removePreloaded="handleRemovePreloaded"
    @error="handleError"
  />
</template>

Drag & drop files here or click to upload

Supported files: images and PDF. Maximum size 10MB

Preload view:

report.pdf