@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
![dependabot-preview[bot]](https://avatars.githubusercontent.com/u/27856297?size=120)