Beautiful File Uploader With Preview – File Agent

File Agent is a powerful, responsive, customizable, drag’n’drop file uploader component for Vue.js.

More features:

• File preview: Image, Video, Audio.
• File type icon.
• Smooth transitions.
• Server side validation and error handling.
• Supports PHP and Node.js.
• And much more.

Basic usage:

Install and import the Vue File Agent component.

import Vue from 'vue';
import VueFileAgent from 'vue-file-agent';
import VueFileAgentStyles from 'vue-file-agent/dist/vue-file-agent.css';

Register the component and we’re ready to go.

Vue.use(VueFileAgent);

Create a new file upload component.

<template>
  <VueFileAgent
    :uploadUrl="/path/to/uploadUrl"
    v-model="filesData"
  ></VueFileAgent>
</template>

export default {
  data(){
    return {
    };
  }
}

All possible props to config the file uploader.

• uploadUrl
• uploadHeaders
• multiple: supports multiple files?
• deletable: is deletable?
• read
• accept
• value
• progress
• helpText
• maxSize
• maxFiles
• errorText
• meta
• compact
• thumbnailSize
• theme

Preview:

Changelog:

v1.7.3 (05/12/2020)

• Added averageColor boolean prop
• Fixed extra shadow when meta=false
• Made url property reactive
• Support for custom tus.Upload options
• Disabled resized image data urls (base64) for preloaded images

Download Details:

Author: safrazik

Live Demo: https://safrazik.github.io/vue-file-agent/

Download Link: https://github.com/safrazik/vue-file-agent/archive/master.zip

Official Website: https://github.com/safrazik/vue-file-agent

Install & Download:

# NPM
$ npm install vue-file-agent --save