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
- ...
1. Install package:
$npm install handy-uploader2. You should Install Vuetify on project:
$vue add vuetify$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',
]
Import handy-uploader to project
<script>
import handyUploader from 'handy-uploader/src/components/handyUploader';
export default {
components: {
handyUploader,
},
}
</script>
<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>
The documentAttachment return array of uploaded file
<handy-uploader
:documentAttachment.sync="handyAttachments"
>
<handy-uploader>[
{
file: {
name: 'file name',
size: 'file size',
base64: 'base64',
format: 'file upload format. for example:image/jpeg;base64'
tags: [],
description: 'file description'
}
}
]
The fileUploaderType define file uploader theme : thumbnaile , simple , table
<handy-uploader
:fileUploaderType= "thumbnail"
>
<handy-uploader>or
<handy-uploader
:fileUploaderType= "simple"
>
<handy-uploader>or
<handy-uploader
:fileUploaderType= "table"
>
<handy-uploader>
Choose File Uploader Card Type Theme
cardTypes : default , outlined , shaped , raised , tile
<handy-uploader
:cardType= "'shaped'"
>
<handy-uploader>
The fileAccept attribute of the input tag, MIME type
<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.
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.
<handy-uploader
:imageCompressor= "true"
>
<handy-uploader>
A Number between 0 and 1 indicating image quality.
<handy-uploader
:imageCompressLevel= "0.6"
>
<handy-uploader>
Maximum of file size upload. sent in prop to KB
<handy-uploader
:maxFileSize= "10240"
>
<handy-uploader>
Maximum of file upload
<handy-uploader
:maxFileCount= "5"
>
<handy-uploader>If you dont send maxFileCount, You can upload files without restrictions.
show / hidden thumb for images in table and simple file uploader
<handy-uploader
:thumb= "true"
>
<handy-uploader>
show / hidden thumb column in table file uploader
<handy-uploader
:tableThumbColumn= "false"
>
<handy-uploader>
enable / disable table fixed header
<handy-uploader
:tableFixedHeader= "false"
>
<handy-uploader>
Set table height in px.
<handy-uploader
:tableHeight= "500"
>
<handy-uploader>
Badge file counter state.
<handy-uploader
:badgeCounter= "false"
>
<handy-uploader>
Enable RTL support languages.
<handy-uploader
:rtlSupport= "true"
>
<handy-uploader>
Change file uploader languages.
Examples: English en , Persian fa , French fr , Chinese ch , Arabic ar
<handy-uploader
:lang= "'fa'"
>
<handy-uploader>
Define Custom language for uploader.
<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>
change Button color.
<handy-uploader
:btnColor= "'#00796B'"
>
<handy-uploader>
Change file name before upload.
<handy-uploader
:changeFileName= "true"
>
<handy-uploader>
Add file Description before upload.
<handy-uploader
:addFileDescription= "true"
>
<handy-uploader>
Add file tags before upload.
<handy-uploader
:addFileTag= "true"
>
<handy-uploader>
Array of file tags.
<handy-uploader
:tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
>
<handy-uploader>
Change count of columns.
<handy-uploader
:cols= "6"
>
<handy-uploader>
Set edit Permission for edit attachment details.
<handy-uploader
:editPermission= "false"
>
<handy-uploader>
Set delete Permission for delete attachment details.
<handy-uploader
:deletePermission= "false"
>
<handy-uploader>
<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
<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
<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