vue-input-components

FileUpload Component

A comprehensive file upload component for Vue 3 applications with drag-and-drop support, file validation, progress tracking, and automatic upload capabilities.

Properties

Property Type Default Description
width string ‘auto’ Width of the upload
height string ‘auto’ Height of the upload
label string ’’ Label text displayed with the upload area
labelPosition ‘top’ | ‘left’ ‘top’ Position of the label relative to the upload area
icon string ’’ Font Awesome icon name to display in the upload area
placeholder string ‘Drag & drop files here or click to select’ Placeholder text displayed when no files are selected
error string ’’ Error message to display when the upload fails
disabled boolean false Whether to disable the upload
required boolean false Whether to require the upload
multiple boolean false Whether to allow multiple files to be selected
accept string ’’ File types to accept (e.g., ‘.jpg,.png,.pdf’)
maxSize number undefined Maximum file size in MB
uploadUrl string ’’ URL to upload the files to
showUploadButton boolean true Whether to show the upload button
doUpload boolean false Whether to automatically upload files when selected. Also setting it from ‘false’ to ‘true’ will trigger the upload
iconColor string ’’ Icon color
color string ’’ Text color
bgColor string ’’ Background color
borderColor string ’’ Border color
progressColor string ’’ Progress bar color
activeColor string ’’ Active/hover color
uploadCallback Record<string, any> (formData: FormData) => Promise<UploadCallbackResponse>   Callback function to set additional data and set the request headers (e.g. API Authorisation)

UploadCallbackResponse Interface

interface UploadCallbackResponse {
  formData: FormData
  headers: Record<string, string>
}

Events

Event Payload Description
files-selected File[] Emitted when files are selected
start-upload File[] Emitted when the upload starts
upload-complete File[] Emitted when the upload completes
upload-progress number Emitted when the upload progresses (0-100)
upload-success UploadStatus Emitted when the upload succeeds
upload-error UploadStatus Emitted when the upload fails

UploadStatus Interface

interface UploadStatus {
  type: 'pending' | 'success' | 'error' | 'processing'
  message: string
}

Examples

Basic Usage

<template>
  <FileUpload
    label="Upload Documents"
    accept=".pdf,.doc,.docx"
    @files-selected="handleFilesSelected"
  />
</template>

<script setup lang="ts">
import { FileUpload } from '@a-vision-software/vue-input-components'

const handleFilesSelected = (files: File[]) => {
  console.log('Selected files:', files)
}
</script>

Multiple Files with Size Limit

<template>
  <FileUpload
    label="Upload Images"
    :multiple="true"
    accept=".jpg,.jpeg,.png"
    :maxSize="5"
    :error="error"
    @files-selected="handleFilesSelected"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { FileUpload } from '@a-vision-software/vue-input-components'

const selectedFiles = ref<File[]>([])
const error = computed(() => {
  const oversized = selectedFiles.value.find((file) => file.size > 5 * 1024 * 1024)
  if (oversized) return 'File size must be less than 5MB'
  return ''
})

const handleFilesSelected = (files: File[]) => {
  selectedFiles.value = files
}
</script>

Automatic Upload with Progress

<template>
  <FileUpload
    label="Upload Profile Picture"
    accept=".jpg,.jpeg,.png"
    :maxSize="2"
    uploadUrl="/api/upload"
    :doUpload="true"
    :uploadData="{ userId: 123, type: 'profile' }"
    @upload-progress="handleProgress"
    @upload-success="handleSuccess"
    @upload-error="handleError"
  />
</template>

<script setup lang="ts">
import { FileUpload } from '@a-vision-software/vue-input-components'

const handleProgress = (progress: number) => {
  console.log(`Upload progress: ${progress}%`)
}

const handleSuccess = (status: UploadStatus) => {
  console.log('Upload successful:', status.message)
}

const handleError = (status: UploadStatus) => {
  console.error('Upload failed:', status.message)
}
</script>

Custom Styling

<template>
  <FileUpload
    label="Upload Files"
    icon="cloud-upload-alt"
    width="400px"
    height="200px"
    color="#333333"
    bgColor="#f8f9fa"
    borderColor="#007bff"
    progressColor="#28a745"
    activeColor="#e3f2fd"
    iconColor="#007bff"
    labelPosition="left"
    @files-selected="handleFilesSelected"
  />
</template>

<script setup lang="ts">
import { FileUpload } from '@a-vision-software/vue-input-components'

const handleFilesSelected = (files: File[]) => {
  console.log('Files selected:', files)
}
</script>

Manual Upload with Button

<template>
  <FileUpload
    label="Select Files"
    :multiple="true"
    accept=".txt,.csv"
    :showUploadButton="true"
    :uploadUrl="uploadUrl"
    @start-upload="handleStartUpload"
    @upload-complete="handleUploadComplete"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FileUpload } from '@a-vision-software/vue-input-components'

const uploadUrl = ref('/api/upload')

const handleStartUpload = (files: File[]) => {
  console.log('Starting upload for files:', files)
}

const handleUploadComplete = (files: File[]) => {
  console.log('Upload completed for files:', files)
}
</script>

Disabled State

<template>
  <FileUpload
    label="Upload (Disabled)"
    :disabled="true"
    :required="true"
    placeholder="Upload is currently disabled"
  />
</template>

<script setup lang="ts">
import { FileUpload } from '@a-vision-software/vue-input-components'
</script>

CSS Custom Properties

The component uses CSS custom properties for styling. You can override these in your CSS:

:root {
  --ui-upload-text-color: #888888;
  --ui-upload-bg-color: #ffffff;
  --ui-upload-active-bg-color: #cccccc;
  --ui-upload-border-color: #888888;
  --ui-progress-color: #4444aa;
  --ui-error-text-color: #aa0000;
  --ui-success-text-color: #00aa00;
}

Features