Beautiful File Uploader With Preview – File Agent

Install & Download:

$ npm install vue-file-agent --save


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.


Create a new file upload component.

export default {
    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


Beautiful File Uploader With Preview - File Agent


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

Add Comment