vue-upload-image

Configurable image uploader with preview

drag and drop with input backup
image previews
simple resizing
events
minimal
configurable

example

Installation & Usage

Vue.prototype.$http must be define, for automatic uploads to work. info

install the package
```
npm install vue-upload-image --save
```

import & register the component


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
<upload-image is="upload-image"
   :url="forms.create.url"
   :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"
></upload-image>

// or set Vue instance template property
{   
    name: 'component or root Vue instance',
    template: '<upload-image :max_files="5" ....></upload-image>',
    props: ...,
    data: ...
    components: {
        UploadImage
    }
}

Configuration

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

.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

<upload-image
   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...
   @upload-image-submit="uploadImageSubmit"
></upload-image>

{
    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){
        }
    }
}

upload-image-loaded - [image]
- event is called after an image has been fully loaded & rendered in preview area
- emits an object containing the file name & blob of the image
upload-image-clicked - [image]
- event is called when an image in preview has been clicked
- emits an object containing the file name & blob of the image
upload-image-removed - [image]
- event is called after an image has been removed from preview
- emits an object containing the file name & blob of the image
upload-image-submit - [images]
- event is called immediately after the end user triggers the "submit" action (button_html property)
- emits a FormData object composed of images being uploaded
- batched submissions will emit this event per batch
- can be utilized with disable_upload property for manual uploads
upload-image-attempt - [FormData]
- event is called prior to an automatic upload to the designated url
- emits a FormData object composed of images being uploaded
- batched submissions will emit this event per batch
upload-image-success - [FormData, Response]
- event is called after s successful automatic upload to the designated url
- emits a FormData object composed of images being uploaded along with the success response object from the server
upload-image-failure - [FormData, Response]
- event is called after s failed automatic upload to the designated url
- emits a FormData object composed of images being uploaded along with the error response object from the server

License

This project is licensed under the MIT License.

Contributing Guidelines

All changes must be documented in CHANGELOG.md

viral-vector / vue-upload-image

readme