Vue Upload Image Save

Configurable image uploader with preview

Project README

Latest Stable Version

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 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

Open Source Agenda is not affiliated with "Vue Upload Image" Project. README Source: viral-vector/vue-upload-image
Stars
34
Open Issues
6
Last Commit
2 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating