Vuppy

Simple unofficial Vue.js wrapper for popular library https://uppy.io/

🚀 DEMO

https://vuppy.netlify.com/

Instalation

• npm npm install vuppy
• yarn yarn add uppy

Usage

<template>
    <vuppy v-model="images"></vuppy>
</template>

<script>
import vuppy from 'vuppy';

export default {
    components: {
        vuppy
    },

    data() {
        return {
            images: []
        }
    }
}
</script>

Image object

{
    id: Uppy generated id
    file: base64 hashed file,
    name: original filename,
}

Options

You can specify following properties

| Name | Type | Default value | Description | | :--- | :--- | :--- | :--- | | id | String | uppy | When there is more than just one instance rendered at the same time you need to specify uniq id| | maxFileSize | Number | 2000000 | Specify Max file size (Bytes) | | allowedFileTypes | Array | null | Array of allowed file types. Exact mime types image/jpeg, or file extensions ['image/*', '.jpg', '.jpeg', '.png', '.gif'] | | maxNumberOfFiles | Number | null | Maximum namuber of files | | minNumberOfFiles | Number | null | Minimum namuber of files | | dashboardHeight | Number | null | Dashboard height | | dashboardWidth | Number | null | Dashboard width | | theme | String | light | Dashboard color theme | | locale | String | en_US | All available locales can be found here |

License

The MIT License.