Vue 3 File Uploader

A beautiful, feature-rich file upload component for Vue 3 with drag and drop support, file preview, and validation capabilities. This component provides an intuitive interface for uploading both images and videos, with built-in preview functionality.

Features

• 🚀 Drag and drop file upload
• 📸 Image and video preview
• ✨ Customizable file validation
• 🎯 Single or multiple file upload support
• 🖼️ Lightbox preview for uploaded files
• ⚡ Real-time validation feedback
• 🎨 Customizable styling
• 📱 Responsive design

Installation

npm install vue3-file-uploader

Usage

<template>
  <FileUpload
    :multiple="true"
    accept="image/*,video/*"
    :maxSize="5242880"
    placeholder="Drop your files here or click to upload"
  />
</template>

<script>
  import { FileUpload } from 'vue3-file-uploader'

export default {
  components: {
    FileUpload
  }
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | multiple | Boolean | false | Allow multiple file uploads | | accept | String | '' | Accepted file types (e.g., 'image/,video/') | | maxSize | Number | 5242880 | Maximum file size in bytes (default: 5MB) | | placeholder | String | 'Drag & drop files here or click to upload' | Custom placeholder text |

Events

| Event | Payload | Description | |-------|---------|-------------| | @change | File[] | Emitted when files are added or removed | | @error | string | Emitted when a validation error occurs |

Features in Detail

Drag and Drop

The component supports drag and drop functionality with visual feedback:

• Highlighted drop zone when dragging files
• Visual feedback for valid drop targets
• Smooth animations for better user experience

File Preview

• Thumbnail previews for images and videos
• Lightbox preview on click
• File name display
• Remove button for each file
• Support for both image and video previews

Validation

Built-in validation features:

• File size validation
• File type validation
• Custom error messages
• Real-time feedback

Styling

The component comes with a clean, modern design that you can easily customize:

• Responsive layout
• Customizable colors and borders
• Smooth transitions and animations
• Mobile-friendly design

Customization

You can customize the appearance by overriding the CSS variables:

.file-uploader {
  --primary-color: #007bff;
  --hover-color: #0056b3;
  --border-color: #ccc;
  --error-color: #dc3545;
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © [Mind Inventory]

Changelog

1.0.20

• Initial release
• Basic file upload functionality
• Drag and Drop functionality
• Image and video preview
• File validation