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.