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.

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

Install the package via npm.

> sudo npm install @websanova/vue-upload

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');

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, {
    ...
});

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.

• Setting up the HTTP plugin
• Setting up the vue-upload plugin