Beautiful File Uploader With Preview – File Agent

Description:

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:

Beautiful File Uploader With Preview - File Agent

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

Last Update: August 30, 2019

Install:

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

You Might Be Interested In:

Add Comment