Configurable image preview & ajax up-loader
npm install vue-upload-image
bash
npm install vue-upload-image --save
`
* import & register the component
`js
import UploadImage from 'vue-upload-image';
// register globally
Vue.component('upload-image', UploadImage)
// or ... register locally
new Vue({
...,
components: {
UploadImage
}
})
`
* add component to page
`html
// html template
:max_files="5"
name="files[]"
:resize_enabled="true"
:resize_max_width="640"
:button_html="forms.create.confirm"
:button_class="'button is-primary'"
v-on:upload-image-attemp="uploadImageAttempt"
v-on:upload-image-success="uploadImageSuccess"
v-on:upload-image-failure="uploadImageFailure"
v-on:upload-image-loaded="uploadImageLoaded"
v-on:upload-image-submit="uploadImageSubmit"
v-on:upload-image-clicked="uploadImageClicked"
v-on:upload-image-removed="uploadImageRemoved"
>
// or set Vue instance template property
{
name: 'component or root Vue instance',
template: '
props: ...,
data: ...
components: {
UploadImage
}
}
`
Configuration
`js
input_id: { // Id of upload control
type: String,
required: false,
default: "default"
},
url: { // upload url
type: String,
required: true,
default: null
},
name: { // name to use for FormData
type: String,
required: false,
default: 'images[]'
},
disable_upload: { // disable auto uploading
type: Boolean,
required: false,
default: false
},
max_batch: { // # of files to upload within one request
type: Number,
required: false,
default: 0
},
max_files: { // total # of files allowed to be uploaded
type: Number,
required: false,
default: 10
},
max_filesize: { // max files size in KB
type: Number,
required: false,
default: 8000
},
resize_enabled: { // resize image prior to preview/upload
type: Boolean,
required: false,
default: false
},
resize_max_width: { // resize max width
type: Number,
required: false,
default: 800
},
resize_max_height: { // resize max height
type: Number,
required: false,
default: 600
},
button_html: { // text/html for button
type: String,
required: false,
default: 'Upload Images'
},
button_class: { // classes for button
type: String,
required: false,
default: 'btn btn-primary'
}
`
UI/UX Adjustments
* Basic look & feel can be adjusted via html/css classes
`css
.vue_component__upload--image
.upload_image_form__thumbnails
.upload_image_form__thumbnail [&.bad-size, &.uploaded]
.img [&.show, &:hover]
span
`
Events
* Event listeners can be added as such
`html
v-on:upload-image-success="uploadImageSuccess"
v-on:upload-image-failure="uploadImageFailure"
v-on:upload-image-loaded="uploadImageLoaded"
v-on:upload-image-submit="uploadImageSubmit"
v-on:upload-image-clicked="uploadImageClicked"
v-on:upload-image-removed="uploadImageRemoved"
// or...
@upload-image-submit="uploadImageSubmit"
>
`
`js
{
methods: {
uploadImageSuccess: function(result){
result[0] // FormData
result[1] // response
},
uploadImageLoaded: function(image){
image.name || image.file
},
uploadImageClicked: function(image){
image.name || image.file
},
uploadImageRemoved: function(image){
image.name || image.file
},
uploadImageSubmit: function(images){
}
}
}
``