Skip to content
Full featured drag & drop enabled Vue file upload component with previews and upload progress
JavaScript Vue HTML CSS PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_layouts
dist
src
tests/unit
upload-server-examples
website
.eslintrc.js
.gitattributes
.gitignore
CHANGELOG.md
CONTRIBUTING.md Fix #10 Add file-preview slots Sep 11, 2019
LICENSE
README.md
_config.yml
_config_dev.yml
api.md
babel.config.js
index.md
jest.config.js
package-lock.json
package.json
upload-server-examples.md
vue.config.js

README.md

Vue File Agent

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"

Live Demo · CodePen Playground

Demo

Features

  • Exclusively designed for Vue with performance and simplicity in mind
  • 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

Basic Usage

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

NOTE: when uploadUrl is provided, auto uploading is enabled. See Advanced Usage section below for manual uploading example.

<script>
export default {
  data(){
    return {
      // ...
      filesData: [],
      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 install vue-file-agent --save
import Vue from 'vue';
import VueFileAgent from 'vue-file-agent';
import VueFileAgentStyles from 'vue-file-agent/dist/vue-file-agent.css';

Vue.use(VueFileAgent);

or with script tag

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

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

Download from Github

Advanced Usage

<template>
  <VueFileAgent
    ref="vueFileAgent"
    :theme="'list'"
    :multiple="true"
    :deletable="true"
    :meta="true"
    :accept="'image/*,.zip'"
    :maxSize="'10MB'"
    :maxFiles="14"
    :helpText="'Choose images or zip files'"
    :errorText="{
      type: 'Invalid file type. Only images or zip Allowed',
      size: 'Files should not exceed 10MB in size',
    }"
    @select="filesSelected($event)"
    @delete="fileDeleted($event)"
    v-model="filesData"
  ></VueFileAgent>
  <button
    :disabled="!filesDataForUpload.length" 
    @click="uploadFiles()"
  >
      Upload {{ filesDataForUpload.length }} files
  </button>
</template>
<script>
export default {
  data: function(){
    return {
      filesData: [],
      uploadUrl: 'https://www.mocky.io/v2/5d4fb20b3000005c111099e3',
      uploadHeaders: {'X-Test-Header': 'vue-file-agent'},
      filesDataForUpload: [],
    };
  },
  methods: {
    uploadFiles: function(){
      // Using the default uploader. You may use another uploader instead.
      this.$refs.vueFileAgent.upload(this.uploadUrl, this.uploadHeaders, this.filesDataForUpload);
      this.filesDataForUpload = [];
    },
    deleteUploadedFile: function(fileData){
      // Using the default uploader. You may use another uploader instead.
      this.$refs.vueFileAgent.deleteUpload(this.uploadUrl, this.uploadHeaders, fileData);
    },
    filesSelected: function(filesDataNewlySelected){
      var validFilesData = filesDataNewlySelected.filter(fileData => !fileData.error);
      this.filesDataForUpload = this.filesDataForUpload.concat(validFilesData);
    },
    fileDeleted: function(fileData){
      var i = this.filesDataForUpload.indexOf(fileData);
      if(i !== -1){
        this.filesDataForUpload.splice(i, 1);
      }
      else {
        this.deleteUploadedFile(fileData);
      }
    },
  }
}
</script>

License

The MIT License

Live Demo

You can’t perform that action at this time.