Setting up Vue Clip - a minimalistic and hackable file uploader.

vueclip file upload

Simple file uploader for all sorts of files, which can be configured to accept specific file types and sizes, with custom events, according to your needs.

Features

  • Written in vanilla Javascript.
  • Weighs 17.9KB ( Minified and Gzip ), 57KB ( Minified ).
  • Hackable to the core with custom events.
  • Does not pollute DOM by adding unnecessary markup. In fact the component will create a single div element.

Example

Install via npm

npm i --save vue-clip

main.js

import Vue from 'vue'
import App from './App'
import VueClip from 'vue-clip'

Vue.use(VueClip)

App.vue

<template>
  <vue-clip :options="options">
    <template slot="clip-uploader-action">
      <div>
        <div class="dz-message"><h2> Click or Drag and Drop files here upload </h2></div>
      </div>
    </template>

    <template slot="clip-uploader-body" scope="props">
      <div v-for="file in props.files">
        <img v-bind:src="file.dataUrl" />
        {{ file.name }} {{ file.status }}
      </div>
    </template>

  </vue-clip>
</template>

<script>
  export default {

    data () {
      return {
        options: {
          url: '/upload',
          paramName: 'file'
        }
      }
    }

  }
</script>

More Configuration Options can be used:

 options: {
            url: '/upload',
            paramName: 'file',
            maxFilesize: 2 //file size in MB to be allowed,
            acceptedFiles: ['application/pdf']
        }

Also, Dragging and Events can be implemented. Find VueClip's documentantion here.