Simple File Upload Control For Vue.js - vue-upload

Install & Download:

# NPM
$ npm i @websanova/vue-upload

Description:

Yet another simple, lightweight, draggable file upload component for Vue 3 and Vue 2.

How to use it:

1. Use it in Vue 3 applications.

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: {
      // options here
    }
});

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

2. Use it in Vue 2 applications.

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: {
      // options here
    }
});

3. Available options.

url: null,
preFetchUrl: false,
name: 'file',
accept: null,
body: {},
httpOptions: {},
dropzoneId: null,
onSelect: null,
onStart: null,
onQueue: null,
onProgress: null,
onPrefetchUrl: null,
onUpload: null,
onError: null,
onSuccess: null,
onComplete: null,
onEnd: null,
startOnSelect: true,
extensions: ['jpeg', 'jpg', 'png', 'gif'],
multiple: false,
sendAsMultipart: true,
maxFilesSelect: 4,
maxFilesInProgress: 2,
maxSizePerFile: 1024 * 1024 * 2, // MB
maxFilesSelectMsg: 'Max of {max} files can be selected at a time.',
maxFileSizeMsg: 'Max of {max} mb per file.',
invalidExtensionMsg: 'File must be one of {extensions}.',
// currentFiles: null,
parseErrors: __parseErrors,
http: __http