@unicorns/uploader

Simple File Uploader

Basic file uploader

Install

npm install @unicorns/uploader --save

Test and Build

npm run test
npm run build

Usage

import FileUploader from '@unicorns/uploader'

Include it in the component you'd like to use it in.

Basic

Will generate a basic uploader

<file-uploader
  name="image"
  v-model="imageModel"
  :placeholder="photo ? photo.url : ''"
  v-validate="{required: true, mimes: ['image/png'], size: 10240, min_width: 2500, min_height: 1500}">
</file-uploader>

Advanced

You can further customise the uploader, and include custom image assets.

<file-uploader
  @progress="updateProgress"
  @uploaded="uploadDocument"
  @failed="handleFailure"
  url="https://example.com/post"
  name="Filename"
  :validation="validation"
  :styles="uploaderStyles"
  :reset-image="resetImage"
  :preview="preview"
  v-model="uploadedFile">
</file-uploader>

{
  // validation property
  validation: {
    rules: {
      required: true,
      mimes: ['image/png', 'image/jpg', 'image/jpeg'],
      size: 10240
    }
  },

  // styles property
  uploaderStyles: {
    box: {
      width: '130px',
      height: '70px',
      margin: '1em'
    },
    preview: {
      width: '120px',
      height: '60px',
      margin: '1em'
    },
    button: {
      colour: '#101010',
      text: 'white',
      disabled: 'lightgrey',
      width: '120px',
      margin: '1em'
    }
  },

  // custom images
  resetImage: url("data:image/png;base64,XXX"),
  preview: url("data:image/png;base64,ZZZ"),

  // custom events
  updateProgress: (data) => { console.log(data) },
  uploadDocument: () => { console.log('uploaded') },
  handleFailure: () => { throw 'Failed' }
}

Additional Vee Validate Validations

There are 2 custom Vee Validate directives included in this package.

You can enable them in your host application like this:

// main.js
import minimumWidth from '@/validation/minwidth.js'
import minimumHeight from '@/validation/minheight.js'

VeeValidate.Validator.extend('min_width', {
  validate: minimumWidth,
  getMessage: field => 'Image width must be 500px minimum'
})

VeeValidate.Validator.extend('min_height', {
  validate: minimumHeight,
  getMessage: field => 'Image height must be 20px minimum'
})

Version History

v1.x is now deprecated and no longer supported.

v2.x is the latest version and is not backwards compatible with applications currently using v1.x.

Ensure you test your application sufficiently before updating the version from 1.x to 2.x