A simple vue upload component with HTML only drag and drop features. It has image preview functionality and uses axios to push your image to whatever endpoint you specify.

yarn add vue-dsu
# or
npm install vue-dsu --save

CDN: UNPKG | jsDelivr (available as window.VueSimpleUploader)

import Uploader from 'vue-dsu'
Vue.use(Uploader)

required: { // Field is not mandatory by default
  default: false
},
apiURL: {}, // http://your-api-url.com/
accept: {
  default: 'image/*'
},
preview: { // Show image preview by default
  default: true
}

<template>
  <uploader v-model="thumbnail_url" :required="true" apiURL="http://yourapiurl.com" accept="" />
</template>

<script>
data () {
  return {
    thumbnail_url: 'https://picsum.photos/300/300'
  }
}
</script>

• yarn dev: Run the dev environment
• yarn build: Build for npm

# Fork the repo
git clone git@github.com:$YOUR_NAME/vue-dead-simple-uploader.git && cd vue-dead-simple-uploader

yarn dev
yarn build

• Add prop to specify icon and label
• Add drag/drop animation

MIT © mariojankovic