Multi File Uploader With Image Compressor - Handy Uploader

Install & Download:

# Yarn
$ yarn add handy-uploader
# NPM
$ npm i handy-uploader --save

Description:

A simple yet feature-rich file uploader with image compressor for Vue.js component.

Basic Usage:

1. Import and register the Handy Uploader.

import handyUploader from 'handy-uploader/src/components/handyUploader';
export default {
  components: {
    handyUploader,
  },
}

2. Add the Handy Uploader component to the app template.

<handy-uploader
  :documentAttachment.sync="handyAttachments"
  :fileUploaderType= "'simple'"
>
</handy-uploader>

3. Possible component props.

/**
 * Array contain files
 */
documentAttachment: [Array],
/**
 * Send api url for 'add' and 'delete'.
 * f.e: /building/add or /building/delete
 */
maxFileSize: {
  type: Number,
  default: 5120,
},
/**
 * choose File Uploader Type
 */
fileUploaderType: {
  type: String,
  default: 'thumbnail'
},
/**
 * Maximum file Upload
 */
maxFileCount: {
  type: Number,
  default: 0
},
/**
 * choose File Uploader Card Type
 */
cardType: String,
/**
 * Badge file counter state
 */
badgeCounter: {
  type: Boolean,
  default: true
},
/**
 * change Button Color
 */
btnColor: {
  type: String,
  default: 'info'
},
/**
 * Enable / Disable image compressor
 */
imageCompressor: Boolean,
/**
 * Image compress level (0 to 1)
 */
imageCompressLevel: {
  type: Number,
  default: 0.5
},
/**
 * Accept uploaded files
 */
fileAccept: String,
/**
 * show / hidden thumb for images in table and simple file uploader
 */
thumb: {
  type: Boolean,
  default: true
},
/**
 * show / hidden thumb column in table file uploader
 */
tableThumbColumn: Boolean,
/**
 * enable / disable table fixed header
 */
tableFixedHeader: {
  type: Boolean,
  default: true
},
/**
 * set table height
 */
tableHeight: {
  type: Number,
  default: 400
},
/**
 * Enable RTL support languages
 */
rtlSupport: {
  type: Boolean,
  default: false
},
/**
 * Change file uploader languages
 */
lang: {
  type: String,
  default: 'en'
},
/**
 * Change file Name before upload
 */
changeFileName: {
  type: Boolean,
  default: false
},
/**
 * Add file Description before upload
 */
addFileDescription: {
  type: Boolean,
  default: false
},
/**
 * Add file tags before upload
 */
addFileTag: {
  type: Boolean,
  default: false
},
/**
 * Array of file tags
 */
tags: {
  type: Array,
},
/**
 * Change count of columns
 */
cols: {
  type: Number,
  default: 4
},
/**
 * Define Custom language for uploader
 */
customLang: {
  type: Object,
  default: null
},
/**
 * Set Insert/Add new file Permission
 */
insertPermission: {
  type: Boolean,
  default: true
},
/**
 * Set edit Permission
 */
editPermission: {
  type: Boolean,
  default: true
},
/**
 * Set delete Permission
 */
deletePermission: {
  type: Boolean,
  default: true
},