vue-upload-component

vue-upload-component is a feature-rich file upload component for Vue.js. Presented as a simple button that wraps a hidden file input, it handles the hard parts of browser uploads: selecting multiple files, uploading entire directories, drag-and-drop (including dropping folders), simultaneous multi-file transfers, chunked uploads for large files, thumbnails, and custom filters.

It supports both modern browsers and legacy environments (down to HTML4 / IE9), works with PUT as well as POST methods, and exposes a reactive file list you control via v-model. Available for both Vue 2 and Vue 3 (via the @next tag), it is a widely adopted, battle-tested choice for building upload UIs.

What You Get

• Multi-file selection and simultaneous uploads
• Directory upload and folder drag-and-drop support
• Chunked upload of large files with progress tracking
• PUT and POST methods, custom filters, and thumbnail generation
• Broad browser support including HTML4 fallback (IE9)

Common Use Cases

• Drag-and-drop file and folder upload areas in web apps
• Uploading large files reliably via chunked transfers
• Bulk/multi-file upload interfaces such as media or document managers
• Custom upload flows needing file filtering, validation, and thumbnails

Under The Hood

Architecture - The component is implemented in src/FileUpload.vue, which wraps a hidden file input and maintains a reactive array of file objects bound via v-model. Upload transport logic, including chunked uploads, lives under src/chunk/ and shared helpers under src/utils/. It ships with TypeScript declarations (FileUpload.vue.d.ts, index.d.ts) and a compiled dist/ bundle.

Tech Stack - Authored as a Vue single-file component in TypeScript with zero runtime dependencies. The build pipeline uses Rollup and Webpack configs to emit UMD/ESM bundles (dist/vue-upload-component.js), with Prettier for formatting and a tsconfig.json for type checking. A separate @next release line targets Vue 3.

Code Quality - With over 2,600 GitHub stars and a high fork ratio, the component is heavily battle-tested in production. It ships type declarations, runnable examples (index.html, esm.html), and thorough documentation, though recent maintenance activity has slowed.

API Design - Integration is declarative and idiomatic: drop in the component, bind v-model to a files array, and set props for the URL, method, and options; scoped slots let you render custom UI around the underlying button. The documentation site walks through common patterns like drag-and-drop zones and chunked uploads.