├── _config.yml
├── static
    ├── v.png
    ├── icon.png
    ├── favicon.ico
    ├── vue-file-uploader.png
    ├── README.md
    └── vuetify-logo.svg
├── vue-shim.d.ts
├── assets
    ├── variables.scss
    └── README.md
├── content
    └── doc.md
├── components
    ├── README.md
    ├── InsertButton.vue
    ├── SelectFileIconType.vue
    ├── language.js
    ├── TableUploader.vue
    ├── ThumbnailUploader.vue
    ├── SimpleUploader.vue
    ├── fileUploader.vue
    └── fileUploader copy.vue
├── .editorconfig
├── layouts
    ├── README.md
    ├── error.vue
    └── default.vue
├── plugins
    └── README.md
├── .eslintrc.js
├── middleware
    └── README.md
├── store
    └── README.md
├── tsconfig.json
├── package.json
├── README.md
├── LICENSE
├── .gitignore
├── pages
    ├── index.vue
    ├── documentation.vue
    ├── simple.vue
    ├── table.vue
    ├── thumbnail.vue
    └── README.md
└── nuxt.config.js


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-slate


--------------------------------------------------------------------------------
/static/v.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alijahanpak/vue-file-uploader/HEAD/static/v.png


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alijahanpak/vue-file-uploader/HEAD/static/icon.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alijahanpak/vue-file-uploader/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/vue-shim.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import Vue from 'vue'
3 |   export default Vue
4 | }
5 | 


--------------------------------------------------------------------------------
/static/vue-file-uploader.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alijahanpak/vue-file-uploader/HEAD/static/vue-file-uploader.png


--------------------------------------------------------------------------------
/assets/variables.scss:
--------------------------------------------------------------------------------
1 | // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
2 | //
3 | // The variables you want to modify
4 | // $font-size-root: 20px;
5 | 


--------------------------------------------------------------------------------
/content/doc.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Why I don't care about the starbucks cup in Game of Thrones
3 | ---
4 | 
5 | Hey Everyone, this is simple a test blog post to show you
6 | the functionality of nuxt markdown blog.
7 | 
8 | ---
9 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     "env": {
 3 |         "browser": true,
 4 |         "es2021": true
 5 |     },
 6 |     "extends": [
 7 |         "eslint:recommended",
 8 |         "plugin:vue/essential"
 9 |     ],
10 |     "parserOptions": {
11 |         "ecmaVersion": 12,
12 |         "sourceType": "module"
13 |     },
14 |     "plugins": [
15 |         "vue"
16 |     ],
17 |     "rules": {
18 |     }
19 | };
20 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/vuetify-logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2018",
 4 |     "module": "esnext",
 5 |     "moduleResolution": "node",
 6 |     "lib": [
 7 |       "esnext",
 8 |       "esnext.asynciterable",
 9 |       "dom"
10 |     ],
11 |     "esModuleInterop": true,
12 |     "allowJs": true,
13 |     "sourceMap": true,
14 |     "strict": true,
15 |     "noEmit": true,
16 |     "experimentalDecorators": true,
17 |     "baseUrl": ".",
18 |     "paths": {
19 |       "~/*": [
20 |         "./*"
21 |       ],
22 |       "@/*": [
23 |         "./*"
24 |       ]
25 |     },
26 |     "types": [
27 |       "@types/node",
28 |       "@nuxt/types"
29 |     ]
30 |   },
31 |   "exclude": [
32 |     "node_modules",
33 |     ".nuxt",
34 |     "dist"
35 |   ]
36 | }
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-file-uploader",
 3 |   "version": "1.1.1",
 4 |   "description": "Complete and simple file uploader with image compressor in Vue.js. ",
 5 |   "author": "Ali Jahanapak",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt-ts",
 9 |     "build": "nuxt-ts build",
10 |     "start": "nuxt-ts start",
11 |     "generate": "nuxt-ts generate"
12 |   },
13 |   "dependencies": {
14 |     "@nuxt/typescript-runtime": "^0.4.8",
15 |     "@nuxtjs/markdownit": "^1.2.9",
16 |     "highlightjs": "^9.16.2",
17 |     "markdown-it": "^11.0.0",
18 |     "markdown-it-attrs": "^3.0.3",
19 |     "markdown-it-div": "^1.1.0",
20 |     "nuxt": "^2.15.4"
21 |   },
22 |   "devDependencies": {
23 |     "@nuxt/typescript-build": "^0.6.7",
24 |     "@nuxtjs/vuetify": "^1.0.0",
25 |     "eslint": "^7.23.0",
26 |     "eslint-plugin-vue": "^7.8.0"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![vue-file-uploader](https://img.techpowerup.org/200626/vue-file-uploader038.png)
 2 | 
 3 | 
 4 | # vue-file-uploader
 5 | 
 6 | > Complete and simple file uploader with image compressor in Vue.js
 7 | 
 8 | + Choice Theme : Thumbnail, Simple, Table
 9 | + Add custom fields (Title, Description, Tags, ...)
10 | + Image compressor
11 | + Select level for Image compressor
12 | + Mange file extensions
13 | + Manage files count
14 | + Manage files size
15 | + Multi languages support
16 | + Add custom language
17 | + Right to left support
18 | + Multi file upload
19 | + Responsive
20 | + ...
21 | 
22 | ## Examples
23 | - [Demo](https://friendly-varahamihira-45c09f.netlify.app)
24 | 
25 | ## Documentation
26 | - [Documentation](https://friendly-varahamihira-45c09f.netlify.app/documentation)
27 | 
28 | ## Install
29 | ```bash
30 | # install 
31 | $ npm install handy-uploader
32 | 
33 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app dark>
 3 |     <h1 v-if="error.statusCode === 404">
 4 |       {{ pageNotFound }}
 5 |     </h1>
 6 |     <h1 v-else>
 7 |       {{ otherError }}
 8 |     </h1>
 9 |     <NuxtLink to="/">
10 |       Home page
11 |     </NuxtLink>
12 |   </v-app>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   layout: 'empty',
18 |   props: {
19 |     error: {
20 |       type: Object,
21 |       default: null
22 |     }
23 |   },
24 |   data () {
25 |     return {
26 |       pageNotFound: '404 Not Found',
27 |       otherError: 'An error occurred'
28 |     }
29 |   },
30 |   head () {
31 |     const title =
32 |       this.error.statusCode === 404 ? this.pageNotFound : this.otherError
33 |     return {
34 |       title
35 |     }
36 |   }
37 | }
38 | </script>
39 | 
40 | <style scoped>
41 | h1 {
42 |   font-size: 20px;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 ali jahanpak
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/components/InsertButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <template v-if="badgeCounter">
 4 |       <template v-if="documentAttachment.length > 0">
 5 |         <v-badge
 6 |           bordered
 7 |           :color="documentAttachment.length === maxFileCount ? 'error' : 'success'"
 8 |           overlap
 9 |           :content="documentAttachment.length"
10 |         >
11 |           <v-btn :color="btnColor" @click="openInputDocumentModal" class="mb-4"> {{selectedLang[lang].insertFile}} </v-btn>
12 |         </v-badge>
13 |       </template>
14 |       <template v-else>
15 |         <v-btn :color="btnColor" @click="openInputDocumentModal" class="mb-4"> {{selectedLang[lang].insertFile}} </v-btn>
16 |       </template>
17 |     </template>
18 |     <template v-if="!badgeCounter">
19 |       <v-btn :color="btnColor" @click="openInputDocumentModal" class="mb-4"> {{selectedLang[lang].insertFile}} </v-btn>
20 |     </template>
21 |   </div>
22 |     
23 | </template>
24 | 
25 | <script>
26 |   export default {
27 |     props: {
28 |       documentAttachment: [Array],
29 |       badgeCounter: {
30 |         type: Boolean,
31 |         default: true
32 |       },
33 |       btnColor: {
34 |         type: String,
35 |         default: 'info'
36 |       },
37 |       lang: {
38 |         type: String,
39 |         default: 'en'
40 |       },
41 |       maxFileCount: {
42 |         type: Number,
43 |         default: 0
44 |       },
45 |       selectedLang: {},
46 |     },
47 |     data: () => ({}),
48 |     methods: {
49 |       openInputDocumentModal() {
50 |         this.$emit('openInputDocumentModal')
51 |       },
52 |     }
53 |   }
54 | </script>
55 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <v-app-bar
 4 |       :clipped-left="clipped"
 5 |       fixed
 6 |       app
 7 |     >
 8 |       <v-btn
 9 |         icon
10 |         @click.stop="fixed = !fixed"
11 |       >
12 |         <v-icon v-if="!themeMod" @click="changeThemeMod">mdi-white-balance-sunny</v-icon>
13 |         <v-icon v-else @click="changeThemeMod">mdi-weather-night </v-icon>
14 |       </v-btn>
15 |       <v-toolbar-title v-text="title" />
16 |       <v-spacer />
17 |       <v-btn small to="/documentation" text>
18 |         Documentation
19 |       </v-btn>
20 | 
21 |       <v-btn small to="/" text>
22 |         Examples
23 |       </v-btn>
24 | 
25 |       <v-btn small href="https://github.com/alijahanpak/handy-uploader" target="_blank" text>
26 |         <v-icon>mdi-github</v-icon> Github
27 |       </v-btn>
28 | 
29 |     </v-app-bar>
30 |     <v-main>
31 |       <v-container fluid>
32 |         <nuxt />
33 |       </v-container>
34 |     </v-main>
35 |     <v-footer
36 |       :fixed="fixed"
37 |       app
38 |     >
39 |       <span>&copy; {{ new Date().getFullYear() }} - MIT License</span>
40 |     </v-footer>
41 |   </v-app>
42 | </template>
43 | 
44 | <script>
45 | export default {
46 |   data () {
47 |     return {
48 |       clipped: false,
49 |       drawer: false,
50 |       fixed: false,
51 |       themeMod: false,
52 |       miniVariant: false,
53 |       right: true,
54 |       rightDrawer: false,
55 |       title: 'Handy Uploader'
56 |     }
57 |   },
58 |   methods: {
59 |     changeThemeMod (){
60 |       this.themeMod = !this.themeMod;
61 |       this.$vuetify.theme.dark= this.themeMod;
62 |     }
63 |   },
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/components/SelectFileIconType.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <v-icon  v-if="format === 'pdf'" :size="size" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 4 |     <v-icon  v-else-if="fileFormat === 'doc' || fileFormat === 'docx' || fileFormat === 'odt'" :size="size" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 5 |     <v-icon  v-else-if="fileFormat === 'jpg' || fileFormat === 'jpeg' || fileFormat === 'png' || fileFormat === 'tif' || fileFormat === 'bmp'" :size="size" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 6 |     <v-icon  v-else-if="fileFormat === 'xls' || fileFormat === 'xlsx'" :size="size" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 7 |     <v-icon  v-else-if="fileFormat === 'pptx' || fileFormat === 'pptm' || fileFormat === 'ppt'" :size="size" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 8 |     <v-icon  v-else-if="fileFormat === 'mp4' || fileFormat === 'mov' || fileFormat === 'flv' || fileFormat === 'wmv' || fileFormat === 'avi'" :size="size" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 9 |     <v-icon  v-else-if="fileFormat === 'dwg' " :size="size" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
10 |     <v-icon  v-else-if="fileFormat === 'zip' || fileFormat === 'rar' || fileFormat === '7-zip'   " :size="size" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
11 |     <v-icon  v-else-if="fileFormat === 'txt' " :size="size" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
12 |     <v-icon  v-else :size="size" file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
13 |   </div>
14 |     
15 | </template>
16 | 
17 | <script>
18 |   export default {
19 |     props: {
20 |       fileFormat: {
21 |         type: String,
22 |         default: ''
23 |       },
24 |       size: {
25 |         type: Number,
26 |         default: 30
27 |       },
28 |     },
29 |   }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-container>
 3 |     <v-row class="section-height" align="center" justify="center">
 4 |       <v-col cols="12" lg="12" md="12" xs="12" align="center">
 5 |         <v-img src="vue-file-uploader.png" width="200" height="200" class="text-center"></v-img>
 6 |         <div class="text-center">
 7 |           <p style="color: #424242; font-size: 3rem">Handy Uploader</p>
 8 |           <p style="color: #757575; font-size: 1.5rem">Complete and simple file uploader with image compressor in Vue.js</p>
 9 |         </div>
10 |         <v-col cols="12" lg="12" md="12" xs="12">
11 |           <div class="text-center ma-2">
12 |             <v-chip
13 |               large
14 |               class="ma-2"
15 |               color="green darken-1"
16 |               label
17 |               text-color="white"
18 |               to="/thumbnail"
19 |             >
20 |               <v-icon left>mdi-image-plus</v-icon>
21 |               Thumbnail File Uploader
22 |             </v-chip>
23 | 
24 |             <v-chip
25 |               large
26 |               class="ma-2"
27 |               color="green darken-1"
28 |               label
29 |               text-color="white"
30 |               to="/simple"
31 |             >
32 |               <v-icon left>mdi-file-upload</v-icon>
33 |               Simple File Uploader
34 |             </v-chip>
35 | 
36 |             <v-chip
37 |               large
38 |               class="ma-2 text-center"
39 |               color="green darken-1"
40 |               label
41 |               text-color="white"
42 |               to="/table"
43 |             >
44 |               <v-icon left>mdi-table</v-icon>
45 |               Table File Uploader
46 |             </v-chip>
47 |           </div>
48 |         </v-col>
49 |       </v-col>
50 |     </v-row>
51 |   </v-container>
52 | </template>
53 | 
54 | <script>
55 | export default {
56 |   components: {
57 |   },
58 |   data: () => ({
59 | 
60 |   }),
61 |   methods:{
62 | 
63 |   },
64 | }
65 | </script>
66 | 
67 | <style scoped lang="scss">
68 |   .section-height {
69 |     height: calc(80vh)
70 |   }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
  1 | import colors from 'vuetify/es5/util/colors'
  2 | import hljs from 'highlight.js';
  3 | 
  4 | export default {
  5 |   mode: 'spa',
  6 |   /*
  7 |   ** Headers of the page
  8 |   */
  9 |   generate: {
 10 |     fallback: true
 11 |   },
 12 |   head: {
 13 |     titleTemplate: 'Handy Uploader',
 14 |     title: process.env.npm_package_name || '',
 15 |     meta: [
 16 |       { charset: 'utf-8' },
 17 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 18 |       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
 19 |     ],
 20 |     link: [
 21 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
 22 |     ]
 23 |   },
 24 |   /*
 25 |   ** Customize the progress-bar color
 26 |   */
 27 |   loading: { color: '#fff' },
 28 |   /*
 29 |   ** Global CSS
 30 |   */
 31 |   css: [
 32 |     'highlight.js/styles/github.css'
 33 |   ],
 34 |   /*
 35 |   ** Plugins to load before mounting the App
 36 |   */
 37 |   plugins: [
 38 |   ],
 39 |   /*
 40 |   ** Nuxt.js dev-modules
 41 |   */
 42 |   buildModules: [
 43 |     '@nuxt/typescript-build',
 44 |     '@nuxtjs/vuetify',
 45 |     '@nuxtjs/markdownit',
 46 |   ],
 47 | 
 48 |   markdownit: {
 49 |     highlight: function (str, lang) {
 50 |       if (lang && hljs.getLanguage(lang)) {
 51 |         try {
 52 |           return '<pre style="margin: 20px;" class="hljs"><code style="box-shadow: none !important;background-color: #F8F8F8;padding-top: 8px;font-weight: 100;">' +
 53 |             hljs.highlight(lang, str, true).value +
 54 |             '</code></pre>';
 55 |         } catch (__) {}
 56 |       }
 57 | 
 58 |       return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
 59 |     }
 60 |   },
 61 |   /*
 62 |   ** Nuxt.js modules
 63 |   */
 64 |   modules: [
 65 |     // Doc: https://axios.nuxtjs.org/usage
 66 |   ],
 67 |   /*
 68 |   ** Axios module configuration
 69 |   ** See https://axios.nuxtjs.org/options
 70 |   */
 71 |   axios: {
 72 |   },
 73 |   /*
 74 |   ** vuetify module configuration
 75 |   ** https://github.com/nuxt-community/vuetify-module
 76 |   */
 77 |   vuetify: {
 78 |     customVariables: ['~/assets/variables.scss'],
 79 |     theme: {
 80 |       themes: {
 81 |         dark: {
 82 |           primary: colors.blue.darken2,
 83 |           accent: colors.grey.darken3,
 84 |           secondary: colors.amber.darken3,
 85 |           info: colors.teal.lighten1,
 86 |           warning: colors.amber.base,
 87 |           error: colors.deepOrange.accent4,
 88 |           success: colors.green.accent3
 89 |         }
 90 |       }
 91 |     }
 92 |   },
 93 |   /*
 94 |   ** Build configuration
 95 |   */
 96 |   build: {
 97 |     /*
 98 |     ** You can extend webpack config here
 99 |     */
100 | 
101 |     extend (config, ctx) {
102 | 
103 |     }
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/components/language.js:
--------------------------------------------------------------------------------
  1 | export default{
  2 |   en:{
  3 |     insertFile: 'Insert File',
  4 |     insertNewFile: 'Insert New File',
  5 |     add: 'Add',
  6 |     delete: 'Delete',
  7 |     edit: 'Edit',
  8 |     deleteDialog:{
  9 |       message: 'Are you sure you want to delete the file?',
 10 |       cancel: 'cancel',
 11 |     },
 12 |     table:{
 13 |       thumb: 'Thumb',
 14 |       name: 'Name',
 15 |       size: 'Size',
 16 |       tags: 'tags',
 17 |       action:{
 18 |         action: 'Action',
 19 |         deleteTooltip: 'Delete'
 20 |       }
 21 |     },
 22 |     size:{
 23 |       kb: 'KB',
 24 |       mb: 'MB',
 25 |     },
 26 |     maxFileSizeAlert: 'Max file Size is',
 27 |     maxFileCountAlert: 'Max file Count is',
 28 |     fileName: 'File Name',
 29 |     fileDescription: 'File Description',
 30 |     fileTags: 'File Tags',
 31 |   },
 32 |   fa:{
 33 |     insertFile: 'افزودن فایل',
 34 |     insertNewFile: 'افزودن فایل جدید',
 35 |     add: 'افزودن',
 36 |     delete: 'حذف',
 37 |     edit: 'ویرایش',
 38 |     deleteDialog:{
 39 |       message: 'آیا برای حذف فایل اطمینان دارید؟',
 40 |       cancel: 'لغو',
 41 |     },
 42 |     table:{
 43 |       thumb: 'پیش نمایش',
 44 |       name: 'نام',
 45 |       size: 'حجم',
 46 |       action:{
 47 |         action: 'عملیات',
 48 |         deleteTooltip: 'حذف'
 49 |       }
 50 |     },
 51 |     size:{
 52 |       kb: 'کیلو بایت',
 53 |       mb: 'مگابایت'
 54 |     },
 55 |     maxSizeAlert: 'حداکثر حجم فایل انتحابی ',
 56 |     maxFileCountAlert: 'حداکثر تعداد فایل انتخابی',
 57 |     fileName: 'نام فایل',
 58 |     fileDescription: 'توضیحات فایل',
 59 |     fileTags: 'برچسب فایل',
 60 |   },
 61 |   fr:{
 62 |     insertFile: 'Insérer un fichier',
 63 |     insertNewFile: 'Insérer un nouveau fichier',
 64 |     add: 'Ajouter',
 65 |     delete: 'Supprimer',
 66 |     edit: 'Éditer',
 67 |     deleteDialog:{
 68 |       message: 'Voulez-vous vraiment supprimer le fichier?',
 69 |       cancel: 'Annuler',
 70 |     },
 71 |     table:{
 72 |       thumb: 'la vignette',
 73 |       name: 'Nom',
 74 |       size: 'Taille',
 75 |       action:{
 76 |         action: 'Action',
 77 |         deleteTooltip: 'Supprimer'
 78 |       }
 79 |     },
 80 |     size:{
 81 |       kb: 'KB',
 82 |       mb: 'MB',
 83 |     },
 84 |     maxSizeAlert: 'La taille maximale du fichier est',
 85 |     maxFileCountAlert: 'Le nombre maximal de fichiers est',
 86 |     fileName: 'Nom de fichier',
 87 |     fileDescription: 'description du fichier',
 88 |     fileTags: 'Balises de fichier',
 89 |   },
 90 |   ch:{
 91 |     insertFile: '插入档案',
 92 |     insertNewFile: '插入新文件',
 93 |     add: '加',
 94 |     delete: '删除',
 95 |     edit: '编辑',
 96 |     deleteDialog:{
 97 |       message: '您确定要删除文件吗?',
 98 |       cancel: '取消',
 99 |     },
100 |     table:{
101 |       thumb: '缩图',
102 |       name: '名称',
103 |       size: '尺寸',
104 |       action:{
105 |         action: '行动',
106 |         deleteTooltip: '删除'
107 |       }
108 |     },
109 |     size:{
110 |       kb: 'KB',
111 |       mb: 'MB',
112 |     },
113 |     maxSizeAlert: '档案大小上限为',
114 |     maxFileCountAlert: '现“最大文件数”为',
115 |     fileName: '文档名称',
116 |     fileDescription: '文件描述',
117 |     fileTags: '文件标签',
118 |   },
119 |   ar:{
120 |     insertFile: 'إدراج ملف',
121 |     insertNewFile: 'إدراج ملف جديد',
122 |     add: 'أضف',
123 |     delete: 'حذف',
124 |     edit: 'تعديل',
125 |     deleteDialog:{
126 |       message: 'هل أنت متأكد أنك تريد حذف الملف؟',
127 |       cancel: 'إلغاء',
128 |     },
129 |     table:{
130 |       thumb: 'ظفري',
131 |       name: 'اسم',
132 |       size: 'بحجم',
133 |       action:{
134 |         action: 'عمل',
135 |         deleteTooltip: 'حذف'
136 |       }
137 |     },
138 |     size:{
139 |       kb: 'کیلو بایت',
140 |       mb: 'ميغا بايت'
141 |     },
142 |     maxSizeAlert: 'الحجم الأقصى للملف هو',
143 |     maxFileCountAlert: 'الحد الأقصى لعدد الملفات هو',
144 |     fileName: 'اسم الملف',
145 |     fileDescription: 'وصف الملف',
146 |     fileTags: 'علامات الملف',
147 |   },
148 | }
149 | 


--------------------------------------------------------------------------------
/pages/documentation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container fluid>
  3 |     <v-row>
  4 |         <v-navigation-drawer
  5 |           fixed
  6 |           app
  7 |           width="300"
  8 |         >
  9 |           <v-list expand>
 10 |               <v-list-group
 11 |                 no-action
 12 |                 sub-group
 13 |                 value="true"
 14 |               >
 15 |                 <template v-slot:activator>
 16 |                   <v-list-item-content>
 17 |                     <v-list-item-title>Getting Started</v-list-item-title>
 18 |                   </v-list-item-content>
 19 |                 </template>
 20 | 
 21 |                 <v-list-item
 22 |                   v-for="(gs, i) in gettingStart"
 23 |                   :key="i"
 24 |                   link
 25 |                 >
 26 |                   <v-list-item-title style="font-size: 0.9em" @click="$vuetify.goTo(gs[1])" v-text="gs[0]"></v-list-item-title>
 27 |                 </v-list-item>
 28 |             </v-list-group>
 29 | 
 30 |             <v-list-group
 31 |               sub-group
 32 |               no-action
 33 |             >
 34 |               <template v-slot:activator>
 35 |                 <v-list-item-content>
 36 |                   <v-list-item-title>Props</v-list-item-title>
 37 |                 </v-list-item-content>
 38 |               </template>
 39 |               <v-list-item
 40 |                 v-for="(prop, i) in props"
 41 |                 :key="i"
 42 |                 link
 43 |               >
 44 |                 <v-list-item-title style="font-size: 0.9em" @click="$vuetify.goTo(prop[1])" v-text="prop[0]"></v-list-item-title>
 45 |               </v-list-item>
 46 |             </v-list-group>
 47 | 
 48 |             <v-list-group
 49 |               sub-group
 50 |               no-action
 51 |             >
 52 |               <template v-slot:activator>
 53 |                 <v-list-item-content>
 54 |                   <v-list-item-title>Code Examples</v-list-item-title>
 55 |                 </v-list-item-content>
 56 |               </template>
 57 |               <v-list-item
 58 |                 v-for="(example, i) in examples"
 59 |                 :key="i"
 60 |                 link
 61 |               >
 62 |                 <v-list-item-title style="font-size: 0.9em" @click="$vuetify.goTo(example[1])" v-text="example[0]"></v-list-item-title>
 63 |               </v-list-item>
 64 |             </v-list-group>
 65 |           </v-list>
 66 |         </v-navigation-drawer>
 67 |       <v-col cols="12" lg="12" md="12" xs="12">
 68 |         <p class="header">Getting Started</p>
 69 |         <v-divider></v-divider>
 70 |         <v-row>
 71 |           <v-col cols="12" lg="12" md="12" xs="12">
 72 |             <template>
 73 |               <div v-html="readme"></div>
 74 |             </template>
 75 |           </v-col>
 76 |         </v-row>
 77 |       </v-col>
 78 |     </v-row>
 79 |     <v-fab-transition>
 80 |       <v-btn
 81 |         v-scroll="onScroll"
 82 |         v-show="showScrollToTop"
 83 |         fab
 84 |         dark
 85 |         fixed
 86 |         bottom
 87 |         right
 88 |         color="primary"
 89 |         @click="$vuetify.goTo(0)"
 90 |       >
 91 |         <v-icon>mdi-chevron-up</v-icon>
 92 |       </v-btn>
 93 |     </v-fab-transition>
 94 |   </v-container>
 95 | </template>
 96 | 
 97 | <script>
 98 | import readme from './README.md'
 99 | export default {
100 |   data: () => ({
101 |     panelHeight: 0,
102 |     offsetTop: 0,
103 |     gettingStart: [
104 |       ['Install', 625],
105 |       ['Setup', 1260],
106 |     ],
107 |     props: [
108 |       ['documentAttachment', 2430],
109 |       ['fileUploaderType', 3210],
110 |       ['cardType', 3950],
111 |       ['fileAccept', 4360],
112 |       ['imageCompressor', 4750],
113 |       ['imageCompressLevel', 5120],
114 |       ['maxFileSize', 5530],
115 |       ['maxFileCount', 5890],
116 |       ['thumb', 6310],
117 |       ['tableThumbColumn', 6680],
118 |       ['tableFixedHeader', 7060],
119 |       ['tableHeight', 7420],
120 |       ['badgeCounter', 7810],
121 |       ['rtlSupport', 8180],
122 |       ['lang', 8550],
123 |       ['customLang', 8960],
124 |       ['btnColor', 10410],
125 |       ['changeFileName', 10780],
126 |       ['addFileDescription', 11160],
127 |       ['addFileTag', 11540],
128 |       ['tags', 11900],
129 |       ['cols', 12260],
130 |       ['editPermission', 12600],
131 |       ['deletePermission', 12980],
132 |     ],
133 |     examples: [
134 |       ['Thumbnail', 13380],
135 |       ['Simple', 14280],
136 |       ['Table', 15140]
137 |     ],
138 |   }),
139 |   computed: {
140 |     readme() {
141 |       return readme
142 |     },
143 |     showScrollToTop() {
144 |       return this.offsetTop > 60;
145 |     }
146 |   },
147 |   watch: {
148 | 
149 |   },
150 |   mounted() {
151 |     this.onResize();
152 |   },
153 |   methods:{
154 |     onResize () {
155 |       window.addEventListener('resize', this.onResize);
156 |       this.panelHeight = window.innerHeight - 150;
157 |     },
158 |     onScroll() {
159 |       this.offsetTop = window.pageYOffset || document.documentElement.scrollTop;
160 |     }
161 |   },
162 | }
163 | </script>
164 | <style scoped>
165 |   .header{
166 |     color: #263238;
167 |     font-size: 2rem;
168 |   }
169 |   .title{
170 |     margin: 15px;
171 |     color: #263238;
172 |     font-size: 1.5rem;
173 |   }
174 |   .sub-link{
175 |     margin-left: 10px;
176 |   }
177 |   code{
178 |     box-shadow: none !important;
179 |   }
180 |   .x-btn-inner {
181 |     text-transform: none !important;
182 |   }
183 | </style>
184 | 


--------------------------------------------------------------------------------
/components/TableUploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-row>
  4 |       <v-col cols="12" lg="12" md="12" xs="12">
  5 |         <v-simple-table :fixed-header="tableFixedHeader" :height="tableHeight + 'px'">
  6 |           <template v-slot:default>
  7 |             <thead>
  8 |             <tr>
  9 |               <th v-if="tableThumbColumn" class="text-left">{{selectedLang[lang].table.thumb}}</th>
 10 |               <th class="text-left">{{selectedLang[lang].table.name}}</th>
 11 |               <th class="text-left">{{selectedLang[lang].table.size}}</th>
 12 |               <th class="text-left">{{selectedLang[lang].table.action.action}}</th>
 13 |             </tr>
 14 |             </thead>
 15 |             <tbody>
 16 |             <tr v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`">
 17 |               <td v-if="tableThumbColumn">
 18 |                 <template v-if="attachment.file.name.split('.').pop().toLowerCase() == 'jpg' || attachment.file.name.split('.').pop().toLowerCase() == 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() == 'png' || attachment.file.name.split('.').pop().toLowerCase() == 'tif' || attachment.file.name.split('.').pop().toLowerCase() == 'bmp'">
 19 |                   <v-img
 20 |                     v-if="thumb"
 21 |                     style="margin: 10px"
 22 |                     :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64 "
 23 |                     height="50px"
 24 |                     width="50px"
 25 |                   ></v-img>
 26 |                   <v-icon v-else  style="margin-left: 10px" size="50" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 27 |                 </template>
 28 |                 <template v-else>
 29 |                   <v-icon  v-if="attachment.file.name.split('.').pop().toLowerCase() === 'pdf'" style="margin-left: 10px" size="50" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 30 |                   <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'doc' || attachment.file.name.split('.').pop().toLowerCase() === 'docx' || attachment.file.name.split('.').pop().toLowerCase() === 'odt'"  style="margin-left: 10px" size="50" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 31 |                   <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'xls' || attachment.file.name.split('.').pop().toLowerCase() === 'xlsx'"  style="margin-left: 10px" size="50" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 32 |                   <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'pptx' || attachment.file.name.split('.').pop().toLowerCase() === 'pptm' || attachment.file.name.split('.').pop().toLowerCase() === 'ppt'"  style="margin-left: 10px" size="50" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 33 |                   <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'mp4' || attachment.file.name.split('.').pop().toLowerCase() === 'mov' || attachment.file.name.split('.').pop().toLowerCase() === 'flv' || attachment.file.name.split('.').pop().toLowerCase() === 'wmv' || attachment.file.name.split('.').pop().toLowerCase() === 'avi'"  style="margin-left: 10px" size="50" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 34 |                   <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'dwg' "  style="margin-left: 10px" size="50" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 35 |                   <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'zip' || attachment.file.name.split('.').pop().toLowerCase() === 'rar' || attachment.file.name.split('.').pop().toLowerCase() === '7-zip'   " size="120" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 36 |                   <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'txt' "  style="margin-left: 10px" size="50" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 37 |                   <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 38 |                 </template>
 39 |               </td>
 40 |               <td>{{ attachment.file.name }}</td>
 41 |               <td>
 42 |                 <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024" class="mt2">
 43 |                   <v-chip
 44 |                     color="teal lighten-2"
 45 |                     label
 46 |                     text-color="white"
 47 |                   >
 48 |                     {{  Number((attachment.file.size / 1000).toFixed(1)) + selectedLang[lang].size.kb}}
 49 |                     <v-icon right>mdi-harddisk</v-icon>
 50 |                   </v-chip>
 51 |                 </v-card-subtitle>
 52 |                 <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
 53 |                   <v-chip
 54 |                     color="teal lighten-2"
 55 |                     label
 56 |                     text-color="white"
 57 |                   >
 58 |                     {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) + selectedLang[lang].size.mb}}
 59 |                     <v-icon right>mdi-harddisk</v-icon>
 60 |                   </v-chip>
 61 |                 </v-card-subtitle>
 62 |               </td>
 63 |               <td>
 64 |                 <v-tooltip top>
 65 |                   <template v-slot:activator="{ on }">
 66 |                     <v-btn v-if="deletePermission" icon color="red" v-on="on" @click="openDeleteDialog(index , '')" ><v-icon>mdi-delete</v-icon></v-btn>
 67 |                   </template>
 68 |                   <span>{{selectedLang[lang].table.action.deleteTooltip}}</span>
 69 |                 </v-tooltip>
 70 |                 <v-tooltip top>
 71 |                   <template v-slot:activator="{ on }">
 72 |                     <v-btn v-if="editPermission" text fab v-on="on"  @click="openEditDocumentDialog(attachment, index)"><v-icon color="green">mdi-pencil-outline</v-icon></v-btn>
 73 |                   </template>
 74 |                   <span class="BYekan">{{selectedLang[lang].edit}}</span>
 75 |                 </v-tooltip>
 76 |               </td>
 77 |             </tr>
 78 |             </tbody>
 79 |           </template>
 80 |         </v-simple-table>
 81 |       </v-col>
 82 |     </v-row>
 83 |   </div>
 84 |     
 85 | </template>
 86 | 
 87 | <script>
 88 |   export default {
 89 |     props: {
 90 |       documentAttachment: [Array],
 91 |       thumb: {
 92 |         type: Boolean,
 93 |         default: true
 94 |       },
 95 |       lang: {
 96 |         type: String,
 97 |         default: 'en'
 98 |       },
 99 |       cols: {
100 |         type: Number,
101 |         default: 4
102 |       },
103 |       editPermission: {
104 |         type: Boolean,
105 |         default: true
106 |       },
107 |       deletePermission: {
108 |         type: Boolean,
109 |         default: true
110 |       },
111 |       tableThumbColumn: Boolean,
112 |       tableFixedHeader: {
113 |         type: Boolean,
114 |         default: true
115 |       },
116 |       tableHeight: {
117 |         type: Number,
118 |         default: 400
119 |       },
120 |       selectedLang: {},
121 |     },
122 |     data: () => ({}),
123 |     methods: {
124 |       setCardTheme() {
125 |         this.$emit('setCardTheme')
126 |       },
127 |       openDeleteDialog(index, deleteId) {
128 |         this.$emit('openDeleteDialog', index, deleteId)
129 |       },
130 |       openEditDocumentDialog(item, index) {
131 |         this.$emit('openEditDocumentDialog', item, index)
132 |       },
133 |     }
134 |   }
135 | </script>
136 | 


--------------------------------------------------------------------------------
/components/ThumbnailUploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-row>
  4 |       <v-col v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`" cols="12" md="4" xs="12">
  5 |         <v-card
  6 |           :shaped="shaped"
  7 |           :outlined="outlined"
  8 |           :raised="raised"
  9 |           :tile="tile"
 10 |           class="mx-auto"
 11 |           max-width="344"
 12 |         >
 13 |           <template v-if="attachment.file.name.split('.').pop().toLowerCase() === 'jpg' || attachment.file.name.split('.').pop().toLowerCase() === 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() === 'png' || attachment.file.name.split('.').pop().toLowerCase() === 'tif' || attachment.file.name.split('.').pop().toLowerCase() === 'bmp'">
 14 |           <v-img
 15 |             :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64"
 16 |             height="200px"
 17 |           ></v-img>
 18 |           </template>
 19 |           <template v-else>
 20 |             <v-list-item-avatar
 21 |               style="margin-top: 0"
 22 |               tile
 23 |               width="345"
 24 |               height="192"
 25 |               color="blue-grey lighten-5"
 26 |             >
 27 |               <template>
 28 |                 <v-icon  v-if="attachment.file.name.split('.').pop().toLowerCase() === 'pdf'" size="120" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 29 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'doc' || attachment.file.name.split('.').pop().toLowerCase() === 'docx' || attachment.file.name.split('.').pop().toLowerCase() === 'odt'" size="120" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 30 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'xls' || attachment.file.name.split('.').pop().toLowerCase() === 'xlsx'" size="120" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 31 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'pptx' || attachment.file.name.split('.').pop().toLowerCase() === 'pptm' || attachment.file.name.split('.').pop().toLowerCase() === 'ppt'" size="120" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 32 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'mp4' || attachment.file.name.split('.').pop().toLowerCase() === 'mov' || attachment.file.name.split('.').pop().toLowerCase() === 'flv' || attachment.file.name.split('.').pop().toLowerCase() === 'wmv' || attachment.file.name.split('.').pop().toLowerCase() === 'avi'" size="120" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 33 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'dwg' " size="120" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 34 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'zip' || attachment.file.name.split('.').pop().toLowerCase() === 'rar' || attachment.file.name.split('.').pop().toLowerCase() === '7-zip'   " size="120" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 35 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'txt' " size="120" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 36 |                 <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 37 |               </template>
 38 |             </v-list-item-avatar>
 39 |           </template>
 40 | 
 41 |           <v-card-subtitle style="height: 70px">
 42 |             {{attachment.file.name}}
 43 |           </v-card-subtitle>
 44 |           <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024" class="mt2">
 45 |             <v-chip
 46 |               color="teal lighten-2"
 47 |               label
 48 |               text-color="white"
 49 |             >
 50 |               {{  Number((attachment.file.size / 1000).toFixed(1)) +'  '+ selectedLang[lang].size.kb}}
 51 |               <v-icon right>mdi-harddisk</v-icon>
 52 |             </v-chip>
 53 |           </v-card-subtitle>
 54 |           <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
 55 |             <v-chip
 56 |               color="teal lighten-2"
 57 |               label
 58 |               text-color="white"
 59 |             >
 60 |               {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) +'  '+ selectedLang[lang].size.mb}}
 61 |               <v-icon right>mdi-harddisk</v-icon>
 62 |             </v-chip>
 63 |           </v-card-subtitle>
 64 |           <v-divider
 65 |             class="mx-4"
 66 |           ></v-divider>
 67 |           <v-spacer></v-spacer>
 68 |           <v-card-actions style="padding: 0">
 69 |             <v-tooltip right>
 70 |               <template v-slot:activator="{ on }">
 71 |                 <v-btn v-if="deletePermission" text fab v-on="on"  @click="openDeleteDialog(index , '')"><v-icon color="red">mdi-trash-can-outline</v-icon></v-btn>
 72 |               </template>
 73 |               <span class="BYekan">{{selectedLang[lang].delete}}</span>
 74 |             </v-tooltip>
 75 |             <v-tooltip right>
 76 |               <template v-slot:activator="{ on }">
 77 |                 <v-btn v-if="editPermission" text fab v-on="on"  @click="openEditDocumentDialog(attachment, index)"><v-icon color="green">mdi-pencil-outline</v-icon></v-btn>
 78 |               </template>
 79 |               <span class="BYekan">{{selectedLang[lang].edit}}</span>
 80 |             </v-tooltip>
 81 | 
 82 |             <v-spacer></v-spacer>
 83 | 
 84 |             <v-btn
 85 |               v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''"
 86 |               icon
 87 |               @click.prevent="attachment.file.showDetailState = !attachment.file.showDetailState"
 88 |             >
 89 |               <v-icon>{{ attachment.file.showDetailState ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
 90 |             </v-btn>
 91 |           </v-card-actions>
 92 | 
 93 |           <v-expand-transition>
 94 |             <template v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''">
 95 |               <div v-show="attachment.file.showDetailState">
 96 |                 <v-divider></v-divider>
 97 |                 <v-chip-group
 98 |                   v-if="attachment.file.tags.length > 0"
 99 |                   multiple
100 |                   active-class="primary--text"
101 |                   style="padding: 8px"
102 |                 >
103 |                   <v-chip v-for="(tag,index) in attachment.file.tags" :key="`attachment-${index}`" style="margin: 5px">
104 |                     {{tag}}
105 |                   </v-chip>
106 |                 </v-chip-group>
107 |                 <v-card-text v-if="attachment.file.description != null" style="text-align: justify">
108 |                   {{attachment.file.description}}
109 |                 </v-card-text>
110 |               </div>
111 |             </template>
112 |           </v-expand-transition>
113 | 
114 |         </v-card>
115 |       </v-col>
116 |     </v-row>
117 |   </div>
118 |     
119 | </template>
120 | 
121 | <script>
122 |   export default {
123 |     props: {
124 |       documentAttachment: [Array],
125 |       thumb: {
126 |         type: Boolean,
127 |         default: true
128 |       },
129 |       lang: {
130 |         type: String,
131 |         default: 'en'
132 |       },
133 |       cols: {
134 |         type: Number,
135 |         default: 4
136 |       },
137 |       editPermission: {
138 |         type: Boolean,
139 |         default: true
140 |       },
141 |       cardType: String,
142 |       outlined: Boolean,
143 |       raised: Boolean,
144 |       shaped: Boolean,
145 |       tile: Boolean,
146 |       deletePermission: {
147 |         type: Boolean,
148 |         default: true
149 |       },
150 |       selectedLang: {},
151 |     },
152 |     data: () => ({}),
153 |     methods: {
154 |       setCardTheme() {
155 |         this.$emit('setCardTheme')
156 |       },
157 |       openDeleteDialog(index, deleteId) {
158 |         this.$emit('openDeleteDialog', index, deleteId)
159 |       },
160 |       openEditDocumentDialog(item, index) {
161 |         this.$emit('openEditDocumentDialog', item, index)
162 |       },
163 |     }
164 |   }
165 | </script>
166 | 


--------------------------------------------------------------------------------
/components/SimpleUploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <v-row>
  4 |       <v-col v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`" cols="12" :md="cols" xs="12">
  5 |         <v-card
  6 |           :shaped="shaped"
  7 |           :outlined="outlined"
  8 |           :raised="raised"
  9 |           :tile="tile"
 10 |         >
 11 |           <v-list-item three-line>
 12 |             <v-list-item-content>
 13 |               <v-list-item-subtitle color="blue-grey darken-3">{{attachment.file.name}}</v-list-item-subtitle>
 14 |               <v-list-item-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024 ">
 15 |                 <v-chip
 16 |                   color="teal lighten-2"
 17 |                   label
 18 |                   text-color="white"
 19 |                 >
 20 |                   {{  Number((attachment.file.size / 1000).toFixed(1)) +'  '+ selectedLang[lang].size.kb}}
 21 |                   <v-icon right>mdi-harddisk</v-icon>
 22 |                 </v-chip>
 23 |               </v-list-item-subtitle>
 24 |               <v-list-item-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
 25 |                 <v-chip
 26 |                   color="teal lighten-2"
 27 |                   label
 28 |                   text-color="white"
 29 |                 >
 30 |                   {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) +'  '+ selectedLang[lang].size.mb}}
 31 |                   <v-icon right>mdi-harddisk</v-icon>
 32 |                 </v-chip>
 33 |               </v-list-item-subtitle>
 34 |             </v-list-item-content>
 35 |             <v-list-item-avatar
 36 |               tile
 37 |               size="80"
 38 |               color="blue-grey lighten-5"
 39 |             >
 40 |               <template v-if="attachment.file.name.split('.').pop().toLowerCase() === 'jpg' || attachment.file.name.split('.').pop().toLowerCase() === 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() === 'png' || attachment.file.name.split('.').pop().toLowerCase() === 'tif' || attachment.file.name.split('.').pop().toLowerCase() === 'bmp'">
 41 |                 <v-img
 42 |                   v-if="thumb"
 43 |                   :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64 "
 44 |                 ></v-img>
 45 |                 <v-icon v-else  style="margin-left: 10px" size="50" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 46 |               </template>
 47 |               <template v-else>
 48 |                 <v-icon  v-if="attachment.file.name.split('.').pop().toLowerCase() === 'pdf'" x-large file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 49 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'doc' || attachment.file.name.split('.').pop().toLowerCase() === 'docx' || attachment.file.name.split('.').pop().toLowerCase() === 'odt'" x-large file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 50 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'jpg' || attachment.file.name.split('.').pop().toLowerCase() === 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() === 'png' || attachment.file.name.split('.').pop().toLowerCase() === 'tif' || attachment.file.name.split('.').pop().toLowerCase() === 'bmp'" x-large file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 51 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'xls' || attachment.file.name.split('.').pop().toLowerCase() === 'xlsx'" x-large file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 52 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'pptx' || attachment.file.name.split('.').pop().toLowerCase() === 'pptm' || attachment.file.name.split('.').pop().toLowerCase() === 'ppt'" x-large file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 53 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'mp4' || attachment.file.name.split('.').pop().toLowerCase() === 'mov' || attachment.file.name.split('.').pop().toLowerCase() === 'flv' || attachment.file.name.split('.').pop().toLowerCase() === 'wmv' || attachment.file.name.split('.').pop().toLowerCase() === 'avi'" x-large file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 54 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'dwg' " x-large file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 55 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'zip' || attachment.file.name.split('.').pop().toLowerCase() === 'rar' || attachment.file.name.split('.').pop().toLowerCase() === '7-zip'   " x-large file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 56 |                 <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'txt' " x-large file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 57 |                 <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 58 |               </template>
 59 |             </v-list-item-avatar>
 60 |           </v-list-item>
 61 |           <v-divider
 62 |             class="mx-4"
 63 |           ></v-divider>
 64 |           <v-card-actions style="padding: 0">
 65 |             <v-tooltip right>
 66 |               <template v-slot:activator="{ on }">
 67 |                 <v-btn v-if="deletePermission" text fab v-on="on"  @click="openDeleteDialog(index , '')"><v-icon color="red">mdi-trash-can-outline</v-icon></v-btn>
 68 |               </template>
 69 |               <span class="BYekan">{{selectedLang[lang].delete}}</span>
 70 |             </v-tooltip>
 71 |             <v-tooltip right>
 72 |               <template v-slot:activator="{ on }">
 73 |                 <v-btn v-if="editPermission" text fab v-on="on"  @click="openEditDocumentDialog(attachment, index)"><v-icon color="green">mdi-pencil-outline</v-icon></v-btn>
 74 |               </template>
 75 |               <span class="BYekan">{{selectedLang[lang].edit}}</span>
 76 |             </v-tooltip>
 77 | 
 78 |             <v-spacer></v-spacer>
 79 | 
 80 |             <v-btn
 81 |               v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''"
 82 |               icon
 83 |               @click.prevent="attachment.file.showDetailState = !attachment.file.showDetailState"
 84 |             >
 85 |               <v-icon>{{ attachment.file.showDetailState ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
 86 |             </v-btn>
 87 |           </v-card-actions>
 88 | 
 89 |           <v-expand-transition>
 90 |             <template v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''">
 91 |               <div v-show="attachment.file.showDetailState">
 92 |                 <v-divider></v-divider>
 93 |                 <v-chip-group
 94 |                   v-if="attachment.file.tags.length > 0"
 95 |                   multiple
 96 |                   active-class="primary--text"
 97 |                   style="padding: 8px"
 98 |                 >
 99 |                     <v-chip v-for="(tag, index) in attachment.file.tags" :key="`attachment-${index}`" style="margin: 5px">
100 |                       {{tag}}
101 |                     </v-chip>
102 |                 </v-chip-group>
103 |                 <v-card-text v-if="attachment.file.description != null" style="text-align: justify">
104 |                   {{attachment.file.description}}
105 |                 </v-card-text>
106 |               </div>
107 |             </template>
108 |           </v-expand-transition>
109 |         </v-card>
110 |       </v-col>
111 |     </v-row>
112 |   </div>
113 |     
114 | </template>
115 | 
116 | <script>
117 |   export default {
118 |     props: {
119 |       documentAttachment: [Array],
120 |       thumb: {
121 |         type: Boolean,
122 |         default: true
123 |       },
124 |       lang: {
125 |         type: String,
126 |         default: 'en'
127 |       },
128 |       cols: {
129 |         type: Number,
130 |         default: 4
131 |       },
132 |       editPermission: {
133 |         type: Boolean,
134 |         default: true
135 |       },
136 |       cardType: String,
137 |       outlined: Boolean,
138 |       raised: Boolean,
139 |       shaped: Boolean,
140 |       tile: Boolean,
141 |       deletePermission: {
142 |         type: Boolean,
143 |         default: true
144 |       },
145 |       selectedLang: {},
146 |     },
147 |     data: () => ({}),
148 |     methods: {
149 |       setCardTheme() {
150 |         this.$emit('setCardTheme')
151 |       },
152 |       openDeleteDialog(index, deleteId) {
153 |         this.$emit('openDeleteDialog', index, deleteId)
154 |       },
155 |       openEditDocumentDialog(item, index) {
156 |         this.$emit('openEditDocumentDialog', item, index)
157 |       },
158 |     }
159 |   }
160 | </script>
161 | 


--------------------------------------------------------------------------------
/pages/simple.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row>
  4 |       <v-col cols="12" lg="12" md="12" xs="12">
  5 |         <div class="text-center">
  6 |           <p style="color: #757575; font-size: 1.5rem">Simple file uploader example</p>
  7 |           <v-chip
  8 |             class="ma-2"
  9 |             color="pink"
 10 |             label
 11 |             text-color="white"
 12 |             @click="optionDialog = true"
 13 |           >
 14 |             <v-icon left>mdi-cog-outline</v-icon>
 15 |             Options
 16 |           </v-chip>
 17 |         </div>
 18 |       </v-col>
 19 |       <v-col cols="12" lg="12" md="12" xs="12">
 20 |         <file-uploader
 21 |           :documentAttachment.sync="documentAttachment"
 22 |           :fileAccept="fileExtensions"
 23 |           :maxFileSize.sync= "maxFileSizeChange"
 24 |           :imageCompressor.sync= "imageCompressorState"
 25 |           :imageCompressLevel.sync= "imageCompressLevelChange"
 26 |           :fileUploaderType= "'simple'"
 27 |           :maxFileCount.sync="maxFileCountChange"
 28 |           :cardType.sync= "cardType"
 29 |           :badgeCounter.sync= "badgeCounterState"
 30 |           :thumb.sync= "thumbState"
 31 |           :lang.sync= "setLang"
 32 |           :changeFileName.sync="changeFileNameState"
 33 |           :addFileDescription.sync="addFileDescriptionState"
 34 |           :addFileTag.sync="addFileTagState"
 35 |           :tags="tags"
 36 |           ref="fileUploader"
 37 |         >
 38 |         </file-uploader>
 39 |       </v-col>
 40 |     </v-row>
 41 |     <!---------------------File Uploader Options------------------------------->
 42 |     <v-dialog
 43 |       v-model="optionDialog"
 44 |       max-width="80%"
 45 |     >
 46 |       <v-card>
 47 |         <v-card-title class="headline">You can customize your Simple File Uploader</v-card-title>
 48 | 
 49 |         <v-card-text>
 50 |           <v-container>
 51 |             <v-row>
 52 |               <v-col cols="12" md="12" xs="12">
 53 |                 <p>Select Language: </p>
 54 |                 <v-chip-group
 55 |                   v-model="selectedLanguage"
 56 |                   active-class="deep-purple accent-4 white--text"
 57 |                   column
 58 |                 >
 59 |                   <v-chip>English</v-chip>
 60 | 
 61 |                   <v-chip>Persian</v-chip>
 62 | 
 63 |                   <v-chip>French</v-chip>
 64 | 
 65 |                   <v-chip>Chines</v-chip>
 66 | 
 67 |                   <v-chip>Arabic</v-chip>
 68 |                 </v-chip-group>
 69 |               </v-col>
 70 |               <v-col cols="12" md="12" xs="12">
 71 |                 <p>Select card type: </p>
 72 |                 <v-chip-group
 73 |                   v-model="selectedCardType"
 74 |                   active-class="deep-purple accent-4 white--text"
 75 |                   column
 76 |                 >
 77 |                   <v-chip>DEFAULT</v-chip>
 78 | 
 79 |                   <v-chip>OUTLINED</v-chip>
 80 | 
 81 |                   <v-chip>RAISED</v-chip>
 82 | 
 83 |                   <v-chip>SHAPED</v-chip>
 84 | 
 85 |                   <v-chip>TILE</v-chip>
 86 |                 </v-chip-group>
 87 |               </v-col>
 88 |               <v-col cols="12" md="4" xs="12">
 89 |                 <v-switch
 90 |                   v-model="changeFileNameState"
 91 |                   :label="`Change file name : ${changeFileNameState.toString()}`"
 92 |                 ></v-switch>
 93 |               </v-col>
 94 |               <v-col cols="12" md="4" xs="12">
 95 |                 <v-switch
 96 |                   v-model="addFileDescriptionState"
 97 |                   :label="`Add file description : ${addFileDescriptionState.toString()}`"
 98 |                 ></v-switch>
 99 |               </v-col>
100 |               <v-col cols="12" md="4" xs="12">
101 |                 <v-switch
102 |                   v-model="addFileTagState"
103 |                   :label="`Add file tags : ${addFileTagState.toString()}`"
104 |                 ></v-switch>
105 |               </v-col>
106 |               <v-col cols="12" md="12" xs="12">
107 |                 <v-switch
108 |                   v-model="thumbState"
109 |                   :label="`Thumb for images : ${thumbState.toString()}`"
110 |                 ></v-switch>
111 |               </v-col>
112 |               <v-col cols="12" md="12" xs="12">
113 |                 <v-text-field
114 |                   v-model="fileExtensions"
115 |                   label="File extensions"
116 |                 >
117 |                 </v-text-field>
118 |               </v-col>
119 |               <v-col cols="12" md="6" xs="12">
120 |                 <v-text-field
121 |                   v-model="maxFileCountChange"
122 |                   label="Maximum file count"
123 |                 >
124 |                 </v-text-field>
125 |               </v-col>
126 |               <v-col cols="12" md="6" xs="12">
127 |                 <v-text-field
128 |                   v-model="maxFileSizeChange"
129 |                   label="Maximum file size (KB)"
130 |                 >
131 |                 </v-text-field>
132 |               </v-col>
133 |               <v-col cols="3" md="3" xs="12">
134 |                 <v-switch
135 |                   v-model="imageCompressorState"
136 |                   :label="`Image compressor: ${imageCompressorState.toString()}`"
137 |                 ></v-switch>
138 |               </v-col>
139 |               <v-col cols="9" md="9" xs="12">
140 |                 <v-slider style="margin-top: 16px;"
141 |                           :disabled="!imageCompressorState"
142 |                           v-model="imageCompressLevelChange"
143 |                           label="Image compress level"
144 |                           persistent-hint
145 |                           max="1"
146 |                           step="0.1"
147 |                           thumb-label="always"
148 |                           ticks
149 |                 ></v-slider>
150 |               </v-col>
151 |               <v-col cols="12" md="12" xs="12">
152 |                 <v-switch
153 |                   v-model="badgeCounterState"
154 |                   :label="`Badge counter: ${badgeCounterState.toString()}`"
155 |                 ></v-switch>
156 |               </v-col>
157 |             </v-row>
158 |           </v-container>
159 |         </v-card-text>
160 | 
161 |         <v-card-actions>
162 |           <v-spacer></v-spacer>
163 | 
164 |           <v-btn
165 |             color="green darken-1"
166 |             text
167 |             @click="optionDialog = false"
168 |           >
169 |             ok
170 |           </v-btn>
171 |         </v-card-actions>
172 |       </v-card>
173 |     </v-dialog>
174 |     <!---------------------File Uploader Options------------------------------->
175 |   </v-container>
176 | </template>
177 | 
178 | <script>
179 | import fileUploader from '~/components/fileUploader';
180 | export default {
181 |   components: {
182 |     fileUploader,
183 |   },
184 |   data: () => ({
185 |     documentAttachment: [],
186 |     optionDialog: false,
187 |     selectedCardType: 0,
188 |     cardType: '',
189 |     badgeCounterState: true,
190 |     maxFileCountChange: 5,
191 |     maxFileSizeChange: 5120,
192 |     imageCompressorState: true,
193 |     imageCompressorChange: 0.5,
194 |     imageCompressLevelChange: 0.5,
195 |     fileExtensions: 'image/png,image/gif,image/jpeg,image/webp',
196 |     thumbState: true,
197 |     selectedLanguage: 0,
198 |     setLang: 'en',
199 |     changeFileNameState: true,
200 |     addFileDescriptionState: true,
201 |     addFileTagState: true,
202 |     tags: ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', 'Tag 6']
203 |   }),
204 |   watch: {
205 |     selectedCardType: function () {
206 |       this.setCardType()
207 |     },
208 |     badgeCounterState : function () {
209 |       this.badgeCounter = this.badgeCounterState;
210 |     },
211 |     maxFileCountChange : function () {
212 |       this.maxFileCount = this.maxFileCountChange;
213 |     },
214 |     maxFileSizeChange : function () {
215 |       this.maxFileSize = Number(this.maxFileSizeChange);
216 |     },
217 |     imageCompressorState : function () {
218 |       this.imageCompressor = this.imageCompressorState;
219 |     },
220 |     imageCompressLevelChange : function () {
221 |       this.imageCompressLevel = this.imageCompressLevelChange;
222 |     },
223 |     fileExtensions : function () {
224 |       this.fileAccept = this.fileExtensions;
225 |     },
226 |     thumbState : function () {
227 |       this.thumb = this.thumbState;
228 |     },
229 |     changeFileNameState : function () {
230 |       this.changeFileName = this.changeFileNameState;
231 |     },
232 |     addFileDescriptionState : function () {
233 |       this.addFileDescription = this.addFileDescriptionState;
234 |     },
235 |     addFileTagState : function () {
236 |       this.addFileTag = this.addFileTagState;
237 |     },
238 |     selectedLanguage: function () {
239 |       this.setLanguage()
240 |     },
241 |   },
242 |   methods:{
243 |     setCardType(){
244 |       switch (this.selectedCardType) {
245 |         case 0 :
246 |           this.cardType = 'default'
247 |           break;
248 |         case 1 :
249 |           this.cardType = 'outlined'
250 |           break;
251 |         case 2 :
252 |           this.cardType = 'raised'
253 |           break;
254 |         case 3 :
255 |           this.cardType = 'shaped'
256 |           break;
257 |         case 4 :
258 |           this.cardType = 'tile'
259 |           break;
260 |       }
261 |     },
262 | 
263 |     setLanguage(){
264 |       switch (this.selectedLanguage) {
265 |         case 0 :
266 |           this.setLang = 'en'
267 |           break;
268 |         case 1 :
269 |           this.setLang = 'fa'
270 |           break;
271 |         case 2 :
272 |           this.setLang = 'fr'
273 |           break;
274 |         case 3 :
275 |           this.setLang = 'ch'
276 |           break;
277 |         case 4 :
278 |           this.setLang = 'ar'
279 |           break;
280 |       }
281 |     },
282 |   },
283 | }
284 | </script>
285 | 


--------------------------------------------------------------------------------
/pages/table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row>
  4 |       <v-col cols="12" lg="12" md="12" xs="12">
  5 |         <div class="text-center">
  6 |           <p style="color: #757575; font-size: 1.5rem">Table file uploader example</p>
  7 |           <v-chip
  8 |             class="ma-2"
  9 |             color="pink"
 10 |             label
 11 |             text-color="white"
 12 |             @click="optionDialog = true"
 13 |           >
 14 |             <v-icon left>mdi-cog-outline</v-icon>
 15 |             Options
 16 |           </v-chip>
 17 |         </div>
 18 |       </v-col>
 19 |       <v-col cols="12" lg="12" md="12" xs="12">
 20 |         <file-uploader
 21 |           :documentAttachment.sync="documentAttachment"
 22 |           :fileAccept="fileExtensions"
 23 |           :maxFileSize.sync= "maxFileSizeChange"
 24 |           :imageCompressor.sync= "imageCompressorState"
 25 |           :imageCompressLevel.sync= "imageCompressLevelChange"
 26 |           :fileUploaderType= "'table'"
 27 |           :maxFileCount.sync="maxFileCountChange"
 28 |           :badgeCounter.sync= "badgeCounterState"
 29 |           :thumb.sync= "thumbState"
 30 |           :tableFixedHeader.sync= "tableFixedHeaderStatus"
 31 |           :tableHeight.sync= "tableHeightChange"
 32 |           :tableThumbColumn.sync= "tableThumbColumnState"
 33 |           :lang.sync= "setLang"
 34 |           :changeFileName.sync="changeFileNameState"
 35 |           :addFileDescription.sync="addFileDescriptionState"
 36 |           :addFileTag.sync="addFileTagState"
 37 |           :tags="tags"
 38 |           ref="fileUploader"
 39 |         >
 40 |         </file-uploader>
 41 |       </v-col>
 42 |     </v-row>
 43 |     <!---------------------File Uploader Options------------------------------->
 44 |     <v-dialog
 45 |       v-model="optionDialog"
 46 |       max-width="80%"
 47 |     >
 48 |       <v-card>
 49 |         <v-card-title class="headline">You can customize your Table File Uploader</v-card-title>
 50 | 
 51 |         <v-card-text>
 52 |           <v-container>
 53 |             <v-row>
 54 |               <v-col cols="12" md="12" xs="12">
 55 |                 <p>Select Language: </p>
 56 |                 <v-chip-group
 57 |                   v-model="selectedLanguage"
 58 |                   active-class="deep-purple accent-4 white--text"
 59 |                   column
 60 |                 >
 61 |                   <v-chip>English</v-chip>
 62 | 
 63 |                   <v-chip>Persian</v-chip>
 64 | 
 65 |                   <v-chip>French</v-chip>
 66 | 
 67 |                   <v-chip>Chines</v-chip>
 68 | 
 69 |                   <v-chip>Arabic</v-chip>
 70 |                 </v-chip-group>
 71 |               </v-col>
 72 |               <v-col cols="12" md="4" xs="12">
 73 |                 <v-switch
 74 |                   v-model="changeFileNameState"
 75 |                   :label="`Change file name : ${changeFileNameState.toString()}`"
 76 |                 ></v-switch>
 77 |               </v-col>
 78 |               <v-col cols="12" md="4" xs="12">
 79 |                 <v-switch
 80 |                   v-model="addFileDescriptionState"
 81 |                   :label="`Add file description : ${addFileDescriptionState.toString()}`"
 82 |                 ></v-switch>
 83 |               </v-col>
 84 |               <v-col cols="12" md="12" xs="12">
 85 |                 <v-switch
 86 |                   v-model="tableFixedHeaderStatus"
 87 |                   :label="`Table fixed header : ${tableFixedHeaderStatus.toString()}`"
 88 |                 ></v-switch>
 89 |               </v-col>
 90 |               <v-col cols="12" md="6" xs="12">
 91 |                 <v-text-field
 92 |                   v-model="tableHeightChange"
 93 |                   label="Table height (px)"
 94 |                 >
 95 |                 </v-text-field>
 96 |               </v-col>
 97 |               <v-col cols="12" md="12" xs="12">
 98 |                 <v-switch
 99 |                   v-model="tableThumbColumnState"
100 |                   :label="`Table thumb column : ${tableThumbColumnState.toString()}`"
101 |                 ></v-switch>
102 |               </v-col>
103 |               <v-col cols="12" md="12" xs="12">
104 |                 <v-switch
105 |                   v-model="thumbState"
106 |                   :label="`Table thumb for images : ${thumbState.toString()}`"
107 |                 ></v-switch>
108 |               </v-col>
109 |               <v-col cols="12" md="12" xs="12">
110 |                 <v-text-field
111 |                   v-model="fileExtensions"
112 |                   label="File extensions"
113 |                 >
114 |                 </v-text-field>
115 |               </v-col>
116 |               <v-col cols="12" md="6" xs="12">
117 |                 <v-text-field
118 |                   v-model="maxFileCountChange"
119 |                   label="Maximum file count"
120 |                 >
121 |                 </v-text-field>
122 |               </v-col>
123 |               <v-col cols="12" md="6" xs="12">
124 |                 <v-text-field
125 |                   v-model="maxFileSizeChange"
126 |                   label="Maximum file size (KB)"
127 |                 >
128 |                 </v-text-field>
129 |               </v-col>
130 |               <v-col cols="3" md="3" xs="12">
131 |                 <v-switch
132 |                   v-model="imageCompressorState"
133 |                   :label="`Image compressor: ${imageCompressorState.toString()}`"
134 |                 ></v-switch>
135 |               </v-col>
136 |               <v-col cols="9" md="9" xs="12">
137 |                 <v-slider style="margin-top: 16px;"
138 |                           :disabled="!imageCompressorState"
139 |                           v-model="imageCompressLevelChange"
140 |                           label="Image compress level"
141 |                           persistent-hint
142 |                           max="1"
143 |                           step="0.1"
144 |                           thumb-label="always"
145 |                           ticks
146 |                 ></v-slider>
147 |               </v-col>
148 |               <v-col cols="12" md="12" xs="12">
149 |                 <v-switch
150 |                   v-model="badgeCounterState"
151 |                   :label="`Badge Counter: ${badgeCounterState.toString()}`"
152 |                 ></v-switch>
153 |               </v-col>
154 |             </v-row>
155 |           </v-container>
156 |         </v-card-text>
157 | 
158 |         <v-card-actions>
159 |           <v-spacer></v-spacer>
160 | 
161 |           <v-btn
162 |             color="green darken-1"
163 |             text
164 |             @click="optionDialog = false"
165 |           >
166 |             ok
167 |           </v-btn>
168 |         </v-card-actions>
169 |       </v-card>
170 |     </v-dialog>
171 |     <!---------------------File Uploader Options------------------------------->
172 |   </v-container>
173 | </template>
174 | 
175 | <script>
176 |   import fileUploader from '~/components/fileUploader';
177 |   export default {
178 |     components: {
179 |       fileUploader,
180 |     },
181 |     data: () => ({
182 |       documentAttachment: [],
183 |       optionDialog: false,
184 |       selectedCardType: 0,
185 |       cardType: '',
186 |       badgeCounterState: true,
187 |       maxFileCountChange: 5,
188 |       maxFileSizeChange: 5120,
189 |       imageCompressorState: true,
190 |       imageCompressorChange: 0.5,
191 |       imageCompressLevelChange: 0.5,
192 |       fileExtensions: 'image/png,image/gif,image/jpeg,image/webp',
193 |       thumbState: true,
194 |       tableThumbColumnState: true,
195 |       tableFixedHeaderStatus: true,
196 |       tableHeightChange: 350,
197 |       selectedLanguage: 0,
198 |       setLang: 'en',
199 |       changeFileNameState: true,
200 |       addFileDescriptionState: true,
201 |       addFileTagState: true,
202 |       tags:['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', 'Tag 6']
203 |     }),
204 |     watch: {
205 |       selectedCardType: function () {
206 |         this.setCardType()
207 |       },
208 |       badgeCounterState : function () {
209 |         this.badgeCounter = this.badgeCounterState;
210 |       },
211 |       maxFileCountChange : function () {
212 |         this.maxFileCount = this.maxFileCountChange;
213 |       },
214 |       maxFileSizeChange : function () {
215 |         this.maxFileSize = Number(this.maxFileSizeChange);
216 |       },
217 |       imageCompressorState : function () {
218 |         this.imageCompressor = this.imageCompressorState;
219 |       },
220 |       imageCompressLevelChange : function () {
221 |         this.imageCompressLevel = this.imageCompressLevelChange;
222 |       },
223 |       fileExtensions : function () {
224 |         this.fileAccept = this.fileExtensions;
225 |       },
226 |       thumbState : function () {
227 |         this.thumb = this.thumbState;
228 |       },
229 |       tableThumbColumnState : function () {
230 |         this.tableThumbColumn = this.tableThumbColumnState;
231 |       },
232 |       tableFixedHeaderStatus : function () {
233 |         this.tableFixedHeader = this.tableFixedHeaderStatus;
234 |       },
235 |       tableHeightChange : function () {
236 |         this.tableHeight = this.tableHeightChange;
237 |       },
238 |       changeFileNameState : function () {
239 |         this.changeFileName = this.changeFileNameState;
240 |       },
241 |       addFileDescriptionState : function () {
242 |         this.addFileDescription = this.addFileDescriptionState;
243 |       },
244 |       addFileTagState : function () {
245 |         this.addFileTag = this.addFileTagState;
246 |       },
247 |       selectedLanguage: function () {
248 |         this.setLanguage()
249 |       },
250 |     },
251 |     methods:{
252 |       setLanguage() {
253 |         switch (this.selectedLanguage) {
254 |           case 0 :
255 |             this.setLang = 'en'
256 |             break;
257 |           case 1 :
258 |             this.setLang = 'fa'
259 |             break;
260 |           case 2 :
261 |             this.setLang = 'fr'
262 |             break;
263 |           case 3 :
264 |             this.setLang = 'ch'
265 |             break;
266 |           case 4 :
267 |             this.setLang = 'ar'
268 |             break;
269 |         }
270 |       },
271 |     },
272 |   }
273 | </script>
274 | 


--------------------------------------------------------------------------------
/pages/thumbnail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row>
  4 |       <v-col cols="12" lg="12" md="12" xs="12">
  5 |         <div class="text-center">
  6 |           <p style="color: #757575; font-size: 1.5rem">Thumbnail file uploader example</p>
  7 |           <v-chip
  8 |           class="ma-2"
  9 |           color="pink"
 10 |           label
 11 |           text-color="white"
 12 |           @click="optionDialog = true"
 13 |           >
 14 |           <v-icon left>mdi-cog-outline</v-icon>
 15 |           Options
 16 |           </v-chip>
 17 |         </div>
 18 |       </v-col>
 19 |       <v-col cols="12" lg="12" md="12" xs="12">
 20 |         <file-uploader
 21 |           :documentAttachment.sync="documentAttachment"
 22 |           :fileAccept="fileExtensions"
 23 |           :maxFileSize.sync= "maxFileSizeChange"
 24 |           :imageCompressor.sync= "imageCompressorState"
 25 |           :imageCompressLevel.sync= "imageCompressLevelChange"
 26 |           :fileUploaderType= "'thumbnail'"
 27 |           :maxFileCount.sync="maxFileCountChange"
 28 |           :cardType.sync= "cardType"
 29 |           :badgeCounter.sync= "badgeCounterState"
 30 |           :changeFileName.sync="changeFileNameState"
 31 |           :addFileDescription.sync="addFileDescriptionState"
 32 |           :addFileTag.sync="addFileTagState"
 33 |           :tags="tags"
 34 |           :lang.sync= "setLang"
 35 |           ref="fileUploader"
 36 |         >
 37 |         </file-uploader>
 38 |       </v-col>
 39 |     </v-row>
 40 |     <!---------------------File Uploader Options------------------------------->
 41 |     <v-dialog
 42 |       v-model="optionDialog"
 43 |       max-width="80%"
 44 |     >
 45 |       <v-card>
 46 |         <v-card-title class="headline">You can customize your Thumbnail File Uploader</v-card-title>
 47 | 
 48 |         <v-card-text>
 49 |           <v-container>
 50 |             <v-row>
 51 |               <v-col cols="12" md="12" xs="12">
 52 |                 <p>Select Language: </p>
 53 |                 <v-chip-group
 54 |                   v-model="selectedLanguage"
 55 |                   active-class="deep-purple accent-4 white--text"
 56 |                   column
 57 |                 >
 58 |                   <v-chip>English</v-chip>
 59 | 
 60 |                   <v-chip>Persian</v-chip>
 61 | 
 62 |                   <v-chip>French</v-chip>
 63 | 
 64 |                   <v-chip>Chines</v-chip>
 65 | 
 66 |                   <v-chip>Arabic</v-chip>
 67 |                 </v-chip-group>
 68 |               </v-col>
 69 |               <v-col cols="12" md="12" xs="12">
 70 |                 <p>Select card type: </p>
 71 |                 <v-chip-group
 72 |                   v-model="selectedCardType"
 73 |                   active-class="deep-purple accent-4 white--text"
 74 |                   column
 75 |                 >
 76 |                   <v-chip>DEFAULT</v-chip>
 77 | 
 78 |                   <v-chip>OUTLINED</v-chip>
 79 | 
 80 |                   <v-chip>RAISED</v-chip>
 81 | 
 82 |                   <v-chip>SHAPED</v-chip>
 83 | 
 84 |                   <v-chip>TILE</v-chip>
 85 |                 </v-chip-group>
 86 |               </v-col>
 87 |               <v-col cols="12" md="4" xs="12">
 88 |                 <v-switch
 89 |                   v-model="changeFileNameState"
 90 |                   :label="`Change file name : ${changeFileNameState.toString()}`"
 91 |                 ></v-switch>
 92 |               </v-col>
 93 |               <v-col cols="12" md="4" xs="12">
 94 |                 <v-switch
 95 |                   v-model="addFileDescriptionState"
 96 |                   :label="`Add file description : ${addFileDescriptionState.toString()}`"
 97 |                 ></v-switch>
 98 |               </v-col>
 99 |               <v-col cols="12" md="4" xs="12">
100 |                 <v-switch
101 |                   v-model="addFileTagState"
102 |                   :label="`Add file tags : ${addFileTagState.toString()}`"
103 |                 ></v-switch>
104 |               </v-col>
105 |               <v-col cols="12" md="12" xs="12">
106 |                 <v-text-field
107 |                   v-model="fileExtensions"
108 |                   label="File extensions"
109 |                 >
110 |                 </v-text-field>
111 |               </v-col>
112 |               <v-col cols="12" md="6" xs="12">
113 |                 <v-text-field
114 |                   v-model="maxFileCountChange"
115 |                   label="Maximum file count"
116 |                 >
117 |                 </v-text-field>
118 |               </v-col>
119 |               <v-col cols="12" md="6" xs="12">
120 |                 <v-text-field
121 |                   v-model="maxFileSizeChange"
122 |                   label="Maximum file size (KB)"
123 |                 >
124 |                 </v-text-field>
125 |               </v-col>
126 |               <v-col cols="3" md="3" xs="12">
127 |                 <v-switch
128 |                   v-model="imageCompressorState"
129 |                   :label="`Image compressor: ${imageCompressorState.toString()}`"
130 |                 ></v-switch>
131 |               </v-col>
132 |               <v-col cols="9" md="9" xs="12">
133 |                 <v-slider style="margin-top: 16px;"
134 |                   :disabled="!imageCompressorState"
135 |                   v-model="imageCompressLevelChange"
136 |                   label="Image compress level"
137 |                   persistent-hint
138 |                   max="1"
139 |                   step="0.1"
140 |                   thumb-label="always"
141 |                   ticks
142 |                 ></v-slider>
143 |               </v-col>
144 |               <v-col cols="12" md="12" xs="12">
145 |                 <v-switch
146 |                   v-model="badgeCounterState"
147 |                   :label="`Badge Counter: ${badgeCounterState.toString()}`"
148 |                 ></v-switch>
149 |               </v-col>
150 |             </v-row>
151 |           </v-container>
152 |         </v-card-text>
153 | 
154 |         <v-card-actions>
155 |           <v-spacer></v-spacer>
156 | 
157 |           <v-btn
158 |             color="green darken-1"
159 |             text
160 |             @click="optionDialog = false"
161 |           >
162 |             ok
163 |           </v-btn>
164 |         </v-card-actions>
165 |       </v-card>
166 |     </v-dialog>
167 |     <!---------------------File Uploader Options------------------------------->
168 |   </v-container>
169 | </template>
170 | 
171 | <script>
172 | import fileUploader from '~/components/fileUploader';
173 | export default {
174 |   components: {
175 |     fileUploader,
176 |   },
177 |   data: () => ({
178 |     documentAttachment: [],
179 |     optionDialog: false,
180 |     selectedCardType: 0,
181 |     cardType: '',
182 |     badgeCounterState: true,
183 |     maxFileCountChange: 5,
184 |     maxFileSizeChange: 5120,
185 |     imageCompressorState: true,
186 |     imageCompressorChange: 0.5,
187 |     imageCompressLevelChange: 0.5,
188 |     fileExtensions: 'image/png,image/gif,image/jpeg,image/webp',
189 |     selectedLanguage: 0,
190 |     setLang: 'en',
191 |     changeFileNameState: true,
192 |     addFileDescriptionState: true,
193 |     addFileTagState: true,
194 |     tags: ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', 'Tag 6'],
195 |     customLang : {
196 |       custom : {
197 |         insertFile: 'Insert File1',
198 |         insertNewFile: 'Insert New File1',
199 |         add: 'Add',
200 |         delete: 'Delete',
201 |         deleteDialog: {
202 |           message: 'Are you sure you want to delete the file?',
203 |           cancel: 'cancel',
204 |         },
205 |         table: {
206 |           thumb: 'Thumb',
207 |           name: 'Name',
208 |           size: 'Size',
209 |           tags: 'tags',
210 |           action: {
211 |             action: 'Action',
212 |             deleteTooltip: 'Delete'
213 |           }
214 |         },
215 |         size: {
216 |           kb: 'KB',
217 |           mb: 'MB',
218 |         },
219 |         maxFileSizeAlert: 'Max file Size is',
220 |         maxFileCountAlert: 'Max file Count is',
221 |         fileName: 'File Name',
222 |         fileDescription: 'File Description',
223 |         fileTags: 'File Tags',
224 |       }
225 |     },
226 |   }),
227 |   watch: {
228 |     selectedCardType: function () {
229 |       this.setCardType()
230 |     },
231 |     badgeCounterState : function () {
232 |         this.badgeCounter = this.badgeCounterState;
233 |     },
234 |     maxFileCountChange : function () {
235 |         this.maxFileCount = this.maxFileCountChange;
236 |     },
237 |     maxFileSizeChange : function () {
238 |         this.maxFileSize = Number(this.maxFileSizeChange);
239 |     },
240 |     imageCompressorState : function () {
241 |       this.imageCompressor = this.imageCompressorState;
242 |     },
243 |     imageCompressLevelChange : function () {
244 |       this.imageCompressLevel = this.imageCompressLevelChange;
245 |     },
246 |     fileExtensions : function () {
247 |       this.fileAccept = this.fileExtensions;
248 |     },
249 |     changeFileNameState : function () {
250 |       this.changeFileName = this.changeFileNameState;
251 |     },
252 |     addFileDescriptionState : function () {
253 |       this.addFileDescription = this.addFileDescriptionState;
254 |     },
255 |     addFileTagState : function () {
256 |       this.addFileTag = this.addFileTagState;
257 |     },
258 |     selectedLanguage: function () {
259 |       this.setLanguage()
260 |     },
261 |   },
262 |   methods:{
263 |     setCardType(){
264 |       switch (this.selectedCardType) {
265 |         case 0 :
266 |           this.cardType = 'default'
267 |           break;
268 |         case 1 :
269 |           this.cardType = 'outlined'
270 |           break;
271 |         case 2 :
272 |           this.cardType = 'raised'
273 |           break;
274 |         case 3 :
275 |           this.cardType = 'shaped'
276 |           break;
277 |         case 4 :
278 |           this.cardType = 'tile'
279 |           break;
280 |       }
281 |     },
282 |     setLanguage(){
283 |       switch (this.selectedLanguage) {
284 |         case 0 :
285 |           this.setLang = 'en'
286 |           break;
287 |         case 1 :
288 |           this.setLang = 'fa'
289 |           break;
290 |         case 2 :
291 |           this.setLang = 'fr'
292 |           break;
293 |         case 3 :
294 |           this.setLang = 'ch'
295 |           break;
296 |         case 4 :
297 |           this.setLang = 'ar'
298 |           break;
299 |       }
300 |     },
301 |   },
302 | }
303 | </script>
304 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
  1 | # OverView
  2 | &nbsp;
  3 | 
  4 | &nbsp; Complete and simple file uploader with image compressor in Vue.js
  5 | 
  6 | 
  7 | + Choice Theme : Thumbnail, Simple, Table
  8 | + Add custom fields (Title, Description, Tags, ...)
  9 | + Image compressor
 10 | + Select level for Image compressor
 11 | + Mange file extensions
 12 | + Manage files count
 13 | + Manage files size
 14 | + Multi languages support
 15 | + Add custom language
 16 | + Right to left support
 17 | + Multi file upload
 18 | + Responsive
 19 | + ...
 20 | &nbsp;
 21 | 
 22 | &nbsp;
 23 | # Install
 24 | 
 25 | &nbsp;
 26 | 
 27 | &nbsp;&nbsp;&nbsp;1. Install package:
 28 | ``` bash
 29 | $npm install handy-uploader
 30 | ```
 31 | 
 32 | 
 33 | &nbsp;&nbsp;&nbsp;2. You should Install Vuetify on project:
 34 | 
 35 | ### &nbsp;&nbsp;  Install on Vue CLI
 36 | ``` bash
 37 | $vue add vuetify
 38 | ```
 39 | ### &nbsp;&nbsp;  Install on Nuxt
 40 | ``` bash
 41 | $npm install @nuxtjs/vuetify -D
 42 | ```
 43 | &nbsp;&nbsp;&nbsp;Once installed, update your `nuxt.config.js` file to include the Vuetify module in the build.
 44 | 
 45 | ``` js
 46 | // nuxt.config.js
 47 | 
 48 |   buildModules: [
 49 |     '@nuxtjs/vuetify',
 50 |     ]
 51 | ```
 52 | 
 53 | 
 54 | ## Build Setup
 55 | 
 56 | &nbsp;
 57 | 
 58 | &nbsp;&nbsp;&nbsp;Import handy-uploader to project
 59 | 
 60 | ``` js
 61 | <script>
 62 |     import handyUploader from 'handy-uploader/src/components/handyUploader';
 63 |     export default {
 64 |         components: {
 65 |             handyUploader,
 66 |         },
 67 |     }
 68 |  </script>
 69 | ```
 70 | 
 71 | &nbsp;
 72 | 
 73 | ### &nbsp;&nbsp;&nbsp;Import handy-uploader to project - Full Example
 74 | 
 75 | ``` html
 76 | <handy-uploader
 77 |     :documentAttachment.sync="handyAttachments"
 78 |     :fileUploaderType= "'simple'"
 79 |     :maxFileSize= "10240"
 80 |     :imageCompressor= "true"
 81 |     :imageCompressLevel= "0.8"
 82 |     :maxFileCount= "10"
 83 |     :badgeCounter= "true"
 84 |     :thumb= "false"
 85 |     :changeFileName="true"
 86 |     :addFileDescription="true"
 87 |     :addFileTag="true"
 88 |     :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
 89 | >
 90 | </handy-uploader>
 91 | ```
 92 | 
 93 | ``` js
 94 | <script>
 95 |     import handyUploader from 'handy-uploader/src/components/handyUploader';
 96 |     export default {
 97 |         components: {
 98 |             handyUploader,
 99 |         },
100 |         data: () => ({
101 |             handyAttachments: [],
102 |         }),
103 |     }
104 |  </script>
105 | ```
106 | ---
107 | 
108 | &nbsp;
109 | 
110 | # props
111 | &nbsp;
112 | ### &nbsp;&nbsp;&nbsp;&nbsp; `documentAttachment`
113 | &nbsp;
114 | 
115 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The documentAttachment return array of uploaded file
116 | 
117 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Array `
118 | 
119 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
120 | ``` html
121 |  <handy-uploader
122 |     :documentAttachment.sync="handyAttachments"
123 |   >
124 |  <handy-uploader>
125 |  ```
126 | 
127 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return Array:
128 | 
129 | ``` js
130 | [
131 |     { 
132 |         file: {
133 |             name: 'file name',
134 |             size: 'file size',
135 |             base64: 'base64', 
136 |             format: 'file upload format. for example:image/jpeg;base64'
137 |             tags: [],
138 |             description: 'file description'
139 |         }
140 |     }
141 |  ]
142 | ```
143 | ---
144 | &nbsp;
145 | 
146 | ### &nbsp;&nbsp;&nbsp;&nbsp; `fileUploaderType`
147 | &nbsp;
148 | 
149 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The fileUploaderType define file uploader theme : `thumbnaile`  , `simple` ,  `table`
150 | 
151 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` String `
152 | 
153 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` thumbnail ` 
154 | 
155 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
156 | ``` html
157 |  <handy-uploader
158 |     :fileUploaderType= "thumbnail"
159 |   >
160 |  <handy-uploader>
161 |  ```
162 | 
163 | &nbsp;&nbsp;&nbsp;&nbsp; or
164 | 
165 | ``` html
166 |  <handy-uploader
167 |     :fileUploaderType= "simple"
168 |   >
169 |  <handy-uploader>
170 |  ```
171 | 
172 | &nbsp;&nbsp;&nbsp;&nbsp; or
173 | 
174 | ``` html
175 |  <handy-uploader
176 |     :fileUploaderType= "table"
177 |   >
178 |  <handy-uploader>
179 |  ```
180 | 
181 | ---
182 | &nbsp;
183 | 
184 | ### &nbsp;&nbsp;&nbsp;&nbsp; `cardType`
185 | &nbsp;
186 | 
187 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Choose File Uploader Card Type Theme
188 | &nbsp;
189 | 
190 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cardTypes : &nbsp;  &nbsp;`default` &nbsp;, &nbsp; &nbsp; `outlined`&nbsp;, &nbsp; &nbsp;`shaped`&nbsp;, &nbsp;&nbsp; `raised`&nbsp;, &nbsp; &nbsp;`tile`
191 | 
192 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` String `
193 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` default `
194 | 
195 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
196 | ``` html
197 |  <handy-uploader
198 |     :cardType= "'shaped'"
199 |   >
200 |  <handy-uploader>
201 |  ```
202 | 
203 | 
204 | ---
205 | &nbsp;
206 | 
207 | ### &nbsp;&nbsp;&nbsp;&nbsp; `fileAccept`
208 | &nbsp;
209 | 
210 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The fileAccept attribute of the input tag, MIME type
211 | 
212 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` String `
213 | 
214 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
215 | ``` html
216 |  <handy-uploader
217 |     :fileAccept= "'image/png,image/gif,image/jpeg,image/webp'"
218 |   >
219 |  <handy-uploader>
220 |  ```
221 | 
222 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `Important: ` If don`t send fileAccept, file uploader accept all file formats.
223 | 
224 | 
225 | 
226 | ---
227 | &nbsp;
228 | 
229 | ### &nbsp;&nbsp;&nbsp;&nbsp; `imageCompressor`
230 | &nbsp;
231 | 
232 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; handy-uploader, Uses the Browser's native [canvas.toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/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.
233 | 
234 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
235 | 
236 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` true ` 
237 | 
238 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
239 | ``` html
240 |  <handy-uploader
241 |     :imageCompressor= "true"
242 |    >
243 |  <handy-uploader>
244 |  ```
245 | 
246 | ---
247 | &nbsp;
248 | 
249 | ### &nbsp;&nbsp;&nbsp;&nbsp; `imageCompressLevel`
250 | &nbsp;
251 | 
252 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; A Number between 0 and 1 indicating image quality.
253 | 
254 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Number `
255 | 
256 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` 0.5 ` 
257 | 
258 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
259 | ``` html
260 |  <handy-uploader
261 |     :imageCompressLevel= "0.6"
262 |   >
263 |  <handy-uploader>
264 |  ```
265 | 
266 | 
267 | ---
268 | &nbsp;
269 | 
270 | ### &nbsp;&nbsp;&nbsp;&nbsp; `maxFileSize`
271 | &nbsp;
272 | 
273 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Maximum of file size upload. sent in prop to KB
274 | 
275 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Number `
276 | 
277 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` 5120 `  &nbsp;kb
278 | 
279 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
280 | ``` html
281 |  <handy-uploader
282 |     :maxFileSize= "10240"
283 |   >
284 |  <handy-uploader>
285 |  ```
286 | 
287 | ---
288 | &nbsp;
289 | 
290 | ### &nbsp;&nbsp;&nbsp;&nbsp; `maxFileCount`
291 | &nbsp;
292 | 
293 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Maximum of file upload
294 | 
295 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Number `
296 | 
297 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` 0 ` 
298 | 
299 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
300 | ``` html
301 |  <handy-uploader
302 |     :maxFileCount= "5"
303 |   >
304 |  <handy-uploader>
305 |  ```
306 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; If you dont send maxFileCount, You can upload files without restrictions.
307 | 
308 | ---
309 | &nbsp;
310 | 
311 | ### &nbsp;&nbsp;&nbsp;&nbsp; `thumb`
312 | &nbsp;
313 | 
314 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; show / hidden thumb for images in `table` and `simple` file uploader
315 | 
316 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
317 | 
318 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `true` 
319 | 
320 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
321 | ``` html
322 |  <handy-uploader
323 |     :thumb= "true"
324 |   >
325 |  <handy-uploader>
326 |  ```
327 | ---
328 | &nbsp;
329 | 
330 | ### &nbsp;&nbsp;&nbsp;&nbsp; `tableThumbColumn`
331 | &nbsp;
332 | 
333 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; show / hidden thumb column in `table` file uploader
334 | 
335 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
336 | 
337 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `true` 
338 | 
339 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
340 | ``` html
341 |  <handy-uploader
342 |     :tableThumbColumn= "false"
343 |   >
344 |  <handy-uploader>
345 |  ```
346 | ---
347 | &nbsp;
348 | 
349 | ### &nbsp;&nbsp;&nbsp;&nbsp; `tableFixedHeader`
350 | &nbsp;
351 | 
352 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; enable / disable table fixed header
353 | 
354 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
355 | 
356 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `true` 
357 | 
358 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
359 | ``` html
360 |  <handy-uploader
361 |     :tableFixedHeader= "false"
362 |   >
363 |  <handy-uploader>
364 |  ```
365 | ---
366 | &nbsp;
367 | 
368 | ### &nbsp;&nbsp;&nbsp;&nbsp; `tableHeight`
369 | &nbsp;
370 | 
371 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Set table height in `px`.
372 | 
373 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Number `
374 | 
375 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `400` 
376 | 
377 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
378 | ``` html
379 |  <handy-uploader
380 |     :tableHeight= "500"
381 |   >
382 |  <handy-uploader>
383 |  ```
384 | 
385 | ---
386 | &nbsp;
387 | 
388 | ### &nbsp;&nbsp;&nbsp;&nbsp; `badgeCounter`
389 | &nbsp;
390 | 
391 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Badge file counter state.
392 | 
393 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
394 | 
395 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `true` 
396 | 
397 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
398 | ``` html
399 |  <handy-uploader
400 |     :badgeCounter= "false"
401 |   >
402 |  <handy-uploader>
403 |  ```
404 | ---
405 | &nbsp;
406 | 
407 | ### &nbsp;&nbsp;&nbsp;&nbsp; `rtlSupport`
408 | &nbsp;
409 | 
410 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Enable RTL support languages.
411 | 
412 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
413 | 
414 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `false` 
415 | 
416 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
417 | ``` html
418 |  <handy-uploader
419 |     :rtlSupport= "true"
420 |   >
421 |  <handy-uploader>
422 |  ```
423 | 
424 | ---
425 | &nbsp;
426 | 
427 | ### &nbsp;&nbsp;&nbsp;&nbsp; `lang`
428 | &nbsp;
429 | 
430 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Change file uploader languages.
431 | 
432 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Examples: &nbsp; English  &nbsp;`en` &nbsp;, &nbsp; Persian &nbsp; `fa`&nbsp;, &nbsp; French &nbsp;`fr`&nbsp;, &nbsp;Chinese &nbsp; `ch`&nbsp;, &nbsp; Arabic &nbsp;`ar`
433 | 
434 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` String `
435 | 
436 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `en` 
437 | 
438 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
439 | ``` html
440 |  <handy-uploader
441 |     :lang= "'fa'"
442 |   >
443 |  <handy-uploader>
444 |  ```
445 | ---
446 | &nbsp;
447 | 
448 | ### &nbsp;&nbsp;&nbsp;&nbsp; `customLang`
449 | &nbsp;
450 | 
451 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Define Custom language for uploader.
452 | 
453 | 
454 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Object `
455 | 
456 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `null` 
457 | 
458 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
459 | ``` html
460 |  <handy-uploader
461 |     :lang= "'custom'"
462 |     :customLang= "customLang"
463 |   >
464 |  <handy-uploader>
465 |  ```
466 | 
467 | ``` js
468 | <script>
469 |     import handyUploader from 'handy-uploader/src/components/handyUploader';
470 |     export default {
471 |         components: {
472 |             handyUploader,
473 |         },
474 |         data: () => ({
475 |             handyAttachments: [],
476 |             customLang : {
477 |               custom : {
478 |                 insertFile: 'Insert File',
479 |                 insertNewFile: 'Insert New File1,
480 |                 add: 'Add',
481 |                 delete: 'Delete',
482 |                 edit: 'Edit',
483 |                 deleteDialog: {
484 |                   message: 'Are you sure you want to delete the file?',
485 |                   cancel: 'cancel',
486 |                 },
487 |                 table: {
488 |                   thumb: 'Thumb',
489 |                   name: 'Name',
490 |                   size: 'Size',
491 |                   tags: 'tags',
492 |                   action: {
493 |                     action: 'Action',
494 |                     deleteTooltip: 'Delete'
495 |                   }
496 |                 },
497 |                 size: {
498 |                   kb: 'KB',
499 |                   mb: 'MB',
500 |                 },
501 |                 maxFileSizeAlert: 'Max file Size is',
502 |                 maxFileCountAlert: 'Max file Count is',
503 |                 fileName: 'File Name',
504 |                 fileDescription: 'File Description',
505 |                 fileTags: 'File Tags',
506 |               }
507 |             },
508 |         }),
509 |     }
510 |  </script>
511 |  ```
512 | ---
513 | &nbsp;
514 | 
515 | ### &nbsp;&nbsp;&nbsp;&nbsp; `btnColor`
516 | &nbsp;
517 | 
518 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; change Button color.
519 | 
520 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` String `
521 | 
522 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `info` 
523 | 
524 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
525 | ``` html
526 |  <handy-uploader
527 |     :btnColor= "'#00796B'"
528 |   >
529 |  <handy-uploader>
530 |  ```
531 | 
532 | ---
533 | &nbsp;
534 | 
535 | ### &nbsp;&nbsp;&nbsp;&nbsp; `changeFileName`
536 | &nbsp;
537 | 
538 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Change file name before upload.
539 | 
540 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
541 | 
542 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `false` 
543 | 
544 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
545 | ``` html
546 |  <handy-uploader
547 |     :changeFileName= "true"
548 |   >
549 |  <handy-uploader>
550 |  ```
551 | 
552 | ---
553 | &nbsp;
554 | 
555 | ### &nbsp;&nbsp;&nbsp;&nbsp; `addFileDescription`
556 | &nbsp;
557 | 
558 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Add file Description before upload.
559 | 
560 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
561 | 
562 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `false` 
563 | 
564 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
565 | ``` html
566 |  <handy-uploader
567 |     :addFileDescription= "true"
568 |   >
569 |  <handy-uploader>
570 |  ```
571 | 
572 | ---
573 | &nbsp;
574 | 
575 | ### &nbsp;&nbsp;&nbsp;&nbsp; `addFileTag`
576 | &nbsp;
577 | 
578 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Add file tags before upload.
579 | 
580 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean `
581 | 
582 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; `false` 
583 | 
584 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
585 | ``` html
586 |  <handy-uploader
587 |     :addFileTag= "true"
588 |   >
589 |  <handy-uploader>
590 |  ```
591 | 
592 | ---
593 | &nbsp;
594 | 
595 | ### &nbsp;&nbsp;&nbsp;&nbsp; `tags`
596 | &nbsp;
597 | 
598 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Array of file tags.
599 | 
600 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Array ` 
601 | 
602 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
603 | ``` html
604 |  <handy-uploader
605 |     :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
606 |   >
607 |  <handy-uploader>
608 |  ```
609 | 
610 | ---
611 | &nbsp;
612 | 
613 | ### &nbsp;&nbsp;&nbsp;&nbsp; `cols`
614 | &nbsp;
615 | 
616 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Change count of columns.
617 | 
618 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Number ` 
619 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` 4 ` 
620 | 
621 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
622 | ``` html
623 |  <handy-uploader
624 |     :cols= "6"
625 |   >
626 |  <handy-uploader>
627 |  ```
628 | 
629 | ---
630 | &nbsp;
631 | 
632 | ### &nbsp;&nbsp;&nbsp;&nbsp; `editPermission`
633 | &nbsp;
634 | 
635 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Set edit Permission for edit attachment details.
636 | 
637 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean ` 
638 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` true ` 
639 | 
640 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
641 | ``` html
642 |  <handy-uploader
643 |     :editPermission= "false"
644 |   >
645 |  <handy-uploader>
646 |  ```
647 | 
648 | ---
649 | &nbsp;
650 | 
651 | ### &nbsp;&nbsp;&nbsp;&nbsp; `deletePermission`
652 | &nbsp;
653 | 
654 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Set delete Permission for delete attachment details.
655 | 
656 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Type: &nbsp;&nbsp; ` Boolean ` 
657 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Default: &nbsp;&nbsp; ` true ` 
658 | 
659 | #### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Usage:
660 | ``` html
661 |  <handy-uploader
662 |     :deletePermission= "false"
663 |   >
664 |  <handy-uploader>
665 |  ```
666 | 
667 | ---
668 | &nbsp;
669 | 
670 | 
671 | # Code Examples
672 | &nbsp;
673 | ### &nbsp;&nbsp;&nbsp;&nbsp; Thumbnail
674 | 
675 | ``` html
676 | <handy-uploader
677 |     :documentAttachment.sync="handyAttachments"
678 |     :fileUploaderType= "'thumbnail'"
679 |     :maxFileSize= "10240"
680 |     :imageCompressor= "true"
681 |     :imageCompressLevel= "0.8"
682 |     :maxFileCount="10"
683 |     :badgeCounter= "true"
684 |     :changeFileName="true"
685 |     :addFileDescription="true"
686 |     :addFileTag="true"
687 |     :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
688 | >
689 | </vue-file-uploader>
690 | ```
691 | 
692 | ``` js
693 | <script>
694 |     import handyUploader from 'handy-uploader/src/components/handyUploader';
695 |     export default {
696 |         components: {
697 |             handyUploader,
698 |         },
699 |         data: () => ({
700 |             handyAttachments: [],
701 |         }),
702 |     }
703 |  </script>
704 |  ```
705 | 
706 | &nbsp;&nbsp;&nbsp;&nbsp; `handyAttachments` The Array you define for file uploader
707 | 
708 | &nbsp;
709 | 
710 | ---
711 | 
712 | &nbsp;
713 | ### &nbsp;&nbsp;&nbsp;&nbsp; Simple
714 | 
715 | ``` html
716 | <vue-file-uploader
717 |     :documentAttachment.sync="handyAttachments"
718 |     :fileUploaderType= "'simple'"
719 |     :maxFileSize= "10240"
720 |     :imageCompressor= "true"
721 |     :imageCompressLevel= "0.8"
722 |     :maxFileCount= "10"
723 |     :badgeCounter= "true"
724 |     :thumb= "false"
725 |     :changeFileName="true"
726 |     :addFileDescription="true"
727 |     :addFileTag="true"
728 |     :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
729 | >
730 | </handy-uploader>
731 | ```
732 | 
733 | ``` js
734 | <script>
735 |     import handyUploader from 'handy-uploader/src/components/handyUploader';
736 |     export default {
737 |         components: {
738 |             handyUploader,
739 |         },
740 |         data: () => ({
741 |             handyAttachments: [],
742 |         }),
743 |     }
744 |  </script>
745 |  ```
746 | 
747 | &nbsp;&nbsp;&nbsp;&nbsp; `handyAttachments` The Array you define for file uploader
748 | 
749 | &nbsp;
750 | 
751 | ---
752 | 
753 | &nbsp;
754 | ### &nbsp;&nbsp;&nbsp;&nbsp; Table
755 | 
756 | ``` html
757 | <handy-uploader
758 |     :documentAttachment.sync="handyAttachments"
759 |     :fileUploaderType= "'table'"
760 |     :maxFileSize= "10240"
761 |     :imageCompressor= "true"
762 |     :imageCompressLevel= "0.8"
763 |     :maxFileCount= "10"
764 |     :badgeCounter= "true"
765 |     :thumb= "true"
766 |     :tableFixedHeader= "true"
767 |     :tableHeight= "400"
768 |     :tableThumbColumn= "true"
769 |     :changeFileName="true"
770 |     :addFileDescription="true"
771 |     :addFileTag="true"
772 |     :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
773 | >
774 | </handy-uploader>
775 | ```
776 | 
777 | ``` js
778 | <script>
779 |     import handyUploader from 'handy-uploader/src/components/handyUploader';
780 |     export default {
781 |         components: {
782 |             handyUploader,
783 |         },
784 |         data: () => ({
785 |             handyAttachments: [],
786 |         }),
787 |     }
788 |  </script>
789 | ```
790 | 
791 | &nbsp;&nbsp;&nbsp;&nbsp; `handyAttachments` The Array you define for file uploader
792 | 


--------------------------------------------------------------------------------
/components/fileUploader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-container>
  3 |     <v-row>
  4 |       <v-col cols="12" md="12" xs="12">
  5 |         <InsertButton
  6 |           :documentAttachment="documentAttachment"
  7 |           :selectedLang="selectedLang"
  8 |           :lang="lang"
  9 |           :badgeCounter="badgeCounter"
 10 |           :btnColor="btnColor"
 11 |           :maxFileCount="maxFileCount"
 12 |           @openInputDocumentModal="openInputDocumentModal"
 13 |         >
 14 |         </InsertButton>
 15 |         <SimpleUploader
 16 |           v-if="fileUploaderType === 'simple'"
 17 |           :documentAttachment="documentAttachment"
 18 |           :cols="cols"
 19 |           :thumb="thumb"
 20 |           :outlined="outlined"
 21 |           :raised="raised"
 22 |           :shaped="shaped"
 23 |           :tile="tile"
 24 |           :lang="lang"
 25 |           :cardType="cardType"
 26 |           :deletePermission="deletePermission"
 27 |           :editPermission="editPermission"
 28 |           :selectedLang="selectedLang"
 29 |           @setCardTheme="setCardTheme"
 30 |           @openDeleteDialog="openDeleteDialog"
 31 |           @openEditDocumentDialog="openEditDocumentDialog"
 32 |         >
 33 |         </SimpleUploader>
 34 |         <ThumbnailUploader
 35 |           v-if="fileUploaderType === 'thumbnail'"
 36 |           :documentAttachment="documentAttachment"
 37 |           :cols="cols"
 38 |           :thumb="thumb"
 39 |           :outlined="outlined"
 40 |           :raised="raised"
 41 |           :shaped="shaped"
 42 |           :tile="tile"
 43 |           :lang="lang"
 44 |           :cardType="cardType"
 45 |           :deletePermission="deletePermission"
 46 |           :editPermission="editPermission"
 47 |           :selectedLang="selectedLang"
 48 |           @setCardTheme="setCardTheme"
 49 |           @openDeleteDialog="openDeleteDialog"
 50 |           @openEditDocumentDialog="openEditDocumentDialog"
 51 |         >
 52 |         </ThumbnailUploader>
 53 |         <TableUploader
 54 |           v-if="fileUploaderType === 'table'"
 55 |           :documentAttachment="documentAttachment"
 56 |           :cols="cols"
 57 |           :thumb="thumb"
 58 |           :outlined="outlined"
 59 |           :raised="raised"
 60 |           :shaped="shaped"
 61 |           :tile="tile"
 62 |           :lang="lang"
 63 |           :tableThumbColumn="tableThumbColumn"
 64 |           :tableFixedHeader="tableFixedHeader"
 65 |           :tableHeight="tableHeight"
 66 |           :cardType="cardType"
 67 |           :deletePermission="deletePermission"
 68 |           :editPermission="editPermission"
 69 |           :selectedLang="selectedLang"
 70 |           @setCardTheme="setCardTheme"
 71 |           @openDeleteDialog="openDeleteDialog"
 72 |           @openEditDocumentDialog="openEditDocumentDialog"
 73 |         >
 74 |         </TableUploader>
 75 |       </v-col>
 76 |     </v-row>
 77 |     <!--Insert New Document Dialog Start-->
 78 |     <v-row justify="center">
 79 |       <v-dialog
 80 |         v-model="insertDocumentDialog"
 81 |         :scrollable="false"
 82 |         persistent
 83 |         width="50%"
 84 |       >
 85 |         <v-card>
 86 |           <v-card-title>
 87 |             <v-icon @click="insertDocumentDialog = false">mdi-close</v-icon>
 88 |           </v-card-title>
 89 |           <v-card-text class="BYekan">
 90 |             <template v-if="tempAttachment.length === 0">
 91 |               <v-file-input
 92 |                 v-if="fileAccept !== ''"
 93 |                 multiple
 94 |                 :accept="fileAccept"
 95 |                 chip
 96 |                 v-model="tempAttachment"
 97 |                 :label="selectedLang[lang].insertNewFile"
 98 |               ></v-file-input>
 99 |               <v-file-input
100 |                 v-else
101 |                 multiple
102 |                 v-model="tempAttachment"
103 |                 :label="selectedLang[lang].insertNewFile"
104 |               ></v-file-input>
105 |             </template>
106 |             <template>
107 |               <v-expansion-panels
108 |                 v-if="addFileTag || addFileDescription || changeFileName"
109 |               >
110 |                 <v-expansion-panel
111 |                   v-for="(attachment, index) in tempAttachmentChanged"
112 |                   :key="`attachment-${index}`"
113 |                 >
114 |                   <v-expansion-panel-header>{{
115 |                     attachment.name
116 |                   }}</v-expansion-panel-header>
117 |                   <v-expansion-panel-content>
118 |                     <v-row align="center" justify="center">
119 |                       <v-col cols="12" lg="9" md="9" xs="12">
120 |                         <v-text-field
121 |                           v-if="changeFileName"
122 |                           :label="selectedLang[lang].fileName"
123 |                           v-model="attachment.name"
124 |                           :prepend-icon="attachment.icon"
125 |                         >
126 |                         </v-text-field>
127 |                         <v-textarea
128 |                           v-if="addFileDescription"
129 |                           :label="selectedLang[lang].fileDescription"
130 |                           auto-grow
131 |                           row-height="1"
132 |                           v-model="attachment.description"
133 |                         >
134 |                         </v-textarea>
135 |                         <v-autocomplete
136 |                           v-if="addFileTag"
137 |                           v-model="attachment.tags"
138 |                           :items="tags"
139 |                           dense
140 |                           chips
141 |                           :label="selectedLang[lang].fileTags"
142 |                           multiple
143 |                         ></v-autocomplete>
144 |                       </v-col>
145 |                       <v-col align="center" cols="12" lg="3" md="3" xs="12">
146 |                         <template
147 |                           v-if="
148 |                             attachment.format === 'jpg' ||
149 |                               attachment.format === 'jpeg' ||
150 |                               attachment.format === 'png' ||
151 |                               attachment.format === 'tif' ||
152 |                               attachment.format === 'bmp'
153 |                           "
154 |                         >
155 |                           <v-card>
156 |                             <v-img :src="attachment.base64"></v-img>
157 |                           </v-card>
158 |                         </template>
159 |                         <template v-else>
160 |                           <select-file-icon-type
161 |                             :file-format="attachment.format"
162 |                             :size="60"
163 |                           >
164 |                           </select-file-icon-type>
165 |                         </template>
166 |                       </v-col>
167 |                     </v-row>
168 |                   </v-expansion-panel-content>
169 |                 </v-expansion-panel>
170 |               </v-expansion-panels>
171 |               <v-card v-else class="mx-auto" tile>
172 |                 <v-list-item
173 |                   v-for="(attachment, index) in tempAttachmentChanged"
174 |                   :key="`attachment-${index}`"
175 |                   style="border-bottom: 1px solid #E0E0E0"
176 |                 >
177 |                   <v-list-item-content>
178 |                     <v-list-item-title>
179 |                       <select-file-icon-type :file-format="attachment.format">
180 |                       </select-file-icon-type>
181 |                       {{ attachment.name }}.{{ attachment.format }}
182 |                     </v-list-item-title>
183 |                   </v-list-item-content>
184 |                 </v-list-item>
185 |               </v-card>
186 |             </template>
187 |           </v-card-text>
188 |           <v-card-actions>
189 |             <v-btn
190 |               class="BYekan"
191 |               :disabled="tempAttachment == null || btnLoader"
192 |               :loading="btnLoader"
193 |               :color="btnColor"
194 |               @click="uploadFieldChange"
195 |               >{{ selectedLang[lang].add }}</v-btn
196 |             >
197 |           </v-card-actions>
198 |         </v-card>
199 |       </v-dialog>
200 |     </v-row>
201 |     <!--Insert New Document Dialog End-------------------------------------------------------------------->
202 |     <!--Update Document Dialog Start---------------------------------------------------------------------->
203 |     <v-row justify="center">
204 |       <v-dialog
205 |         v-model="editDocumentDialog"
206 |         :scrollable="false"
207 |         persistent
208 |         width="50%"
209 |       >
210 |         <v-card>
211 |           <v-card-title>
212 |             <v-icon @click="editDocumentDialog = false">mdi-close</v-icon>
213 |           </v-card-title>
214 |           <v-card-text
215 |             v-for="(attachment, index) in tempAttachmentChanged"
216 |             :key="`attachment-${index}`"
217 |             class="BYekan"
218 |           >
219 |             <v-row align="center" justify="center">
220 |               <v-col cols="12" lg="9" md="9" xs="12">
221 |                 <v-text-field
222 |                   v-if="changeFileName"
223 |                   :label="selectedLang[lang].fileName"
224 |                   v-model="attachment.name"
225 |                   :prepend-icon="attachment.icon"
226 |                 >
227 |                 </v-text-field>
228 |                 <v-textarea
229 |                   v-if="addFileDescription"
230 |                   :label="selectedLang[lang].fileDescription"
231 |                   auto-grow
232 |                   row-height="1"
233 |                   v-model="attachment.description"
234 |                 >
235 |                 </v-textarea>
236 |                 <v-autocomplete
237 |                   v-if="addFileTag"
238 |                   v-model="attachment.tags"
239 |                   :items="tags"
240 |                   dense
241 |                   chips
242 |                   :label="selectedLang[lang].fileTags"
243 |                   multiple
244 |                 ></v-autocomplete>
245 |               </v-col>
246 |               <v-col align="center" cols="12" lg="3" md="3" xs="12">
247 |                 <template
248 |                   v-if="
249 |                     attachment.name
250 |                       .split('.')
251 |                       .pop()
252 |                       .toLowerCase() === 'jpg' ||
253 |                       attachment.name
254 |                         .split('.')
255 |                         .pop()
256 |                         .toLowerCase() === 'jpeg' ||
257 |                       attachment.name
258 |                         .split('.')
259 |                         .pop()
260 |                         .toLowerCase() === 'png' ||
261 |                       attachment.name
262 |                         .split('.')
263 |                         .pop()
264 |                         .toLowerCase() === 'tif' ||
265 |                       attachment.name
266 |                         .split('.')
267 |                         .pop()
268 |                         .toLowerCase() === 'bmp'
269 |                   "
270 |                 >
271 |                   <v-card>
272 |                     <v-img
273 |                       :src="
274 |                         'data:' + attachment.format + ',' + attachment.base64
275 |                       "
276 |                     ></v-img>
277 |                   </v-card>
278 |                 </template>
279 |                 <template v-else>
280 |                   <select-file-icon-type
281 |                     :file-format="attachment.format"
282 |                     :size="60"
283 |                   >
284 |                   </select-file-icon-type>
285 |                 </template>
286 |               </v-col>
287 |             </v-row>
288 |           </v-card-text>
289 |           <v-card-actions>
290 |             <v-btn
291 |               class="BYekan"
292 |               :disabled="tempAttachment === null || btnLoader"
293 |               :loading="btnLoader"
294 |               :color="btnColor"
295 |               @click="editDocument"
296 |               >{{ selectedLang[lang].edit }}</v-btn
297 |             >
298 |           </v-card-actions>
299 |         </v-card>
300 |       </v-dialog>
301 |     </v-row>
302 |     <!--Update Document Dialog End------------------------------------------------------------------------>
303 | 
304 |     <!--File Uploader SnackBar Alert Start --------------------------------------------------------------->
305 |     <v-snackbar
306 |       class="BYekan"
307 |       v-model="fileUploaderSnackBarAlert"
308 |       right
309 |       bottom
310 |       :color="fileUploaderSnackBarAlertColor"
311 |       :timeout="3000"
312 |     >
313 |       {{ fileUploaderSnackText }}
314 |       <v-btn color="white" text @click="fileUploaderSnackBarAlert = false">
315 |         <v-icon>mdi-close</v-icon>
316 |       </v-btn>
317 |     </v-snackbar>
318 |     <!--File Uploader SnackBar Alert Start -->
319 |     <!--DELETE Dialog End----------------------------------------------------------START---->
320 |     <v-row justify="center">
321 |       <v-dialog v-model="deleteDocumentDialog" persistent width="30%">
322 |         <v-card>
323 |           <v-card-title>
324 |             <v-icon color="red"></v-icon>
325 |           </v-card-title>
326 |           <v-card-text class="BYekan">
327 |             {{ selectedLang[lang].deleteDialog.message }}
328 |           </v-card-text>
329 |           <v-card-actions>
330 |             <v-spacer></v-spacer>
331 |             <v-btn
332 |               class="BYekan"
333 |               color="green darken-1"
334 |               text
335 |               @click="deleteDocumentDialog = false"
336 |               >{{ selectedLang[lang].deleteDialog.cancel }}</v-btn
337 |             >
338 |             <v-btn
339 |               class="BYekan"
340 |               color="primary"
341 |               :disabled="btnLoader"
342 |               :loading="btnLoader"
343 |               @click="deleteDocument"
344 |               >{{ selectedLang[lang].delete }}
345 |             </v-btn>
346 |           </v-card-actions>
347 |         </v-card>
348 |       </v-dialog>
349 |     </v-row>
350 |     <!--DELETE Dialog End----------------------------------------------------------------END---->
351 |   </v-container>
352 | </template>
353 | 
354 | <script>
355 | /**
356 |  * This is an example of uploading files. with this component you can see, insert, delete files.
357 |  * @version 1.0
358 |  * @author [ali jahanpak](https://github.com/alijahanpak)
359 |  * @since Version 1.0
360 |  */
361 | import InsertButton from "@/components/InsertButton.vue";
362 | import SimpleUploader from "@/components/SimpleUploader.vue";
363 | import ThumbnailUploader from "@/components/ThumbnailUploader.vue";
364 | import TableUploader from "@/components/TableUploader.vue";
365 | import SelectFileIconType from "@/components/SelectFileIconType.vue";
366 | import languages from "./language";
367 | export default {
368 |   components: {
369 |     InsertButton,
370 |     SimpleUploader,
371 |     ThumbnailUploader,
372 |     TableUploader,
373 |     SelectFileIconType
374 |   },
375 |   props: {
376 |     /**
377 |      * Array contain files
378 |      */
379 |     documentAttachment: [Array],
380 |     /**
381 |      * Send api url for 'add' and 'delete'.
382 |      * f.e: /building/add or /building/delete
383 |      */
384 |     maxFileSize: {
385 |       type: Number,
386 |       default: 5120
387 |     },
388 |     /**
389 |      * choose File Uploader Type
390 |      */
391 |     fileUploaderType: {
392 |       type: String,
393 |       default: "thumbnail"
394 |     },
395 |     /**
396 |      * Maximum file Upload
397 |      */
398 |     maxFileCount: {
399 |       type: Number,
400 |       default: 0
401 |     },
402 |     /**
403 |      * choose File Uploader Card Type
404 |      */
405 |     cardType: String,
406 |     /**
407 |      * Badge file counter state
408 |      */
409 |     badgeCounter: {
410 |       type: Boolean,
411 |       default: true
412 |     },
413 |     /**
414 |      * change Button Color
415 |      */
416 |     btnColor: {
417 |       type: String,
418 |       default: "info"
419 |     },
420 |     /**
421 |      * Enable / Disable image compressor
422 |      */
423 |     imageCompressor: Boolean,
424 |     /**
425 |      * Image compress level (0 to 1)
426 |      */
427 |     imageCompressLevel: {
428 |       type: Number,
429 |       default: 0.5
430 |     },
431 |     /**
432 |      * Accept uploaded files
433 |      */
434 |     fileAccept: String,
435 |     /**
436 |      * show / hidden thumb for images in table and simple file uploader
437 |      */
438 |     thumb: {
439 |       type: Boolean,
440 |       default: true
441 |     },
442 |     /**
443 |      * show / hidden thumb column in table file uploader
444 |      */
445 |     tableThumbColumn: Boolean,
446 |     /**
447 |      * enable / disable table fixed header
448 |      */
449 |     tableFixedHeader: {
450 |       type: Boolean,
451 |       default: true
452 |     },
453 |     /**
454 |      * set table height
455 |      */
456 |     tableHeight: {
457 |       type: Number,
458 |       default: 400
459 |     },
460 |     /**
461 |      * Enable RTL support languages
462 |      */
463 |     rtlSupport: {
464 |       type: Boolean,
465 |       default: false
466 |     },
467 |     /**
468 |      * Change file uploader languages
469 |      */
470 |     lang: {
471 |       type: String,
472 |       default: "en"
473 |     },
474 |     /**
475 |      * Change file Name before upload
476 |      */
477 |     changeFileName: {
478 |       type: Boolean,
479 |       default: false
480 |     },
481 |     /**
482 |      * Add file Description before upload
483 |      */
484 |     addFileDescription: {
485 |       type: Boolean,
486 |       default: false
487 |     },
488 |     /**
489 |      * Add file tags before upload
490 |      */
491 |     addFileTag: {
492 |       type: Boolean,
493 |       default: false
494 |     },
495 |     /**
496 |      * Array of file tags
497 |      */
498 |     tags: {
499 |       type: Array
500 |     },
501 |     /**
502 |      * Change count of columns
503 |      */
504 |     cols: {
505 |       type: Number,
506 |       default: 4
507 |     },
508 |     /**
509 |      * Define Custom language for uploader
510 |      */
511 |     customLang: {
512 |       type: Object,
513 |       default: null
514 |     },
515 |     /**
516 |      * Set Insert/Add new file Permission
517 |      */
518 |     insertPermission: {
519 |       type: Boolean,
520 |       default: true
521 |     },
522 |     /**
523 |      * Set edit Permission
524 |      */
525 |     editPermission: {
526 |       type: Boolean,
527 |       default: true
528 |     },
529 |     /**
530 |      * Set delete Permission
531 |      */
532 |     deletePermission: {
533 |       type: Boolean,
534 |       default: true
535 |     }
536 |   },
537 |   data: () => ({
538 |     insertDocumentDialog: false,
539 |     editDocumentDialog: false,
540 |     deleteDocumentDialog: false,
541 |     tempAttachment: [],
542 |     tempAttachmentChanged: [],
543 |     fileUploaderSnackBarAlert: false,
544 |     fileUploaderSnackText: "",
545 |     fileUploaderSnackBarAlertColor: "green",
546 |     readerFile: null,
547 |     registryDocFile: [],
548 |     documentAttachmentAPI: [],
549 |     btnLoader: false,
550 |     showDetail: false,
551 |     showDetailState: [],
552 |     selectedIndex: "",
553 |     selectedId: "",
554 |     returnedRecord: {},
555 |     //Card Theme
556 |     outlined: false,
557 |     raised: false,
558 |     shaped: false,
559 |     tile: false,
560 |     selectedLang: {},
561 |     beforeInsertAttachments: {},
562 |     attachmentIndex: ""
563 |   }),
564 |   watch: {
565 |     tempAttachment: function(newValue) {
566 |       if (this.tempAttachment.length > 0) this.getAttachmentDetails(newValue);
567 |       else this.tempAttachmentChanged = [];
568 |     },
569 |     cardType: function() {
570 |       this.$emit("update:cardType", this.cardType);
571 |       this.setCardTheme();
572 |     },
573 |     badgeCounter: function() {
574 |       this.$emit("update:badgeCounter", this.badgeCounter);
575 |     },
576 |     maxFileCount: function() {
577 |       this.$emit("update:maxFileCount", this.maxFileCount);
578 |     },
579 |     maxFileSize: function() {
580 |       this.$emit("update:maxFileSize", Number(this.maxFileSize));
581 |     },
582 |     imageCompressor: function() {
583 |       this.$emit("update:imageCompressor", this.imageCompressor);
584 |     },
585 |     imageCompressLevel: function() {
586 |       this.$emit("update:imageCompressLevel", this.imageCompressLevel);
587 |     },
588 |     fileAccept: function() {
589 |       this.$emit("update:fileAccept", this.fileAccept);
590 |     },
591 |     thumb: function() {
592 |       this.$emit("update:thumb", this.thumb);
593 |     },
594 |     changeFileName: function() {
595 |       this.$emit("update:changeFileName", this.changeFileName);
596 |     },
597 |     addFileDescription: function() {
598 |       this.$emit("update:addFileDescription", this.addFileDescription);
599 |     },
600 |     addFileTag: function() {
601 |       this.$emit("update:addFileTag", this.addFileTag);
602 |     },
603 |     tableThumbColumn: function() {
604 |       this.$emit("update:tableThumbColumn", this.tableThumbColumn);
605 |     },
606 |     tableFixedHeader: function() {
607 |       this.$emit("update:tableFixedHeader", this.tableFixedHeader);
608 |     },
609 |     tableHeight: function() {
610 |       this.$emit("update:tableHeight", this.tableHeight);
611 |     },
612 |     lang: function() {
613 |       this.$emit("update:lang", this.lang);
614 |     }
615 |   },
616 |   created() {
617 |     if (this.rtlSupport) this.changeRTL();
618 |     this.setLang();
619 |     this.setCardTheme();
620 |   },
621 |   destroyed() {
622 |     this.registryDocFile = [];
623 |   },
624 |   methods: {
625 |     openInputDocumentModal() {
626 |       this.btnLoader = false;
627 |       this.tempAttachment = [];
628 |       this.insertDocumentDialog = true;
629 |     },
630 | 
631 |     setLang() {
632 |       if (this.customLang !== null) this.selectedLang = this.customLang;
633 |       else this.selectedLang = languages;
634 |     },
635 |     changeRTL() {
636 |       this.$vuetify.rtl = true;
637 |     },
638 |     setCardTheme() {
639 |       switch (this.cardType) {
640 |         case "default":
641 |           this.outlined = false;
642 |           this.raised = false;
643 |           this.shaped = false;
644 |           this.tile = false;
645 |           break;
646 |         case "outlined":
647 |           this.outlined = true;
648 |           this.raised = false;
649 |           this.shaped = false;
650 |           this.tile = false;
651 |           break;
652 |         case "shaped":
653 |           this.shaped = true;
654 |           this.raised = false;
655 |           this.outlined = false;
656 |           this.tile = false;
657 |           break;
658 |         case "raised":
659 |           this.raised = true;
660 |           this.shaped = false;
661 |           this.outlined = false;
662 |           this.tile = false;
663 |           break;
664 |         case "tile":
665 |           this.tile = true;
666 |           this.shaped = false;
667 |           this.outlined = false;
668 |           this.raised = false;
669 |           break;
670 |       }
671 |     },
672 | 
673 |     handleUpload(fileAttachment) {
674 |       let reader = new FileReader();
675 |       return new Promise(function(resolve) {
676 |         reader.onloadend = () => {
677 |           resolve(reader.result);
678 |         };
679 |         reader.readAsDataURL(fileAttachment);
680 |       });
681 |     },
682 | 
683 |     /**
684 |      * asynchronous method to insert selected file(s)
685 |      *
686 |      * @public
687 |      * @returns {Array} selected file(s)
688 |      */
689 |     async uploadFieldChange() {
690 |       this.btnLoader = true;
691 |       for (let [index, item] of this.tempAttachment.entries()) {
692 |         if (this.documentAttachment.length < this.maxFileCount) {
693 |           if ((item.size / 1000).toFixed(1) > this.maxFileSize) {
694 |             this.fileUploaderSnackBarAlertColor = "red";
695 |             this.fileUploaderSnackText = `${
696 |               this.selectedLang[this.lang].maxFileSizeAlert
697 |             } ${Math.round(this.maxFileSize / 1024)} ${
698 |               this.selectedLang[this.lang].size.mb
699 |             }`;
700 |             this.fileUploaderSnackBarAlert = true;
701 |           } else {
702 |             let tempFile = {};
703 |             let file = {};
704 |             try {
705 |               console.log(item);
706 |               this.readerFile = await this.handleUpload(item);
707 |             } catch (e) {
708 |               console.log(e);
709 |             }
710 |             let fullFileType = this.readerFile.split(";");
711 |             let fileType = fullFileType[0].split(":");
712 |             let status = false;
713 |             let imgFile = "";
714 |             let sizeInKb = 0;
715 |             if (this.imageCompressor) {
716 |               if (
717 |                 fileType[1] === "image/png" ||
718 |                 fileType[1] === "image/jpg" ||
719 |                 fileType[1] === "image/jpeg" ||
720 |                 fileType[1] === "application/octet-stream" ||
721 |                 fileType[1] === "image/webp"
722 |               ) {
723 |                 status = true;
724 |                 imgFile = await this.compressImage(
725 |                   this.readerFile,
726 |                   fileType[1]
727 |                 );
728 |               }
729 |             }
730 |             //tempFile.subject= this.tempAttachmentChanged[index].name + '.' + this.tempAttachmentChanged[index].format;
731 |             let strTemp = this.readerFile.split(",");
732 |             if (status) {
733 |               let imgTemp = imgFile.split(",");
734 |               tempFile.base64 = imgTemp[1];
735 |               sizeInKb = new Buffer(imgFile, "base64").length;
736 |               tempFile.size = String(sizeInKb);
737 |             } else {
738 |               tempFile.base64 = strTemp[1];
739 |               tempFile.size = String(item.size);
740 |             }
741 |             tempFile.name =
742 |               this.tempAttachmentChanged[index].name +
743 |               "." +
744 |               this.tempAttachmentChanged[index].format;
745 |             if (this.tempAttachmentChanged[index].tags === undefined)
746 |               tempFile.tags = [];
747 |             else tempFile.tags = this.tempAttachmentChanged[index].tags;
748 |             if (this.tempAttachmentChanged[index].description === undefined)
749 |               tempFile.description = "";
750 |             else
751 |               tempFile.description = this.tempAttachmentChanged[
752 |                 index
753 |               ].description;
754 |             tempFile.showDetailState = false;
755 | 
756 |             tempFile.format = strTemp[0].replace("data:", "");
757 |             file.file = tempFile;
758 |             /* const convertedToFile = this.convertBase64ToFile(
759 |               imgFile,
760 |               tempFile.name
761 |             ); */
762 |             // console.log(convertedToFile)
763 |             this.registryDocFile.push(file);
764 |             this.$emit("update:documentAttachment", this.registryDocFile);
765 |           }
766 |         } else {
767 |           this.fileUploaderSnackBarAlertColor = "red";
768 |           this.fileUploaderSnackText = `${
769 |             this.selectedLang[this.lang].maxFileCountAlert
770 |           } ${this.maxFileCount}`;
771 |           this.fileUploaderSnackBarAlert = true;
772 |         }
773 |       }
774 |       this.documentAttachmentAPI = [];
775 |       this.tempAttachmentChanged = [];
776 |       this.insertDocumentDialog = false;
777 |     },
778 | 
779 |     compressImage(base64) {
780 |       const canvas = document.createElement("canvas");
781 |       const img = document.createElement("img");
782 | 
783 |       return new Promise((resolve, reject) => {
784 |         let imageCompressLevelTemp = this.imageCompressLevel;
785 |         img.onload = function() {
786 |           let width = img.width;
787 |           let height = img.height;
788 |           canvas.width = width;
789 |           canvas.height = height;
790 | 
791 |           const ctx = canvas.getContext("2d");
792 |           ctx.drawImage(img, 0, 0, width, height);
793 | 
794 |           resolve(canvas.toDataURL("image/jpeg", imageCompressLevelTemp));
795 |         };
796 |         img.onerror = function(err) {
797 |           reject(err);
798 |         };
799 |         img.src = base64;
800 |       });
801 |     },
802 | 
803 |     convertBase64ToFile(base64, fileName) {
804 |       const byteString = atob(base64.split(",")[1]);
805 |       const ab = new ArrayBuffer(byteString.length);
806 |       const ia = new Uint8Array(ab);
807 |       for (let i = 0; i < byteString.length; i += 1) {
808 |         ia[i] = byteString.charCodeAt(i);
809 |       }
810 |       const newBlob = new Blob([ab], {
811 |         type: "image/jpeg"
812 |       });
813 |       return new File([newBlob], fileName);
814 |     },
815 | 
816 |     openDeleteDialog(index, deleteId) {
817 |       this.btnLoader = false;
818 |       this.selectedIndex = index;
819 |       this.selectedId = deleteId;
820 |       this.deleteDocumentDialog = true;
821 |     },
822 | 
823 |     deleteDocument() {
824 |       this.registryDocFile.splice(this.selectedIndex, 1);
825 |       this.$emit("update:documentAttachment", this.registryDocFile);
826 |       this.deleteDocumentDialog = false;
827 |     },
828 | 
829 |     async getAttachmentDetails(selectedAttachment) {
830 |       for (let item of selectedAttachment) {
831 |         try {
832 |           this.readerFile = await this.handleUpload(item);
833 |         } catch (e) {
834 |           console.log(e);
835 |         }
836 |         let obj = {};
837 |         let name = "";
838 |         name = item.name.split(".");
839 |         obj.format = item.name.substr(item.name.lastIndexOf(".") + 1);
840 |         obj.name = name[0];
841 |         obj.base64 = this.readerFile;
842 |         this.tempAttachmentChanged.push(obj);
843 |       }
844 |     },
845 | 
846 |     openEditDocumentDialog(item, index) {
847 |       this.btnLoader = false;
848 |       this.attachmentIndex = index;
849 |       this.editDocumentDialog = true;
850 |       this.tempAttachmentChanged = item;
851 |     },
852 | 
853 |     editDocument() {
854 |       this.documentAttachment.splice(
855 |         this.attachmentIndex,
856 |         1,
857 |         this.tempAttachmentChanged
858 |       );
859 |       this.editDocumentDialog = false;
860 |     },
861 | 
862 |     /*getBinaryFile(attachment) {
863 |         let fileUrl = '/file/' + attachment.file.url;
864 |         window.open(process.env.apiBaseUrl +fileUrl );
865 |       },*/
866 | 
867 |     getShowDetailState(index) {
868 |       this.showDetailState[index] = !this.showDetailState[index];
869 |       console.log("showDetailState" + JSON.stringify(this.showDetailState));
870 |     },
871 | 
872 |     destroyFileUploader() {
873 |       this.documentAttachmentAPI = [];
874 |       this.documentAttachment = [];
875 |       this.registryDocFile = [];
876 |       this.tempAttachment = [];
877 |     }
878 |   }
879 | };
880 | </script>
881 | 


--------------------------------------------------------------------------------
/components/fileUploader copy.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <v-container>
   3 |     <v-row>
   4 |       <v-col cols="12" md="12" xs="12">
   5 |         <InsertButton></InsertButton>
   6 |         <template v-if="badgeCounter">
   7 |           <template v-if="documentAttachment.length > 0">
   8 |             <v-badge
   9 |               bordered
  10 |               :color="documentAttachment.length === maxFileCount ? 'error' : 'success'"
  11 |               overlap
  12 |               :content="documentAttachment.length"
  13 |             >
  14 |               <v-btn :color="btnColor" @click="openInputDocumentModal" class="mb-4"> {{selectedLang[lang].insertFile}} </v-btn>
  15 |             </v-badge>
  16 |           </template>
  17 |           <template v-else>
  18 |             <v-btn :color="btnColor" @click="openInputDocumentModal" class="mb-4"> {{selectedLang[lang].insertFile}} </v-btn>
  19 |           </template>
  20 |         </template>
  21 |         <template v-if="!badgeCounter">
  22 |           <v-btn :color="btnColor" @click="openInputDocumentModal" class="mb-4"> {{selectedLang[lang].insertFile}} </v-btn>
  23 |         </template>
  24 |         <v-row v-if="fileUploaderType === 'simple'">
  25 |           <v-col v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`" cols="12" :md="cols" xs="12">
  26 |             <v-card
  27 |               :shaped="shaped"
  28 |               :outlined="outlined"
  29 |               :raised="raised"
  30 |               :tile="tile"
  31 |             >
  32 |               <v-list-item three-line>
  33 |                 <v-list-item-content>
  34 |                   <v-list-item-subtitle color="blue-grey darken-3">{{attachment.file.name}}</v-list-item-subtitle>
  35 |                   <v-list-item-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024 ">
  36 |                     <v-chip
  37 |                       color="teal lighten-2"
  38 |                       label
  39 |                       text-color="white"
  40 |                     >
  41 |                       {{  Number((attachment.file.size / 1000).toFixed(1)) +'  '+ selectedLang[lang].size.kb}}
  42 |                       <v-icon right>mdi-harddisk</v-icon>
  43 |                     </v-chip>
  44 |                   </v-list-item-subtitle>
  45 |                   <v-list-item-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
  46 |                     <v-chip
  47 |                       color="teal lighten-2"
  48 |                       label
  49 |                       text-color="white"
  50 |                     >
  51 |                       {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) +'  '+ selectedLang[lang].size.mb}}
  52 |                       <v-icon right>mdi-harddisk</v-icon>
  53 |                     </v-chip>
  54 |                   </v-list-item-subtitle>
  55 |                 </v-list-item-content>
  56 |                 <v-list-item-avatar
  57 |                   tile
  58 |                   size="80"
  59 |                   color="blue-grey lighten-5"
  60 |                 >
  61 |                   <template v-if="attachment.file.name.split('.').pop().toLowerCase() === 'jpg' || attachment.file.name.split('.').pop().toLowerCase() === 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() === 'png' || attachment.file.name.split('.').pop().toLowerCase() === 'tif' || attachment.file.name.split('.').pop().toLowerCase() === 'bmp'">
  62 |                     <v-img
  63 |                       v-if="thumb"
  64 |                       :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64 "
  65 |                     ></v-img>
  66 |                     <v-icon v-else  style="margin-left: 10px" size="50" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
  67 |                   </template>
  68 |                   <template v-else>
  69 |                     <v-icon  v-if="attachment.file.name.split('.').pop().toLowerCase() === 'pdf'" x-large file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
  70 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'doc' || attachment.file.name.split('.').pop().toLowerCase() === 'docx' || attachment.file.name.split('.').pop().toLowerCase() === 'odt'" x-large file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
  71 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'jpg' || attachment.file.name.split('.').pop().toLowerCase() === 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() === 'png' || attachment.file.name.split('.').pop().toLowerCase() === 'tif' || attachment.file.name.split('.').pop().toLowerCase() === 'bmp'" x-large file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
  72 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'xls' || attachment.file.name.split('.').pop().toLowerCase() === 'xlsx'" x-large file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
  73 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'pptx' || attachment.file.name.split('.').pop().toLowerCase() === 'pptm' || attachment.file.name.split('.').pop().toLowerCase() === 'ppt'" x-large file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
  74 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'mp4' || attachment.file.name.split('.').pop().toLowerCase() === 'mov' || attachment.file.name.split('.').pop().toLowerCase() === 'flv' || attachment.file.name.split('.').pop().toLowerCase() === 'wmv' || attachment.file.name.split('.').pop().toLowerCase() === 'avi'" x-large file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
  75 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'dwg' " x-large file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
  76 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'zip' || attachment.file.name.split('.').pop().toLowerCase() === 'rar' || attachment.file.name.split('.').pop().toLowerCase() === '7-zip'   " x-large file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
  77 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'txt' " x-large file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
  78 |                     <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
  79 |                   </template>
  80 |                 </v-list-item-avatar>
  81 |               </v-list-item>
  82 |               <v-divider
  83 |                 class="mx-4"
  84 |               ></v-divider>
  85 |               <v-card-actions style="padding: 0">
  86 |                 <v-tooltip right>
  87 |                   <template v-slot:activator="{ on }">
  88 |                     <v-btn v-if="deletePermission" text fab v-on="on"  @click="openDeleteDialog(index , '')"><v-icon color="red">mdi-trash-can-outline</v-icon></v-btn>
  89 |                   </template>
  90 |                   <span class="BYekan">{{selectedLang[lang].delete}}</span>
  91 |                 </v-tooltip>
  92 |                 <v-tooltip right>
  93 |                   <template v-slot:activator="{ on }">
  94 |                     <v-btn v-if="editPermission" text fab v-on="on"  @click="openEditDocumentDialog(attachment, index)"><v-icon color="green">mdi-pencil-outline</v-icon></v-btn>
  95 |                   </template>
  96 |                   <span class="BYekan">{{selectedLang[lang].edit}}</span>
  97 |                 </v-tooltip>
  98 | 
  99 |                 <v-spacer></v-spacer>
 100 | 
 101 |                 <v-btn
 102 |                   v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''"
 103 |                   icon
 104 |                   @click.prevent="attachment.file.showDetailState = !attachment.file.showDetailState"
 105 |                 >
 106 |                   <v-icon>{{ attachment.file.showDetailState ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
 107 |                 </v-btn>
 108 |               </v-card-actions>
 109 | 
 110 |               <v-expand-transition>
 111 |                 <template v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''">
 112 |                   <div v-show="attachment.file.showDetailState">
 113 |                     <v-divider></v-divider>
 114 |                     <v-chip-group
 115 |                       v-if="attachment.file.tags.length > 0"
 116 |                       multiple
 117 |                       active-class="primary--text"
 118 |                       style="padding: 8px"
 119 |                     >
 120 |                         <v-chip v-for="(tag, index) in attachment.file.tags" :key="`attachment-${index}`" style="margin: 5px">
 121 |                           {{tag}}
 122 |                         </v-chip>
 123 |                     </v-chip-group>
 124 |                     <v-card-text v-if="attachment.file.description != null" style="text-align: justify">
 125 |                       {{attachment.file.description}}
 126 |                     </v-card-text>
 127 |                   </div>
 128 |                 </template>
 129 |               </v-expand-transition>
 130 |             </v-card>
 131 |           </v-col>
 132 |         </v-row>
 133 |         <v-row v-else-if="fileUploaderType === 'thumbnail'">
 134 |           <v-col v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`" cols="12" md="4" xs="12">
 135 |             <v-card
 136 |               :shaped="shaped"
 137 |               :outlined="outlined"
 138 |               :raised="raised"
 139 |               :tile="tile"
 140 |               class="mx-auto"
 141 |               max-width="344"
 142 |             >
 143 |               <template v-if="attachment.file.name.split('.').pop().toLowerCase() === 'jpg' || attachment.file.name.split('.').pop().toLowerCase() === 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() === 'png' || attachment.file.name.split('.').pop().toLowerCase() === 'tif' || attachment.file.name.split('.').pop().toLowerCase() === 'bmp'">
 144 |               <v-img
 145 |                 :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64"
 146 |                 height="200px"
 147 |               ></v-img>
 148 |               </template>
 149 |               <template v-else>
 150 |                 <v-list-item-avatar
 151 |                   style="margin-top: 0"
 152 |                   tile
 153 |                   width="345"
 154 |                   height="192"
 155 |                   color="blue-grey lighten-5"
 156 |                 >
 157 |                   <template>
 158 |                     <v-icon  v-if="attachment.file.name.split('.').pop().toLowerCase() === 'pdf'" size="120" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 159 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'doc' || attachment.file.name.split('.').pop().toLowerCase() === 'docx' || attachment.file.name.split('.').pop().toLowerCase() === 'odt'" size="120" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 160 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'xls' || attachment.file.name.split('.').pop().toLowerCase() === 'xlsx'" size="120" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 161 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'pptx' || attachment.file.name.split('.').pop().toLowerCase() === 'pptm' || attachment.file.name.split('.').pop().toLowerCase() === 'ppt'" size="120" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 162 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'mp4' || attachment.file.name.split('.').pop().toLowerCase() === 'mov' || attachment.file.name.split('.').pop().toLowerCase() === 'flv' || attachment.file.name.split('.').pop().toLowerCase() === 'wmv' || attachment.file.name.split('.').pop().toLowerCase() === 'avi'" size="120" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 163 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'dwg' " size="120" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 164 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'zip' || attachment.file.name.split('.').pop().toLowerCase() === 'rar' || attachment.file.name.split('.').pop().toLowerCase() === '7-zip'   " size="120" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 165 |                     <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'txt' " size="120" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 166 |                     <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 167 |                   </template>
 168 |                 </v-list-item-avatar>
 169 |               </template>
 170 | 
 171 |               <v-card-subtitle style="height: 70px">
 172 |                 {{attachment.file.name}}
 173 |               </v-card-subtitle>
 174 |               <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024" class="mt2">
 175 |                 <v-chip
 176 |                   color="teal lighten-2"
 177 |                   label
 178 |                   text-color="white"
 179 |                 >
 180 |                   {{  Number((attachment.file.size / 1000).toFixed(1)) +'  '+ selectedLang[lang].size.kb}}
 181 |                   <v-icon right>mdi-harddisk</v-icon>
 182 |                 </v-chip>
 183 |               </v-card-subtitle>
 184 |               <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
 185 |                 <v-chip
 186 |                   color="teal lighten-2"
 187 |                   label
 188 |                   text-color="white"
 189 |                 >
 190 |                   {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) +'  '+ selectedLang[lang].size.mb}}
 191 |                   <v-icon right>mdi-harddisk</v-icon>
 192 |                 </v-chip>
 193 |               </v-card-subtitle>
 194 |               <v-divider
 195 |                 class="mx-4"
 196 |               ></v-divider>
 197 |               <v-spacer></v-spacer>
 198 |               <v-card-actions style="padding: 0">
 199 |                 <v-tooltip right>
 200 |                   <template v-slot:activator="{ on }">
 201 |                     <v-btn v-if="deletePermission" text fab v-on="on"  @click="openDeleteDialog(index , '')"><v-icon color="red">mdi-trash-can-outline</v-icon></v-btn>
 202 |                   </template>
 203 |                   <span class="BYekan">{{selectedLang[lang].delete}}</span>
 204 |                 </v-tooltip>
 205 |                 <v-tooltip right>
 206 |                   <template v-slot:activator="{ on }">
 207 |                     <v-btn v-if="editPermission" text fab v-on="on"  @click="openEditDocumentDialog(attachment, index)"><v-icon color="green">mdi-pencil-outline</v-icon></v-btn>
 208 |                   </template>
 209 |                   <span class="BYekan">{{selectedLang[lang].edit}}</span>
 210 |                 </v-tooltip>
 211 | 
 212 |                 <v-spacer></v-spacer>
 213 | 
 214 |                 <v-btn
 215 |                   v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''"
 216 |                   icon
 217 |                   @click.prevent="attachment.file.showDetailState = !attachment.file.showDetailState"
 218 |                 >
 219 |                   <v-icon>{{ attachment.file.showDetailState ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
 220 |                 </v-btn>
 221 |               </v-card-actions>
 222 | 
 223 |               <v-expand-transition>
 224 |                 <template v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''">
 225 |                   <div v-show="attachment.file.showDetailState">
 226 |                     <v-divider></v-divider>
 227 |                     <v-chip-group
 228 |                       v-if="attachment.file.tags.length > 0"
 229 |                       multiple
 230 |                       active-class="primary--text"
 231 |                       style="padding: 8px"
 232 |                     >
 233 |                       <v-chip v-for="(tag,index) in attachment.file.tags" :key="`attachment-${index}`" style="margin: 5px">
 234 |                         {{tag}}
 235 |                       </v-chip>
 236 |                     </v-chip-group>
 237 |                     <v-card-text v-if="attachment.file.description != null" style="text-align: justify">
 238 |                       {{attachment.file.description}}
 239 |                     </v-card-text>
 240 |                   </div>
 241 |                 </template>
 242 |               </v-expand-transition>
 243 | 
 244 |             </v-card>
 245 |           </v-col>
 246 |         </v-row>
 247 |         <v-row v-if="fileUploaderType === 'table'">
 248 |           <v-col cols="12" lg="12" md="12" xs="12">
 249 |             <v-simple-table :fixed-header="tableFixedHeader" :height="tableHeight + 'px'">
 250 |               <template v-slot:default>
 251 |                 <thead>
 252 |                 <tr>
 253 |                   <th v-if="tableThumbColumn" class="text-left">{{selectedLang[lang].table.thumb}}</th>
 254 |                   <th class="text-left">{{selectedLang[lang].table.name}}</th>
 255 |                   <th class="text-left">{{selectedLang[lang].table.size}}</th>
 256 |                   <th class="text-left">{{selectedLang[lang].table.action.action}}</th>
 257 |                 </tr>
 258 |                 </thead>
 259 |                 <tbody>
 260 |                 <tr v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`">
 261 |                   <td v-if="tableThumbColumn">
 262 |                     <template v-if="attachment.file.name.split('.').pop().toLowerCase() == 'jpg' || attachment.file.name.split('.').pop().toLowerCase() == 'jpeg' || attachment.file.name.split('.').pop().toLowerCase() == 'png' || attachment.file.name.split('.').pop().toLowerCase() == 'tif' || attachment.file.name.split('.').pop().toLowerCase() == 'bmp'">
 263 |                       <v-img
 264 |                         v-if="thumb"
 265 |                         style="margin: 10px"
 266 |                         :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64 "
 267 |                         height="50px"
 268 |                         width="50px"
 269 |                       ></v-img>
 270 |                       <v-icon v-else  style="margin-left: 10px" size="50" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 271 |                     </template>
 272 |                     <template v-else>
 273 |                       <v-icon  v-if="attachment.file.name.split('.').pop().toLowerCase() === 'pdf'" style="margin-left: 10px" size="50" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 274 |                       <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'doc' || attachment.file.name.split('.').pop().toLowerCase() === 'docx' || attachment.file.name.split('.').pop().toLowerCase() === 'odt'"  style="margin-left: 10px" size="50" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 275 |                       <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'xls' || attachment.file.name.split('.').pop().toLowerCase() === 'xlsx'"  style="margin-left: 10px" size="50" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 276 |                       <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'pptx' || attachment.file.name.split('.').pop().toLowerCase() === 'pptm' || attachment.file.name.split('.').pop().toLowerCase() === 'ppt'"  style="margin-left: 10px" size="50" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 277 |                       <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'mp4' || attachment.file.name.split('.').pop().toLowerCase() === 'mov' || attachment.file.name.split('.').pop().toLowerCase() === 'flv' || attachment.file.name.split('.').pop().toLowerCase() === 'wmv' || attachment.file.name.split('.').pop().toLowerCase() === 'avi'"  style="margin-left: 10px" size="50" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 278 |                       <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'dwg' "  style="margin-left: 10px" size="50" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 279 |                       <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'zip' || attachment.file.name.split('.').pop().toLowerCase() === 'rar' || attachment.file.name.split('.').pop().toLowerCase() === '7-zip'   " size="120" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 280 |                       <v-icon  v-else-if="attachment.file.name.split('.').pop().toLowerCase() === 'txt' "  style="margin-left: 10px" size="50" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 281 |                       <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 282 |                     </template>
 283 |                   </td>
 284 |                   <td>{{ attachment.file.name }}</td>
 285 |                   <td>
 286 |                     <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024" class="mt2">
 287 |                       <v-chip
 288 |                         color="teal lighten-2"
 289 |                         label
 290 |                         text-color="white"
 291 |                       >
 292 |                         {{  Number((attachment.file.size / 1000).toFixed(1)) + selectedLang[lang].size.kb}}
 293 |                         <v-icon right>mdi-harddisk</v-icon>
 294 |                       </v-chip>
 295 |                     </v-card-subtitle>
 296 |                     <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
 297 |                       <v-chip
 298 |                         color="teal lighten-2"
 299 |                         label
 300 |                         text-color="white"
 301 |                       >
 302 |                         {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) + selectedLang[lang].size.mb}}
 303 |                         <v-icon right>mdi-harddisk</v-icon>
 304 |                       </v-chip>
 305 |                     </v-card-subtitle>
 306 |                   </td>
 307 |                   <td>
 308 |                     <v-tooltip top>
 309 |                       <template v-slot:activator="{ on }">
 310 |                         <v-btn v-if="deletePermission" icon color="red" v-on="on" @click="openDeleteDialog(index , '')" ><v-icon>mdi-delete</v-icon></v-btn>
 311 |                       </template>
 312 |                       <span>{{selectedLang[lang].table.action.deleteTooltip}}</span>
 313 |                     </v-tooltip>
 314 |                     <v-tooltip top>
 315 |                       <template v-slot:activator="{ on }">
 316 |                         <v-btn v-if="editPermission" text fab v-on="on"  @click="openEditDocumentDialog(attachment, index)"><v-icon color="green">mdi-pencil-outline</v-icon></v-btn>
 317 |                       </template>
 318 |                       <span class="BYekan">{{selectedLang[lang].edit}}</span>
 319 |                     </v-tooltip>
 320 |                   </td>
 321 |                 </tr>
 322 |                 </tbody>
 323 |               </template>
 324 |             </v-simple-table>
 325 |           </v-col>
 326 |         </v-row>
 327 |       </v-col>
 328 |     </v-row>
 329 |     <!--Insert New Document Dialog Start-->
 330 |     <v-row justify="center">
 331 |       <v-dialog v-model="insertDocumentDialog" :scrollable="false" persistent width="50%">
 332 |         <v-card>
 333 |           <v-card-title>
 334 |             <v-icon @click="insertDocumentDialog = false">mdi-close</v-icon>
 335 |           </v-card-title>
 336 |           <v-card-text class="BYekan">
 337 |             <template v-if="tempAttachment.length === 0">
 338 |               <v-file-input v-if="fileAccept !== ''" multiple :accept="fileAccept" chip v-model="tempAttachment" :label="selectedLang[lang].insertNewFile"></v-file-input>
 339 |               <v-file-input v-else multiple v-model="tempAttachment" :label="selectedLang[lang].insertNewFile"></v-file-input>
 340 |             </template>
 341 |             <template>
 342 |               <v-expansion-panels v-if="addFileTag || addFileDescription || changeFileName">
 343 |                 <v-expansion-panel
 344 |                   v-for="(attachment, index) in tempAttachmentChanged" :key="`attachment-${index}`"
 345 |                 >
 346 |                   <v-expansion-panel-header>{{attachment.name}}</v-expansion-panel-header>
 347 |                   <v-expansion-panel-content>
 348 |                     <v-row align="center" justify="center">
 349 |                       <v-col cols="12" lg="9" md="9" xs="12">
 350 |                         <v-text-field
 351 |                           v-if="changeFileName"
 352 |                           :label="selectedLang[lang].fileName"
 353 |                           v-model="attachment.name"
 354 |                           :prepend-icon="attachment.icon"
 355 |                         >
 356 |                         </v-text-field>
 357 |                         <v-textarea
 358 |                           v-if="addFileDescription"
 359 |                           :label="selectedLang[lang].fileDescription"
 360 |                           auto-grow
 361 |                           row-height="1"
 362 |                           v-model="attachment.description"
 363 |                         >
 364 |                         </v-textarea>
 365 |                         <v-autocomplete
 366 |                           v-if="addFileTag"
 367 |                           v-model="attachment.tags"
 368 |                           :items="tags"
 369 |                           dense
 370 |                           chips
 371 |                           :label="selectedLang[lang].fileTags"
 372 |                           multiple
 373 |                         ></v-autocomplete>
 374 |                       </v-col>
 375 |                       <v-col align="center" cols="12" lg="3" md="3" xs="12">
 376 |                         <template v-if="attachment.format === 'jpg' || attachment.format === 'jpeg' || attachment.format === 'png' || attachment.format === 'tif' || attachment.format === 'bmp'">
 377 |                           <v-card>
 378 |                             <v-img
 379 |                               :src="attachment.base64 "
 380 |                             ></v-img>
 381 |                           </v-card>
 382 |                         </template>
 383 |                         <template v-else>
 384 |                           <v-icon  v-if="attachment.format === 'pdf'" size="60" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 385 |                           <v-icon  v-else-if="attachment.format === 'doc' || attachment.format === 'docx' || attachment.format === 'odt'" size="60" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 386 |                           <v-icon  v-else-if="attachment.format === 'jpg' || attachment.format === 'jpeg' || attachment.format === 'png' || attachment.format === 'tif' || attachment.format === 'bmp'" size="60" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 387 |                           <v-icon  v-else-if="attachment.format === 'xls' || attachment.format === 'xlsx'" size="60" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 388 |                           <v-icon  v-else-if="attachment.format === 'pptx' || attachment.format === 'pptm' || attachment.format === 'ppt'" size="60" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 389 |                           <v-icon  v-else-if="attachment.format === 'mp4' || attachment.format === 'mov' || attachment.format === 'flv' || attachment.format === 'wmv' || attachment.format === 'avi'" size="60" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 390 |                           <v-icon  v-else-if="attachment.format === 'dwg' " size="60" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 391 |                           <v-icon  v-else-if="attachment.format === 'zip' || attachment.format === 'rar' || attachment.format === '7-zip'   " size="60" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 392 |                           <v-icon  v-else-if="attachment.format === 'txt' " size="60" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 393 |                           <v-icon  v-else size="60" file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 394 |                         </template>
 395 |                       </v-col>
 396 |                     </v-row>
 397 |                   </v-expansion-panel-content>
 398 |                 </v-expansion-panel>
 399 |               </v-expansion-panels>
 400 |               <v-card
 401 |                 v-else
 402 |                 class="mx-auto"
 403 |                 tile
 404 |               >
 405 |                 <v-list-item v-for="(attachment, index) in tempAttachmentChanged" :key="`attachment-${index}`" style="border-bottom: 1px solid #E0E0E0">
 406 |                   <v-list-item-content>
 407 |                     <v-list-item-title>
 408 |                       <v-icon  v-if="attachment.format === 'pdf'" size="30" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 409 |                       <v-icon  v-else-if="attachment.format === 'doc' || attachment.format === 'docx' || attachment.format === 'odt'" size="30" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 410 |                       <v-icon  v-else-if="attachment.format === 'jpg' || attachment.format === 'jpeg' || attachment.format === 'png' || attachment.format === 'tif' || attachment.format === 'bmp'" size="30" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 411 |                       <v-icon  v-else-if="attachment.format === 'xls' || attachment.format === 'xlsx'" size="30" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 412 |                       <v-icon  v-else-if="attachment.format === 'pptx' || attachment.format === 'pptm' || attachment.format === 'ppt'" size="30" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 413 |                       <v-icon  v-else-if="attachment.format === 'mp4' || attachment.format === 'mov' || attachment.format === 'flv' || attachment.format === 'wmv' || attachment.format === 'avi'" size="30" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 414 |                       <v-icon  v-else-if="attachment.format === 'dwg' " size="30" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 415 |                       <v-icon  v-else-if="attachment.format === 'zip' || attachment.format === 'rar' || attachment.format === '7-zip'   " size="30" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 416 |                       <v-icon  v-else-if="attachment.format === 'txt' " size="30" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 417 |                       <v-icon  v-else size="30" file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 418 |                       {{attachment.name}}.{{attachment.format}}
 419 |                     </v-list-item-title>
 420 |                   </v-list-item-content>
 421 |                 </v-list-item>
 422 |               </v-card>
 423 |             </template>
 424 |           </v-card-text>
 425 |           <v-card-actions>
 426 |             <v-btn class="BYekan" :disabled="tempAttachment == null || btnLoader" :loading="btnLoader" :color="btnColor" @click="uploadFieldChange">{{selectedLang[lang].add}}</v-btn>
 427 |           </v-card-actions>
 428 |         </v-card>
 429 |       </v-dialog>
 430 |     </v-row>
 431 |     <!--Insert New Document Dialog End-------------------------------------------------------------------->
 432 |     <!--Update Document Dialog Start---------------------------------------------------------------------->
 433 |     <v-row justify="center">
 434 |       <v-dialog v-model="editDocumentDialog" :scrollable="false" persistent width="50%">
 435 |         <v-card>
 436 |           <v-card-title>
 437 |             <v-icon @click="editDocumentDialog = false">mdi-close</v-icon>
 438 |           </v-card-title>
 439 |           <v-card-text  v-for="(attachment, index) in tempAttachmentChanged" :key="`attachment-${index}`" class="BYekan">
 440 |             <v-row align="center" justify="center">
 441 |               <v-col cols="12" lg="9" md="9" xs="12">
 442 |                 <v-text-field
 443 |                   v-if="changeFileName"
 444 |                   :label="selectedLang[lang].fileName"
 445 |                   v-model="attachment.name"
 446 |                   :prepend-icon="attachment.icon"
 447 |                 >
 448 |                 </v-text-field>
 449 |                 <v-textarea
 450 |                   v-if="addFileDescription"
 451 |                   :label="selectedLang[lang].fileDescription"
 452 |                   auto-grow
 453 |                   row-height="1"
 454 |                   v-model="attachment.description"
 455 |                 >
 456 |                 </v-textarea>
 457 |                 <v-autocomplete
 458 |                   v-if="addFileTag"
 459 |                   v-model="attachment.tags"
 460 |                   :items="tags"
 461 |                   dense
 462 |                   chips
 463 |                   :label="selectedLang[lang].fileTags"
 464 |                   multiple
 465 |                 ></v-autocomplete>
 466 |               </v-col>
 467 |               <v-col align="center" cols="12" lg="3" md="3" xs="12">
 468 |                 <template v-if="attachment.name.split('.').pop().toLowerCase() === 'jpg' || attachment.name.split('.').pop().toLowerCase() === 'jpeg' || attachment.name.split('.').pop().toLowerCase()  === 'png' || attachment.name.split('.').pop().toLowerCase() === 'tif' || attachment.name.split('.').pop().toLowerCase() === 'bmp'">
 469 |                   <v-card>
 470 |                     <v-img
 471 |                       :src="'data:'+ attachment.format  + ',' + attachment.base64"
 472 |                     ></v-img>
 473 |                   </v-card>
 474 |                 </template>
 475 |                 <template v-else>
 476 |                   <v-icon  v-if="attachment.name.split('.').pop().toLowerCase() === 'pdf'" size="60" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
 477 |                   <v-icon  v-else-if="attachment.format === 'doc' || attachment.format === 'docx' || attachment.format === 'odt'" size="60" file-word-outline color="blue darken-1">mdi-file-word-outline</v-icon>
 478 |                   <v-icon  v-else-if="attachment.format === 'jpg' || attachment.format === 'jpeg' || attachment.format === 'png' || attachment.format === 'tif' || attachment.format === 'bmp'" size="60" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
 479 |                   <v-icon  v-else-if="attachment.format === 'xls' || attachment.format === 'xlsx'" size="60" file-word-outline color="teal darken-1">mdi-file-excel-outline</v-icon>
 480 |                   <v-icon  v-else-if="attachment.format === 'pptx' || attachment.format === 'pptm' || attachment.format === 'ppt'" size="60" file-word-outline color="orange darken-3">mdi-file-powerpoint-outline</v-icon>
 481 |                   <v-icon  v-else-if="attachment.format === 'mp4' || attachment.format === 'mov' || attachment.format === 'flv' || attachment.format === 'wmv' || attachment.format === 'avi'" size="60" file-word-outline color="red lighten-1">mdi-file-video-outline</v-icon>
 482 |                   <v-icon  v-else-if="attachment.format === 'dwg' " size="60" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
 483 |                   <v-icon  v-else-if="attachment.format === 'zip' || attachment.format === 'rar' || attachment.format === '7-zip'   " size="60" file-word-outline color="lime lighten-1">mdi-folder-zip-outline</v-icon>
 484 |                   <v-icon  v-else-if="attachment.format === 'txt' " size="60" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
 485 |                   <v-icon  v-else size="60" file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
 486 |                 </template>
 487 |               </v-col>
 488 |             </v-row>
 489 |           </v-card-text>
 490 |           <v-card-actions>
 491 |             <v-btn class="BYekan" :disabled="tempAttachment === null || btnLoader" :loading="btnLoader" :color="btnColor" @click="editDocument">{{selectedLang[lang].edit}}</v-btn>
 492 |           </v-card-actions>
 493 |         </v-card>
 494 |       </v-dialog>
 495 |     </v-row>
 496 |     <!--Update Document Dialog End------------------------------------------------------------------------>
 497 | 
 498 |     <!--File Uploader SnackBar Alert Start --------------------------------------------------------------->
 499 |     <v-snackbar class="BYekan"
 500 |       v-model="fileUploaderSnackBarAlert"
 501 |       right
 502 |       bottom
 503 |       :color="fileUploaderSnackBarAlertColor"
 504 |       :timeout="3000"
 505 |     >
 506 |       {{fileUploaderSnackText}}
 507 |       <v-btn
 508 |         color="white"
 509 |         text
 510 |         @click="fileUploaderSnackBarAlert = false"
 511 |       >
 512 |         <v-icon>mdi-close</v-icon>
 513 |       </v-btn>
 514 |     </v-snackbar>
 515 |     <!--File Uploader SnackBar Alert Start -->
 516 |     <!--DELETE Dialog End----------------------------------------------------------START---->
 517 |     <v-row justify="center">
 518 |       <v-dialog v-model="deleteDocumentDialog" persistent width="30%">
 519 |         <v-card>
 520 |           <v-card-title>
 521 |             <v-icon color="red"></v-icon>
 522 |           </v-card-title>
 523 |           <v-card-text class="BYekan">
 524 |             {{selectedLang[lang].deleteDialog.message}}
 525 |           </v-card-text>
 526 |           <v-card-actions>
 527 |             <v-spacer></v-spacer>
 528 |             <v-btn class="BYekan" color="green darken-1" text @click="deleteDocumentDialog= false">{{selectedLang[lang].deleteDialog.cancel}}</v-btn>
 529 |             <v-btn class="BYekan" color="primary" :disabled="btnLoader" :loading="btnLoader" @click="deleteDocument">{{selectedLang[lang].delete}} </v-btn>
 530 |           </v-card-actions>
 531 |         </v-card>
 532 |       </v-dialog>
 533 |     </v-row>
 534 |     <!--DELETE Dialog End----------------------------------------------------------------END---->
 535 |   </v-container>
 536 | </template>
 537 | 
 538 | <script>
 539 |   /**
 540 |    * This is an example of uploading files. with this component you can see, insert, delete files.
 541 |    * @version 1.0
 542 |    * @author [ali jahanpak](https://github.com/alijahanpak)
 543 |    * @since Version 1.0
 544 |    */
 545 |   import languages from "./language";
 546 |   export default {
 547 |     props: {
 548 |       /**
 549 |        * Array contain files
 550 |        */
 551 |       documentAttachment: [Array],
 552 |       /**
 553 |        * Send api url for 'add' and 'delete'.
 554 |        * f.e: /building/add or /building/delete
 555 |        */
 556 |       maxFileSize: {
 557 |         type: Number,
 558 |         default: 5120,
 559 |       },
 560 |       /**
 561 |        * choose File Uploader Type
 562 |        */
 563 |       fileUploaderType: {
 564 |         type: String,
 565 |         default: 'thumbnail'
 566 |       },
 567 |       /**
 568 |        * Maximum file Upload
 569 |        */
 570 |       maxFileCount: {
 571 |         type: Number,
 572 |         default: 0
 573 |       },
 574 |       /**
 575 |        * choose File Uploader Card Type
 576 |        */
 577 |       cardType: String,
 578 |       /**
 579 |        * Badge file counter state
 580 |        */
 581 |       badgeCounter: {
 582 |         type: Boolean,
 583 |         default: true
 584 |       },
 585 |       /**
 586 |        * change Button Color
 587 |        */
 588 |       btnColor: {
 589 |         type: String,
 590 |         default: 'info'
 591 |       },
 592 |       /**
 593 |        * Enable / Disable image compressor
 594 |        */
 595 |       imageCompressor: Boolean,
 596 |       /**
 597 |        * Image compress level (0 to 1)
 598 |        */
 599 |       imageCompressLevel: {
 600 |         type: Number,
 601 |         default: 0.5
 602 |       },
 603 |       /**
 604 |        * Accept uploaded files
 605 |        */
 606 |       fileAccept: String,
 607 |       /**
 608 |        * show / hidden thumb for images in table and simple file uploader
 609 |        */
 610 |       thumb: {
 611 |         type: Boolean,
 612 |         default: true
 613 |       },
 614 |       /**
 615 |        * show / hidden thumb column in table file uploader
 616 |        */
 617 |       tableThumbColumn: Boolean,
 618 |       /**
 619 |        * enable / disable table fixed header
 620 |        */
 621 |       tableFixedHeader: {
 622 |         type: Boolean,
 623 |         default: true
 624 |       },
 625 |       /**
 626 |        * set table height
 627 |        */
 628 |       tableHeight: {
 629 |         type: Number,
 630 |         default: 400
 631 |       },
 632 |       /**
 633 |        * Enable RTL support languages
 634 |        */
 635 |       rtlSupport: {
 636 |         type: Boolean,
 637 |         default: false
 638 |       },
 639 |       /**
 640 |        * Change file uploader languages
 641 |        */
 642 |       lang: {
 643 |         type: String,
 644 |         default: 'en'
 645 |       },
 646 |       /**
 647 |        * Change file Name before upload
 648 |        */
 649 |       changeFileName: {
 650 |         type: Boolean,
 651 |         default: false
 652 |       },
 653 |       /**
 654 |        * Add file Description before upload
 655 |        */
 656 |       addFileDescription: {
 657 |         type: Boolean,
 658 |         default: false
 659 |       },
 660 |       /**
 661 |        * Add file tags before upload
 662 |        */
 663 |       addFileTag: {
 664 |         type: Boolean,
 665 |         default: false
 666 |       },
 667 |       /**
 668 |        * Array of file tags
 669 |        */
 670 |       tags: {
 671 |         type: Array,
 672 |       },
 673 |       /**
 674 |        * Change count of columns
 675 |        */
 676 |       cols: {
 677 |         type: Number,
 678 |         default: 4
 679 |       },
 680 |       /**
 681 |        * Define Custom language for uploader
 682 |        */
 683 |       customLang: {
 684 |         type: Object,
 685 |         default: null
 686 |       },
 687 |       /**
 688 |        * Set Insert/Add new file Permission
 689 |        */
 690 |       insertPermission: {
 691 |         type: Boolean,
 692 |         default: true
 693 |       },
 694 |       /**
 695 |        * Set edit Permission
 696 |        */
 697 |       editPermission: {
 698 |         type: Boolean,
 699 |         default: true
 700 |       },
 701 |       /**
 702 |        * Set delete Permission
 703 |        */
 704 |       deletePermission: {
 705 |         type: Boolean,
 706 |         default: true
 707 |       },
 708 |     },
 709 |     data: () => ({
 710 |       insertDocumentDialog: false,
 711 |       editDocumentDialog: false,
 712 |       deleteDocumentDialog: false,
 713 |       tempAttachment:[],
 714 |       tempAttachmentChanged:[],
 715 |       fileUploaderSnackBarAlert: false,
 716 |       fileUploaderSnackText: '',
 717 |       fileUploaderSnackBarAlertColor: 'green',
 718 |       readerFile: null,
 719 |       registryDocFile: [],
 720 |       documentAttachmentAPI: [],
 721 |       btnLoader: false,
 722 |       showDetail: false,
 723 |       showDetailState: [],
 724 |       selectedIndex: '',
 725 |       selectedId: '',
 726 |       returnedRecord: {},
 727 |       //Card Theme
 728 |       outlined: false,
 729 |       raised: false,
 730 |       shaped: false,
 731 |       tile: false,
 732 |       selectedLang: {},
 733 |       beforeInsertAttachments: {},
 734 |       attachmentIndex: '',
 735 |     }),
 736 |     watch: {
 737 |       tempAttachment : function(newValue){
 738 |         if(this.tempAttachment.length > 0)
 739 |           this.getAttachmentDetails(newValue);
 740 |         else this.tempAttachmentChanged = [];
 741 |       },
 742 |       cardType : function() {
 743 |         this.$emit('update:cardType', this.cardType);
 744 |         this.setCardTheme();
 745 |       },
 746 |       badgeCounter : function() {
 747 |         this.$emit('update:badgeCounter', this.badgeCounter);
 748 |       },
 749 |       maxFileCount : function() {
 750 |         this.$emit('update:maxFileCount', this.maxFileCount);
 751 |       },
 752 |       maxFileSize : function() {
 753 |         this.$emit('update:maxFileSize', Number(this.maxFileSize));
 754 |       },
 755 |       imageCompressor : function() {
 756 |         this.$emit('update:imageCompressor', this.imageCompressor);
 757 |       },
 758 |       imageCompressLevel : function() {
 759 |         this.$emit('update:imageCompressLevel', this.imageCompressLevel);
 760 |       },
 761 |       fileAccept : function() {
 762 |         this.$emit('update:fileAccept', this.fileAccept);
 763 |       },
 764 |       thumb : function() {
 765 |         this.$emit('update:thumb', this.thumb);
 766 |       },
 767 |       changeFileName : function() {
 768 |         this.$emit('update:changeFileName', this.changeFileName);
 769 |       },
 770 |       addFileDescription : function() {
 771 |         this.$emit('update:addFileDescription', this.addFileDescription);
 772 |       },
 773 |       addFileTag : function() {
 774 |         this.$emit('update:addFileTag', this.addFileTag);
 775 |       },
 776 |       tableThumbColumn : function() {
 777 |         this.$emit('update:tableThumbColumn', this.tableThumbColumn);
 778 |       },
 779 |       tableFixedHeader : function() {
 780 |         this.$emit('update:tableFixedHeader', this.tableFixedHeader);
 781 |       },
 782 |       tableHeight : function() {
 783 |         this.$emit('update:tableHeight', this.tableHeight);
 784 |       },
 785 |       lang : function() {
 786 |         this.$emit('update:lang', this.lang);
 787 |       },
 788 |     },
 789 |     computed: {
 790 | 
 791 |     },
 792 |     mounted () {
 793 | 
 794 |     },
 795 | 
 796 |     created(){
 797 |       if(this.rtlSupport)
 798 |         this.changeRTL();
 799 |       this.setLang();
 800 |       this.setCardTheme();
 801 |     },
 802 |     destroyed(){
 803 |       this.registryDocFile= [];
 804 |     },
 805 |     methods: {
 806 |       setLang(){
 807 |         if( this.customLang !== null)
 808 |           this.selectedLang= this.customLang;
 809 |         else
 810 |           this.selectedLang= languages;
 811 |       },
 812 |       changeRTL () {
 813 |         this.$vuetify.rtl = true
 814 |       },
 815 |       setCardTheme (){
 816 |         switch (this.cardType) {
 817 |           case 'default':
 818 |             this.outlined= false;
 819 |             this.raised= false;
 820 |             this.shaped= false;
 821 |             this.tile= false;
 822 |             break;
 823 |           case 'outlined':
 824 |             this.outlined= true;
 825 |             this.raised= false;
 826 |             this.shaped= false;
 827 |             this.tile= false;
 828 |             break;
 829 |           case 'shaped':
 830 |             this.shaped= true;
 831 |             this.raised= false;
 832 |             this.outlined= false;
 833 |             this.tile= false;
 834 |             break;
 835 |           case 'raised':
 836 |             this.raised= true;
 837 |             this.shaped= false;
 838 |             this.outlined= false;
 839 |             this.tile= false;
 840 |             break;
 841 |           case 'tile':
 842 |             this.tile= true;
 843 |             this.shaped= false;
 844 |             this.outlined= false;
 845 |             this.raised= false;
 846 |             break;
 847 |         }
 848 |       },
 849 | 
 850 |       openInputDocumentModal(){
 851 |         this.btnLoader= false;
 852 |         this.tempAttachment= [];
 853 |         this.insertDocumentDialog = true;
 854 |       },
 855 | 
 856 |       handleUpload(fileAttachment) {
 857 |           let reader = new FileReader();
 858 |           return new Promise(function(resolve, reject) {
 859 |             reader.onloadend = () => {
 860 |               resolve(reader.result);
 861 |             };
 862 |             reader.readAsDataURL(fileAttachment);
 863 |           });
 864 |       },
 865 | 
 866 |     /**
 867 |      * asynchronous method to insert selected file(s)
 868 |      *
 869 |      * @public
 870 |      * @returns {Array} selected file(s)
 871 |      */
 872 |       async uploadFieldChange (){
 873 |         this.btnLoader= true;
 874 |         for(let [index,item] of this.tempAttachment.entries()){
 875 |           if(this.documentAttachment.length < this.maxFileCount) {
 876 |             if((item.size / 1000).toFixed(1) > this.maxFileSize){
 877 |               this.fileUploaderSnackBarAlertColor= 'red';
 878 |               this.fileUploaderSnackText= `${this.selectedLang[this.lang].maxFileSizeAlert} ${Math.round(this.maxFileSize / 1024)} ${this.selectedLang[this.lang].size.mb}`;
 879 |               this.fileUploaderSnackBarAlert= true;
 880 |             }
 881 |             else{
 882 |               let tempFile= {};
 883 |               let file = {};
 884 |               try {
 885 |                 this.readerFile = await this.handleUpload(item);
 886 |               } catch (e) {
 887 |                 console.log(e);
 888 |               }
 889 |               let fullFileType= this.readerFile.split(";");
 890 |               let fileType= fullFileType[0].split(":")
 891 |               let status = false;
 892 |               let imgFile= ''
 893 |               let sizeInKb=0;
 894 |               if(this.imageCompressor){
 895 |                 if(fileType[1] === "image/png" || fileType[1] === "image/jpg" || fileType[1] === "image/jpeg" || fileType[1] === "application/octet-stream" || fileType[1] === "image/webp"){
 896 |                   status = true;
 897 |                   imgFile = await this.compressImage(this.readerFile, fileType[1]);
 898 |                 }
 899 |               }
 900 |               //tempFile.subject= this.tempAttachmentChanged[index].name + '.' + this.tempAttachmentChanged[index].format;
 901 |               let strTemp= this.readerFile.split(",")
 902 |               if(status){
 903 |                 let imgTemp= imgFile.split(",")
 904 |                 tempFile.base64=imgTemp[1];
 905 |                 sizeInKb= new Buffer(imgFile, 'base64').length;
 906 |                 tempFile.size= String(sizeInKb);
 907 |               }
 908 |               else{
 909 |                 tempFile.base64=strTemp[1];
 910 |                 tempFile.size= String(item.size);
 911 |               }
 912 |               tempFile.name= this.tempAttachmentChanged[index].name+ '.' + this.tempAttachmentChanged[index].format;
 913 |               if(this.tempAttachmentChanged[index].tags === undefined)
 914 |                 tempFile.tags= [];
 915 |               else
 916 |                 tempFile.tags= this.tempAttachmentChanged[index].tags;
 917 |               if(this.tempAttachmentChanged[index].description === undefined)
 918 |                 tempFile.description= '';
 919 |               else
 920 |                 tempFile.description= this.tempAttachmentChanged[index].description;
 921 |               tempFile.showDetailState= false;
 922 | 
 923 |               tempFile.format= strTemp[0].replace('data:' ,'');
 924 |               file.file=tempFile;
 925 |               this.registryDocFile.push(file);
 926 |               this.$emit('update:documentAttachment' , this.registryDocFile);
 927 |               //console.log(JSON.stringify(this.registryDocFile));
 928 |             }
 929 |           }
 930 |           else {
 931 |             this.fileUploaderSnackBarAlertColor= 'red';
 932 |             this.fileUploaderSnackText= `${this.selectedLang[this.lang].maxFileCountAlert} ${this.maxFileCount}`
 933 |             this.fileUploaderSnackBarAlert= true;
 934 |           }
 935 |         }
 936 |         this.documentAttachmentAPI= [];
 937 |         this.tempAttachmentChanged= [];
 938 |         this.insertDocumentDialog= false;
 939 |       },
 940 | 
 941 |       compressImage (base64) {
 942 |         const canvas = document.createElement('canvas')
 943 |         const img = document.createElement('img')
 944 | 
 945 |         return new Promise((resolve, reject) => {
 946 |           let imageCompressLevelTemp= this.imageCompressLevel;
 947 |           img.onload = function () {
 948 |             let width = img.width
 949 |             let height = img.height
 950 |             /*const maxHeight = 1250
 951 |             const maxWidth = 1250
 952 | 
 953 |             if (width > height) {
 954 |               if (width > maxWidth) {
 955 |                 height = Math.round((height *= maxWidth / width))
 956 |                 width = maxWidth
 957 |               }
 958 |             } else {
 959 |               if (height > maxHeight) {
 960 |                 width = Math.round((width *= maxHeight / height))
 961 |                 height = maxHeight
 962 |               }
 963 |             }*/
 964 |             canvas.width = width
 965 |             canvas.height = height
 966 | 
 967 |             const ctx = canvas.getContext('2d')
 968 |             ctx.drawImage(img, 0, 0, width, height)
 969 | 
 970 |             resolve(canvas.toDataURL('image/jpeg', imageCompressLevelTemp))
 971 |           }
 972 |           img.onerror = function (err) {
 973 |             reject(err)
 974 |           }
 975 |           img.src = base64
 976 |         })
 977 |       },
 978 | 
 979 |       openDeleteDialog(index , deleteId){
 980 |         this.btnLoader = false;
 981 |         this.selectedIndex= index;
 982 |         this.selectedId= deleteId;
 983 |         this.deleteDocumentDialog= true;
 984 |       },
 985 | 
 986 |        deleteDocument(){
 987 |           this.registryDocFile.splice(this.selectedIndex , 1);
 988 |           this.documentAttachment= this.registryDocFile;
 989 |           this.deleteDocumentDialog= false;
 990 |       },
 991 | 
 992 |       async getAttachmentDetails(selectedAttachment){
 993 |         for(let item of selectedAttachment){
 994 |           try {
 995 |             this.readerFile = await this.handleUpload(item);
 996 |           } catch (e) {
 997 |             console.log(e);
 998 |           }
 999 |           let obj= {};
1000 |           let name='';
1001 |           name= item.name.split('.');
1002 |           obj.format= item.name.substr(item.name.lastIndexOf('.') + 1);
1003 |           obj.name= name[0];
1004 |           obj.base64= this.readerFile;
1005 |           this.tempAttachmentChanged.push(obj)
1006 |         }
1007 |       },
1008 | 
1009 |       openEditDocumentDialog(item, index){
1010 |         this.btnLoader= false;
1011 |         this.attachmentIndex = index;
1012 |         this.editDocumentDialog= true;
1013 |         this.tempAttachmentChanged= item
1014 |       },
1015 | 
1016 |       editDocument(){
1017 |         this.documentAttachment.splice(this.attachmentIndex, 1, this.tempAttachmentChanged);
1018 |         this.editDocumentDialog= false;
1019 |       },
1020 | 
1021 |       /*getBinaryFile(attachment) {
1022 |         let fileUrl = '/file/' + attachment.file.url;
1023 |         window.open(process.env.apiBaseUrl +fileUrl );
1024 |       },*/
1025 | 
1026 |       getShowDetailState(index){
1027 |         this.showDetailState[index]= !this.showDetailState[index];
1028 |         console.log('showDetailState' + JSON.stringify(this.showDetailState));
1029 |       },
1030 | 
1031 |       destroyFileUploader(){
1032 |         this.documentAttachmentAPI = [];
1033 |         this.documentAttachment = [];
1034 |         this.registryDocFile= [];
1035 |         this.tempAttachment = [];
1036 |       },
1037 |     },
1038 |   };
1039 | </script>
1040 | 


--------------------------------------------------------------------------------