Vue File Agent for Vue 3

Every file deserves to be treated equally

High performant Vue file upload component with elegant and distinguishable previews for every file type and support for drag and drop, validations, default uploader with progress support and externally customizable in the "vue way"

Features

• Exclusively designed for Vue with performance and simplicity in mind
• No dependency but small footprint - 17KB minified, gzipped
• Elegant and responsive design with two official themes: grid view and list view
• File input with drag and drop with support for folders
• Smooth Transitions
• Multiple File Uploads
• Max File Size, Accepted file types validation
• Image/Video/Audio Previews
• File type icons
• Default uploader with progress
• Externally controllable via Vue bindings and methods
• Built in support for server side validation and error handling
• Official Upload Server Examples for PHP and Node Js
• File names can be edited with :editable prop
• Intuitive drag & drop sortable with :sortable prop
• Resumable uploads with :resumable prop through tus.io protocol
• Can be used with any css/component framework, including but not limited to: Bootstrap, Bulma, Tailwind, Vuetify, etc.

Basic Usage

<template>
  <VueFileAgent :uploadUrl="uploadUrl" v-model="fileRecords" v-model:rawModelValue="rawFileRecords"></VueFileAgent>
</template>

NOTE: when uploadUrl is provided, auto uploading is enabled. See demo examples for manual uploading example.

<script>
  export default {
    data() {
      return {
        // ...
        fileRecords: [],
        rawFileRecords: [],
        uploadUrl: 'https://example.com',
        // ...
      };
    },
    // ...
  };
</script>

That's it?

Yes. That's it. It's that simple. See Advanced Usage section below to tailor it for your specific needs.

Installation

# NPM
npm install @boindil/vue-file-agent-next --save

# Yarn
yarn add @boindil/vue-file-agent-next

# PNPM
pnpm add @boindil/vue-file-agent-next

import {createApp} from 'vue'
import VueFileAgentNext from '@boindil/vue-file-agent-next'

import '@boindil/vue-file-agent-next/dist/vue-file-agent-next.css'

createApp(App).use(VueFileAgentNext).mount('#app')

or with script tag

<!-- jsdelivr cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@boindil/vue-file-agent-next@latest/dist/vue-file-agent-next.css" />
<script src="https://cdn.jsdelivr.net/npm/@boindil/vue-file-agent-next@latest/dist/vue-file-agent-next.umd.js"></script>

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/@boindil/vue-file-agent-next@latest/dist/vue-file-agent-next.css" />
<script src="https://unpkg.com/@boindil/vue-file-agent-next@latest/dist/vue-file-agent-next.umd.js"></script>

Download from Github

License

The MIT License