Vue Upload Guides Startup




File uploads is going to be one of the most common features an application will need. The plugin aims to simplify single and multi file uploads.

Features

  • Drag and drop file zone.
  • Progress indicators.
  • Synchronous or asynchronous modes.
  • Validation

Install

Install the package via npm.

> sudo npm install @websanova/vue-upload

Setup

The default install is for the Vue 3 version with ES6 module syntax.

Check the Vue 3 demo for a fully working example.

import {createApp}   from 'vue';
import axios         from 'axios';
import App           from 'App.vue';
import VueUpload     from '@websanova/vue-upload';
import VueUploadHttp from '@websanova/vue-upload/dist/drivers/http/axios.esm.js';

var upload = createUpload({
    plugins: {
        http: axios
    },
    drivers: {
        http: httpAxios
    },
    options: {

    }
});

createApp(App)
    .use(upload)
    .mount('#app');

Vue 2

By default importing @websanova/vue-upload will use the Vue 3 version.

To use the Vue 2 version the path must be set. Check the Vue 2 demo for a fully working example.

import Vue           from 'vue';
import VueUpload     from '@websanova/vue-upload/dist/v2/vue-upload.esm.js';
import VueUploadHttp from '@websanova/vue-upload/dist/drivers/http/axios.esm.js';

Vue.use(VueUpload, {
    plugins: {
        http: Vue.axios,
    }
    drivers: {
        http: VueUploadHttp
    }
    options: {
        ...
    }
});

Also supports ES5 require syntax.

var Vue           = require('vue');
var VueUpload     = require('@websanova/vue-upload/dist/v2/vue-upload.cjs.js');
var VueUploadHttp = require('@websanova/vue-upload/dist/drivers/http/axios.cjs.js');

Vue.use(VueUpload, {
    ...
});

HTTP Drivers

You will need to hook up an http driver to facilitate requests to the api.

The plugin ships with a vue-resource and Axios driver out of the box.

It's best to take a look at the demo for a complete setup with either plugin.