saivarunk / Vue Simple Upload
Licence: mit
Simple File upload component for Vue.js
Stars: β 100
Projects that are alternatives of or similar to Vue Simple Upload
pagination
No description or website provided.
Stars: β 14 (-86%)
Mutual labels: vue-components, vue-component
Vue Video Player
π @videojs component for @vuejs
Stars: β 4,026 (+3926%)
Mutual labels: vue-components, vue-component
vue-notification-bell
Vue.js notification bell component.
Stars: β 64 (-36%)
Mutual labels: vue-components, vue-component
Xcui
π΄ A Vue.js 2.x desktop components colletion
Stars: β 88 (-12%)
Mutual labels: vue-components, vue-component
Vue Meeting Selector
This component is inspired from the meeting selector from doctolib with the power of Vuejs components.
Stars: β 44 (-56%)
Mutual labels: vue-components, vue-component
v-tostini
Toast plugin for Vue.js 2.x
Stars: β 12 (-88%)
Mutual labels: vue-components, vue-component
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: β 20,090 (+19990%)
Mutual labels: vue-components, vue-component
vstx-data-table
A data table component for the Vue Stacks Ecosystem
Stars: β 34 (-66%)
Mutual labels: vue-components, vue-component
Vue Quill Editor
π‘@quilljs editor component for @vuejs
Stars: β 6,874 (+6774%)
Mutual labels: vue-components, vue-component
Vue Touch Ripple
π Touch ripple component for @vuejs
Stars: β 443 (+343%)
Mutual labels: vue-components, vue-component
Vue Particles
Vue.js component for particles backgrounds β¨
Stars: β 1,220 (+1120%)
Mutual labels: vue-components, vue-component
Vue Qrcode Reader
A set of Vue.js components for detecting and decoding QR codes.
Stars: β 1,240 (+1140%)
Mutual labels: vue-components, vue-component
vue-drag-zone
Drag Zone component for @vuejs
Stars: β 127 (+27%)
Mutual labels: vue-components, vue-component
vue-mapbox-map
A minimalist Vue component wrapping Mapbox GL or MapLibre GL for dynamic interaction!
Stars: β 26 (-74%)
Mutual labels: vue-components, vue-component
v-owl-carousel
π¦ VueJS wrapper for Owl Carousel
Stars: β 46 (-54%)
Mutual labels: vue-components, vue-component
vui-vc-next
Vue 3 with Vite Playground - Mobile web UI components - (vue3+vite2).
Stars: β 15 (-85%)
Mutual labels: vue-components, vue-component
unique-ui
δΈδΈͺη¨δΊVue2.xη移ε¨η«―η»δ»ΆεΊ
Stars: β 43 (-57%)
Mutual labels: vue-components, vue-component
Cheetah Grid
The fastest open-source data table for web.
Stars: β 417 (+317%)
Mutual labels: vue-components, vue-component
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: β 1,071 (+971%)
Mutual labels: vue-components, vue-component
vue-simple-upload
An simple file upload component for vue.js.
Checkout Demo on JSFiddle
Installation
npm install vue-simple-upload
Usage
vue-simple-upload is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, FileUpload will be registered as a global variable.
ES6
import FileUpload from 'vue-simple-upload/dist/FileUpload'
export default {
...
components: {
'fileupload': FileUpload
},
...
}
After that, you can use it in your templates:
<fileupload target="http://localhost:8000/api/upload" action="POST"></fileupload>
CommonJS
var Vue = require('vue')
var FileUpload = require('vue-simple-upload')
var YourComponent = Vue.extend({
...
components: {
'fileupload': FileUpload.FileUpload
},
...
})
Browser
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-simple-upload/dist/vue-simple-upload.min.js"></script>
<script>
new Vue({
...
components: {
'fileupload': FileUpload.FileUpload
},
...
})
</script>
Usage
<template>
<fileupload target="http://localhost:8000/api/upload" action="POST" v-on:progress="progress" v-on:start="startUpload" v-on:finish="finishUpload"></fileupload>
</template>
<script>
new Vue({
...
components: {
'fileupload': FileUpload.FileUpload
},
methods: {
startUpload(e) {
// file upload start event
console.log(e);
},
finishUpload(e) {
// file upload finish event
console.log(e);
},
progress(e) {
// file upload progress
// returns false if progress is not computable
console.log(e);
}
}
})
</script>
Props
-
target (String): Target endpoint to upload the file
-
action (String): Target action ( POST or PUT )
Events
You can access the file upload events using v-on methods.
- File Upload start event: You can access the start event using v-on:start="startUpload"
methods() {
startUpload(e) {
// start event
}
}
- File Upload finish event: You can access the start event using v-on:finish="finishUpload"
methods() {
finishUpload(e) {
// finish event
}
}
- File Upload progress event: You can access the file upload progress using v-on:progress="progress"
methods() {
progress(e) {
// listen to file upload progress
}
}
Todos
- Multi File Upload
License
Released under the MIT License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].