vue-js-multiple-file-upload-with-preview

Responsive Vue.js File Downloader & File Viewer with Image Compressor | handy-uploader

by

Handy uploader is a simple but feature-rich file uploader with an image compressor for the Vue.js component.

multiple image upload javascript, upload multiple image in html and display, multiple image upload jquery, vue js multiple file upload with preview, upload multiple images in vue js

  • Choice Theme: Thumbnail, Simple, Table
  • Add custom fields (Title, Description, Tags, …)
  • Image compressor
  • Select level for Image compressor
  • Mange file extensions
  • Manage files count
  • Manage files size
  • Multi-languages support
  • Add custom language
  • Right to left support
  • Multi-file upload
  • Responsive

How to make use of it:

Install and download:

# Yarn
$ yarn add handy-uploader

# NPM
$ npm i handy-uploader --save

1. Import and register Handy Uploader.

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

2. Add the Handy Uploader component to the application 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
},

Multi File Uploader With Image Compressor, handy-uploader Plugin/Github, multiple-image upload with preview and delete vue js

See Demo And Download

Demo
Download

Official Website(alijahanpak): Click Here

This superior jQuery/javascript plugin is developed by alijahanpak. For extra Advanced Usages, please go to the official website.

Leave a Comment