Noncollinear Perpendicular Microcrystalline

    vue-upload-image

    1.1.5 • Public • Published

    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

    Install

    npm i vue-upload-image

    DownloadsWeekly Downloads

    691

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    443 kB

    Total Files

    7

    Last publish

    Collaborators

    • viral-vector