Uploader

Overview

The VUploader component provides a user-friendly interface for uploading files. It supports drag-and-drop functionality and displays a preview of uploaded files. Location - ui-kit/src/components/VUploader/VUploader.vue

Features

• Drag and Drop: Users can drag and drop files into the upload area.
• File Preview: Displays a preview of uploaded files with the option to remove them.
• Error Handling: Provides feedback for file upload errors, such as file size limits and duplicate files.

Importing the Component

To use the VUploader component, import it as follows:

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

Component Props

The component accepts the following props:

Full Example

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

const handleFileUpdate = (files) => {
  console.log('Updated files:', files);
};

const handleFileRemove = (index) => {
  console.log('Removed file at index:', index);
};
</script>

<template>
  <VUploader @update:files="handleFileUpdate" @remove="handleFileRemove" />
</template>

Notes

• Supported file types are limited to PDF.
• The maximum file size allowed is 100MB.
• Ensure to handle the emitted events for file updates and removals appropriately.