Handy Uploader
Documentation Examples Github

Getting Started

OverView

 

  Complete and simple file uploader with image compressor 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
  • ...  

 

Install

 

   1. Install package:

$npm install handy-uploader

   2. You should Install Vuetify on project:

   Install on Vue CLI

$vue add vuetify

   Install on Nuxt

$npm install @nuxtjs/vuetify -D

   Once installed, update your nuxt.config.js file to include the Vuetify module in the build.

// nuxt.config.js

  buildModules: [
    '@nuxtjs/vuetify',
    ]

Build Setup

 

   Import handy-uploader to project

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

 

   Import handy-uploader to project - Full Example

<handy-uploader
    :documentAttachment.sync="handyAttachments"
    :fileUploaderType= "'simple'"
    :maxFileSize= "10240"
    :imageCompressor= "true"
    :imageCompressLevel= "0.8"
    :maxFileCount= "10"
    :badgeCounter= "true"
    :thumb= "false"
    :changeFileName="true"
    :addFileDescription="true"
    :addFileTag="true"
    :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
>
</handy-uploader>

<script>
    import handyUploader from 'handy-uploader/src/components/handyUploader';
    export default {
        components: {
            handyUploader,
        },
        data: () => ({
            handyAttachments: [],
        }),
    }
 </script>

 

props

 

     documentAttachment

 

       The documentAttachment return array of uploaded file

        Type:    Array

        Usage:

 <handy-uploader
    :documentAttachment.sync="handyAttachments"
  >
 <handy-uploader>

       return Array:

[
    { 
        file: {
            name: 'file name',
            size: 'file size',
            base64: 'base64', 
            format: 'file upload format. for example:image/jpeg;base64'
            tags: [],
            description: 'file description'
        }
    }
 ]

 

     fileUploaderType

 

       The fileUploaderType define file uploader theme : thumbnaile , simple , table

        Type:    String

        Default:    thumbnail

        Usage:

 <handy-uploader
    :fileUploaderType= "thumbnail"
  >
 <handy-uploader>

     or

 <handy-uploader
    :fileUploaderType= "simple"
  >
 <handy-uploader>

     or

 <handy-uploader
    :fileUploaderType= "table"
  >
 <handy-uploader>

 

     cardType

 

        Choose File Uploader Card Type Theme  

        cardTypes :    default  ,     outlined ,    shaped ,    raised ,    tile

        Type:    String

        Default:    default

        Usage:

 <handy-uploader
    :cardType= "'shaped'"
  >
 <handy-uploader>

 

     fileAccept

 

        The fileAccept attribute of the input tag, MIME type

        Type:    String

        Usage:

 <handy-uploader
    :fileAccept= "'image/png,image/gif,image/jpeg,image/webp'"
  >
 <handy-uploader>

       Important: If don`t send fileAccept, file uploader accept all file formats.

 

     imageCompressor

 

        handy-uploader, Uses the Browser's native canvas.toBlob API to do the compression work, which means it is lossy compression. General use this to precompress a client image file before upload it.

        Type:    Boolean

        Default:    true

        Usage:

 <handy-uploader
    :imageCompressor= "true"
   >
 <handy-uploader>

 

     imageCompressLevel

 

        A Number between 0 and 1 indicating image quality.

        Type:    Number

        Default:    0.5

        Usage:

 <handy-uploader
    :imageCompressLevel= "0.6"
  >
 <handy-uploader>

 

     maxFileSize

 

       Maximum of file size upload. sent in prop to KB

        Type:    Number

        Default:    5120  kb

        Usage:

 <handy-uploader
    :maxFileSize= "10240"
  >
 <handy-uploader>

 

     maxFileCount

 

        Maximum of file upload

        Type:    Number

        Default:    0

        Usage:

 <handy-uploader
    :maxFileCount= "5"
  >
 <handy-uploader>

       If you dont send maxFileCount, You can upload files without restrictions.

 

     thumb

 

        show / hidden thumb for images in table and simple file uploader

        Type:    Boolean

        Default:    true

        Usage:

 <handy-uploader
    :thumb= "true"
  >
 <handy-uploader>

 

     tableThumbColumn

 

        show / hidden thumb column in table file uploader

        Type:    Boolean

        Default:    true

        Usage:

 <handy-uploader
    :tableThumbColumn= "false"
  >
 <handy-uploader>

 

     tableFixedHeader

 

        enable / disable table fixed header

        Type:    Boolean

        Default:    true

        Usage:

 <handy-uploader
    :tableFixedHeader= "false"
  >
 <handy-uploader>

 

     tableHeight

 

        Set table height in px.

        Type:    Number

        Default:    400

        Usage:

 <handy-uploader
    :tableHeight= "500"
  >
 <handy-uploader>

 

     badgeCounter

 

        Badge file counter state.

        Type:    Boolean

        Default:    true

        Usage:

 <handy-uploader
    :badgeCounter= "false"
  >
 <handy-uploader>

 

     rtlSupport

 

        Enable RTL support languages.

        Type:    Boolean

        Default:    false

        Usage:

 <handy-uploader
    :rtlSupport= "true"
  >
 <handy-uploader>

 

     lang

 

        Change file uploader languages.

        Examples:   English  en  ,   Persian   fa ,   French  fr ,  Chinese   ch ,   Arabic  ar

        Type:    String

        Default:    en

        Usage:

 <handy-uploader
    :lang= "'fa'"
  >
 <handy-uploader>

 

     customLang

 

        Define Custom language for uploader.

        Type:    Object

        Default:    null

        Usage:

 <handy-uploader
    :lang= "'custom'"
    :customLang= "customLang"
  >
 <handy-uploader>

<script>
    import handyUploader from 'handy-uploader/src/components/handyUploader';
    export default {
        components: {
            handyUploader,
        },
        data: () => ({
            handyAttachments: [],
            customLang : {
              custom : {
                insertFile: 'Insert File',
                insertNewFile: 'Insert New File1,
                add: 'Add',
                delete: 'Delete',
                edit: 'Edit',
                deleteDialog: {
                  message: 'Are you sure you want to delete the file?',
                  cancel: 'cancel',
                },
                table: {
                  thumb: 'Thumb',
                  name: 'Name',
                  size: 'Size',
                  tags: 'tags',
                  action: {
                    action: 'Action',
                    deleteTooltip: 'Delete'
                  }
                },
                size: {
                  kb: 'KB',
                  mb: 'MB',
                },
                maxFileSizeAlert: 'Max file Size is',
                maxFileCountAlert: 'Max file Count is',
                fileName: 'File Name',
                fileDescription: 'File Description',
                fileTags: 'File Tags',
              }
            },
        }),
    }
 </script>

 

     btnColor

 

        change Button color.

        Type:    String

        Default:    info

        Usage:

 <handy-uploader
    :btnColor= "'#00796B'"
  >
 <handy-uploader>

 

     changeFileName

 

        Change file name before upload.

        Type:    Boolean

        Default:    false

        Usage:

 <handy-uploader
    :changeFileName= "true"
  >
 <handy-uploader>

 

     addFileDescription

 

        Add file Description before upload.

        Type:    Boolean

        Default:    false

        Usage:

 <handy-uploader
    :addFileDescription= "true"
  >
 <handy-uploader>

 

     addFileTag

 

        Add file tags before upload.

        Type:    Boolean

        Default:    false

        Usage:

 <handy-uploader
    :addFileTag= "true"
  >
 <handy-uploader>

 

     tags

 

        Array of file tags.

        Type:    Array

        Usage:

 <handy-uploader
    :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
  >
 <handy-uploader>

 

     cols

 

        Change count of columns.

        Type:    Number

        Default:    4

        Usage:

 <handy-uploader
    :cols= "6"
  >
 <handy-uploader>

 

     editPermission

 

        Set edit Permission for edit attachment details.

        Type:    Boolean

        Default:    true

        Usage:

 <handy-uploader
    :editPermission= "false"
  >
 <handy-uploader>

 

     deletePermission

 

        Set delete Permission for delete attachment details.

        Type:    Boolean

        Default:    true

        Usage:

 <handy-uploader
    :deletePermission= "false"
  >
 <handy-uploader>

 

Code Examples

 

     Thumbnail

<handy-uploader
    :documentAttachment.sync="handyAttachments"
    :fileUploaderType= "'thumbnail'"
    :maxFileSize= "10240"
    :imageCompressor= "true"
    :imageCompressLevel= "0.8"
    :maxFileCount="10"
    :badgeCounter= "true"
    :changeFileName="true"
    :addFileDescription="true"
    :addFileTag="true"
    :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
>
</vue-file-uploader>

<script>
    import handyUploader from 'handy-uploader/src/components/handyUploader';
    export default {
        components: {
            handyUploader,
        },
        data: () => ({
            handyAttachments: [],
        }),
    }
 </script>

     handyAttachments The Array you define for file uploader

 

 

     Simple

<vue-file-uploader
    :documentAttachment.sync="handyAttachments"
    :fileUploaderType= "'simple'"
    :maxFileSize= "10240"
    :imageCompressor= "true"
    :imageCompressLevel= "0.8"
    :maxFileCount= "10"
    :badgeCounter= "true"
    :thumb= "false"
    :changeFileName="true"
    :addFileDescription="true"
    :addFileTag="true"
    :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
>
</handy-uploader>

<script>
    import handyUploader from 'handy-uploader/src/components/handyUploader';
    export default {
        components: {
            handyUploader,
        },
        data: () => ({
            handyAttachments: [],
        }),
    }
 </script>

     handyAttachments The Array you define for file uploader

 

 

     Table

<handy-uploader
    :documentAttachment.sync="handyAttachments"
    :fileUploaderType= "'table'"
    :maxFileSize= "10240"
    :imageCompressor= "true"
    :imageCompressLevel= "0.8"
    :maxFileCount= "10"
    :badgeCounter= "true"
    :thumb= "true"
    :tableFixedHeader= "true"
    :tableHeight= "400"
    :tableThumbColumn= "true"
    :changeFileName="true"
    :addFileDescription="true"
    :addFileTag="true"
    :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
>
</handy-uploader>

<script>
    import handyUploader from 'handy-uploader/src/components/handyUploader';
    export default {
        components: {
            handyUploader,
        },
        data: () => ({
            handyAttachments: [],
        }),
    }
 </script>

     handyAttachments The Array you define for file uploader