Handy Uploader


🚀 Live Demo

A comprehensive Vue 3 file uploader component library with advanced features including automatic video thumbnail generation, multiple upload styles, and extensive file type support.

✨ Key Features

$3

- Automatic thumbnail extraction from video files using Canvas API
- Support for MP4, AVI, MOV, WMV, FLV, WebM formats
- Real-time thumbnail display with play button overlay
- No external dependencies required

$3

- Images: JPG, JPEG, PNG, GIF, BMP, SVG, WebP, TIFF
- Videos: MP4, AVI, MOV, WMV, FLV, WebM
- Documents: PDF, DOC, DOCX, TXT, RTF, ODT
- Spreadsheets: XLS, XLSX, CSV, ODS
- Presentations: PPT, PPTX, ODP
- Archives: ZIP, RAR, 7Z, TAR, GZ
- Audio: MP3, WAV, FLAC, AAC, OGG

$3

- ThumbnailUploader: Grid-based layout with file previews
- TableUploader: Table-based layout for detailed file information
- SimpleUploader: Minimalist drag-and-drop interface

$3

- 8 languages: English, Chinese, Spanish, French, German, Japanese, Korean, Arabic
- RTL support for Arabic
- Easy language switching

📦 Installation

``bash
npm install handy-uploader
`

`bash
yarn add handy-uploader
`

`bash
pnpm add handy-uploader
`

🚀 Quick Start

$3

Make sure you have the required peer dependencies:

`bash
npm install vue@^3.0.0 vuetify@^3.0.0
`

$3

`vue



`

$3

`typescript
// main.ts
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'

const vuetify = createVuetify()
const app = createApp(App)

app.use(vuetify)
app.mount('#app')
`

📖 Component Usage

$3

Perfect for media files with automatic video thumbnail generation:

`vue



`

$3

Great for document management with detailed file information:

`vue

`

$3

Minimal drag-and-drop interface:

`vue

`

⚙️ API Reference

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| maxFileSize | number | 10485760 | Maximum file size in bytes (10MB) |
| maxFileCount | number | 5 | Maximum number of files |
| acceptedFileTypes | string[] | ['*'] | Accepted MIME types |
| language | string | 'en' | Language code |
| theme | string | 'light' | Theme variant |

$3

| Event | Payload | Description |
|-------|---------|-------------|
| files-selected | FileData[] | Emitted when files are selected |
| file-removed | FileData | Emitted when a file is removed |
| error | Error | Emitted on errors |

$3

`typescript
interface FileData {
id: string
name: string
size: number
type: string
format: string
base64?: string
thumbnail?: string // Auto-generated for videos
lastModified: number
}
`

🎯 Advanced Features

$3

The library automatically generates thumbnails for video files:

`javascript
// Thumbnails are generated automatically
const videoFile = {
name: 'video.mp4',
type: 'video',
thumbnail: 'data:image/jpeg;base64,/9j/4AAQ...' // Auto-generated
}
`

$3

Automatic file type detection and icon assignment:

`javascript
// Automatic type detection
const file = {
name: 'document.pdf',
type: 'document', // Auto-detected
icon: 'mdi-file-pdf-box', // Auto-assigned
color: 'red' // Auto-assigned
}
`

$3

Built-in image compression for large files:

`vue
:compress-images="true"
:compression-quality="0.8"
:max-width="1920"
:max-height="1080"
/>
`

🌍 Internationalization

Supported languages:

`javascript
const languages = [
'en', // English
'zh', // Chinese
'es', // Spanish
'fr', // French
'de', // German
'ja', // Japanese
'ko', // Korean
'ar' // Arabic (RTL)
]
`

🛠️ Technical Requirements

$3

- Vue: ^3.0.0
- Vuetify: ^3.0.0

$3

- Chrome 88+
- Firefox 85+
- Safari 14+
- Edge 88+

$3

- Gzipped: ~45KB
- Minified: ~120KB

🎨 Customization

$3

Works with Vuetify's theming system:

`javascript
// vuetify.config.js
export default createVuetify({
theme: {
themes: {
light: {
primary: '#1976D2',
secondary: '#424242',
// Custom theme colors
}
}
}
})
`

$3

`vue

`

📝 Examples

$3

`vue



`

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

- GitHub Repository
- npm Package
- Documentation
- Issues

📊 Stats

!npm downloads
!GitHub stars
!GitHub issues

---

Made with ❤️ for the Vue.js community