diff --git a/package.json b/package.json
index 513250b..4261da7 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "handy-uploader",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Complete and simple file uploader with image compressor in Vue.js. Choice Theme : Thumbnail, Simple, Table, Add custom fields, Image compressor, Manage files count, Manage files size, Multi language support , ...",
   "author": "ali jahanpak",
   "license": "MIT",
diff --git a/src/App.vue b/src/App.vue
index d178940..3747c99 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,8 +12,8 @@
         :changeFileName="true"
         :addFileDescription="true"
         :addFileTag="true"
-        :lang= "'en'"
-        :tags= "['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
+        :lang="'en'"
+        :tags="['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']"
       >
       </handy-uploader>
     </v-main>
@@ -32,39 +32,38 @@ export default {
 
   data: () => ({
     registryDocFile: [],
-    customLang : {
-      custom : {
-        insertFile: 'Insert File1',
-        insertNewFile: 'Insert New File1',
-        add: 'Add',
-        delete: 'Delete',
+    customLang: {
+      custom: {
+        insertFile: "Insert File1",
+        insertNewFile: "Insert New File1",
+        add: "Add",
+        delete: "Delete",
         deleteDialog: {
-          message: 'Are you sure you want to delete the file?',
-          cancel: 'cancel',
+          message: "Are you sure you want to delete the file?",
+          cancel: "cancel"
         },
         table: {
-          thumb: 'Thumb',
-          name: 'Name',
-          size: 'Size',
-          tags: 'tags',
+          thumb: "Thumb",
+          name: "Name",
+          size: "Size",
+          tags: "tags",
           action: {
-            action: 'Action',
-            deleteTooltip: 'Delete'
+            action: "Action",
+            deleteTooltip: "Delete"
           }
         },
         size: {
-          kb: 'KB',
-          mb: 'MB',
+          kb: "KB",
+          mb: "MB"
         },
-        maxFileSizeAlert: 'Max file Size is',
-        maxFileCountAlert: 'Max file Count is',
-        fileName: 'File Name',
-        fileDescription: 'File Description',
-        fileTags: 'File Tags',
+        maxFileSizeAlert: "Max file Size is",
+        maxFileCountAlert: "Max file Count is",
+        fileName: "File Name",
+        fileDescription: "File Description",
+        fileTags: "File Tags"
       }
-    },
+    }
   }),
-  methods: {
-  }
+  methods: {}
 };
 </script>
diff --git a/src/components/handyUploader.vue b/src/components/handyUploader.vue
index 57f422a..2e16a08 100755
--- a/src/components/handyUploader.vue
+++ b/src/components/handyUploader.vue
@@ -5,123 +5,379 @@
         <template v-if="badgeCounter">
           <template v-if="documentAttachment.length > 0">
             <v-badge
-                    bordered
-                    :color="documentAttachment.length === maxFileCount ? 'error' : 'success'"
-                    overlap
-                    :content="documentAttachment.length"
+              bordered
+              :color="
+                documentAttachment.length === maxFileCount ? 'error' : 'success'
+              "
+              overlap
+              :content="documentAttachment.length"
             >
-              <v-btn :color="btnColor" @click="openInputDocumentModal"> {{selectedLang[lang].insertFile}} </v-btn>
+              <v-btn :color="btnColor" @click="openInputDocumentModal">
+                {{ selectedLang[lang].insertFile }}
+              </v-btn>
             </v-badge>
           </template>
           <template v-else>
-            <v-btn :color="btnColor" @click="openInputDocumentModal"> {{selectedLang[lang].insertFile}} </v-btn>
+            <v-btn :color="btnColor" @click="openInputDocumentModal">
+              {{ selectedLang[lang].insertFile }}
+            </v-btn>
           </template>
         </template>
         <template v-if="!badgeCounter">
-          <v-btn :color="btnColor" @click="openInputDocumentModal"> {{selectedLang[lang].insertFile}} </v-btn>
+          <v-btn :color="btnColor" @click="openInputDocumentModal">
+            {{ selectedLang[lang].insertFile }}
+          </v-btn>
         </template>
         <v-row v-if="fileUploaderType === 'simple'">
-          <v-col v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`" cols="12" :md="cols" xs="12">
+          <v-col
+            v-for="(attachment, index) in documentAttachment"
+            :key="`attachment-${index}`"
+            cols="12"
+            :md="cols"
+            xs="12"
+          >
             <v-card
-                    :shaped="shaped"
-                    :outlined="outlined"
-                    :raised="raised"
-                    :tile="tile"
+              :shaped="shaped"
+              :outlined="outlined"
+              :raised="raised"
+              :tile="tile"
             >
               <v-list-item three-line>
                 <v-list-item-content>
-                  <v-list-item-subtitle color="blue-grey darken-3">{{attachment.file.name}}</v-list-item-subtitle>
-                  <v-list-item-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024 ">
-                    <v-chip
-                            color="teal lighten-2"
-                            label
-                            text-color="white"
-                    >
-                      {{  Number((attachment.file.size / 1000).toFixed(1)) +'  '+ selectedLang[lang].size.kb}}
+                  <v-list-item-subtitle color="blue-grey darken-3">{{
+                    attachment.file.name
+                  }}</v-list-item-subtitle>
+                  <v-list-item-subtitle
+                    v-if="
+                      Number((attachment.file.size / 1000).toFixed(1)) < 1024
+                    "
+                  >
+                    <v-chip color="teal lighten-2" label text-color="white">
+                      {{
+                        Number((attachment.file.size / 1000).toFixed(1)) +
+                          "  " +
+                          selectedLang[lang].size.kb
+                      }}
                       <v-icon right>mdi-harddisk</v-icon>
                     </v-chip>
                   </v-list-item-subtitle>
-                  <v-list-item-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
-                    <v-chip
-                            color="teal lighten-2"
-                            label
-                            text-color="white"
-                    >
-                      {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) +'  '+ selectedLang[lang].size.mb}}
+                  <v-list-item-subtitle
+                    v-if="
+                      Number((attachment.file.size / 1000).toFixed(1)) > 1024
+                    "
+                  >
+                    <v-chip color="teal lighten-2" label text-color="white">
+                      {{
+                        Number(
+                          (attachment.file.size / 1000 / 1024).toFixed(1)
+                        ) +
+                          "  " +
+                          selectedLang[lang].size.mb
+                      }}
                       <v-icon right>mdi-harddisk</v-icon>
                     </v-chip>
                   </v-list-item-subtitle>
                 </v-list-item-content>
-                <v-list-item-avatar
-                        tile
-                        size="80"
-                        color="blue-grey lighten-5"
-                >
-                  <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'">
+                <v-list-item-avatar tile size="80" color="blue-grey lighten-5">
+                  <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'
+                    "
+                  >
                     <v-img
-                            v-if="thumb"
-                            :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64 "
+                      v-if="thumb"
+                      :src="
+                        'data:' +
+                          attachment.file.format +
+                          ',' +
+                          attachment.file.base64
+                      "
                     ></v-img>
-                    <v-icon v-else  style="margin-left: 10px" size="50" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
+                    <v-icon
+                      v-else
+                      style="margin-left: 10px"
+                      size="50"
+                      file-word-outline
+                      color="deep-purple darken-1"
+                      >mdi-file-image-outline</v-icon
+                    >
                   </template>
                   <template v-else>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <v-icon
+                      v-else
+                      x-large
+                      file-word-outline
+                      color="indigo lighten-1"
+                      >mdi-file-question-outline</v-icon
+                    >
                   </template>
                 </v-list-item-avatar>
               </v-list-item>
-              <v-divider
-                      class="mx-4"
-              ></v-divider>
+              <v-divider class="mx-4"></v-divider>
               <v-card-actions style="padding: 0">
                 <v-tooltip right>
                   <template v-slot:activator="{ on }">
-                    <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>
+                    <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
+                    >
                   </template>
-                  <span class="BYekan">{{selectedLang[lang].delete}}</span>
+                  <span class="BYekan">{{ selectedLang[lang].delete }}</span>
                 </v-tooltip>
                 <v-tooltip right>
                   <template v-slot:activator="{ on }">
-                    <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>
+                    <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
+                    >
                   </template>
-                  <span class="BYekan">{{selectedLang[lang].edit}}</span>
+                  <span class="BYekan">{{ selectedLang[lang].edit }}</span>
                 </v-tooltip>
 
                 <v-spacer></v-spacer>
 
                 <v-btn
-                        v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''"
-                        icon
-                        @click.prevent="attachment.file.showDetailState = !attachment.file.showDetailState"
+                  v-if="
+                    attachment.file.tags.length > 0 ||
+                      attachment.file.description !== ''
+                  "
+                  icon
+                  @click.prevent="
+                    attachment.file.showDetailState = !attachment.file
+                      .showDetailState
+                  "
                 >
-                  <v-icon>{{ attachment.file.showDetailState ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+                  <v-icon>{{
+                    attachment.file.showDetailState
+                      ? "mdi-chevron-up"
+                      : "mdi-chevron-down"
+                  }}</v-icon>
                 </v-btn>
               </v-card-actions>
 
               <v-expand-transition>
-                <template v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''">
+                <template
+                  v-if="
+                    attachment.file.tags.length > 0 ||
+                      attachment.file.description !== ''
+                  "
+                >
                   <div v-show="attachment.file.showDetailState">
                     <v-divider></v-divider>
                     <v-chip-group
-                            v-if="attachment.file.tags.length > 0"
-                            multiple
-                            active-class="primary--text"
-                            style="padding: 8px"
+                      v-if="attachment.file.tags.length > 0"
+                      multiple
+                      active-class="primary--text"
+                      style="padding: 8px"
                     >
-                      <v-chip v-for="(tag, index) in attachment.file.tags" :key="`attachment-${index}`" style="margin: 5px">
-                        {{tag}}
+                      <v-chip
+                        v-for="(tag, index) in attachment.file.tags"
+                        :key="`attachment-${index}`"
+                        style="margin: 5px"
+                      >
+                        {{ tag }}
                       </v-chip>
                     </v-chip-group>
-                    <v-card-text v-if="attachment.file.description != null" style="text-align: justify">
-                      {{attachment.file.description}}
+                    <v-card-text
+                      v-if="attachment.file.description != null"
+                      style="text-align: justify"
+                    >
+                      {{ attachment.file.description }}
                     </v-card-text>
                   </div>
                 </template>
@@ -130,69 +386,244 @@
           </v-col>
         </v-row>
         <v-row v-else-if="fileUploaderType === 'thumbnail'">
-          <v-col v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`" cols="12" md="4" xs="12">
+          <v-col
+            v-for="(attachment, index) in documentAttachment"
+            :key="`attachment-${index}`"
+            cols="12"
+            md="4"
+            xs="12"
+          >
             <v-card
-                    :shaped="shaped"
-                    :outlined="outlined"
-                    :raised="raised"
-                    :tile="tile"
-                    class="mx-auto"
-                    max-width="344"
+              :shaped="shaped"
+              :outlined="outlined"
+              :raised="raised"
+              :tile="tile"
+              class="mx-auto"
+              max-width="344"
             >
-              <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'">
+              <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'
+                "
+              >
                 <v-img
-                        :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64"
-                        height="200px"
+                  :src="
+                    'data:' +
+                      attachment.file.format +
+                      ',' +
+                      attachment.file.base64
+                  "
+                  height="200px"
                 ></v-img>
               </template>
               <template v-else>
                 <v-list-item-avatar
-                        style="margin-top: 0"
-                        tile
-                        width="345"
-                        height="192"
-                        color="blue-grey lighten-5"
+                  style="margin-top: 0"
+                  tile
+                  width="345"
+                  height="192"
+                  color="blue-grey lighten-5"
                 >
                   <template>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                    <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <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
+                    >
+                    <v-icon
+                      v-else
+                      x-large
+                      file-word-outline
+                      color="indigo lighten-1"
+                      >mdi-file-question-outline</v-icon
+                    >
                   </template>
                 </v-list-item-avatar>
               </template>
 
               <v-card-subtitle style="height: 70px">
-                {{attachment.file.name}}
+                {{ attachment.file.name }}
               </v-card-subtitle>
-              <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024" class="mt2">
-                <v-chip
-                        color="teal lighten-2"
-                        label
-                        text-color="white"
-                >
-                  {{  Number((attachment.file.size / 1000).toFixed(1)) +'  '+ selectedLang[lang].size.kb}}
+              <v-card-subtitle
+                v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024"
+                class="mt2"
+              >
+                <v-chip color="teal lighten-2" label text-color="white">
+                  {{
+                    Number((attachment.file.size / 1000).toFixed(1)) +
+                      "  " +
+                      selectedLang[lang].size.kb
+                  }}
                   <v-icon right>mdi-harddisk</v-icon>
                 </v-chip>
               </v-card-subtitle>
-              <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
-                <v-chip
-                        color="teal lighten-2"
-                        label
-                        text-color="white"
-                >
-                  {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) +'  '+ selectedLang[lang].size.mb}}
+              <v-card-subtitle
+                v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024"
+              >
+                <v-chip color="teal lighten-2" label text-color="white">
+                  {{
+                    Number((attachment.file.size / 1000 / 1024).toFixed(1)) +
+                      "  " +
+                      selectedLang[lang].size.mb
+                  }}
                   <v-icon right>mdi-harddisk</v-icon>
                 </v-chip>
               </v-card-subtitle>
-              <v-divider
-                      class="mx-4"
-              ></v-divider>
+              <v-divider class="mx-4"></v-divider>
               <v-spacer></v-spacer>
               <!--<v-card-actions>
                 <v-btn text @click="openDeleteDialog(index , '')" >{{selectedLang[lang].delete}}</v-btn>
@@ -202,127 +633,386 @@
               <v-card-actions style="padding: 0">
                 <v-tooltip right>
                   <template v-slot:activator="{ on }">
-                    <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>
+                    <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
+                    >
                   </template>
-                  <span class="BYekan">{{selectedLang[lang].delete}}</span>
+                  <span class="BYekan">{{ selectedLang[lang].delete }}</span>
                 </v-tooltip>
                 <v-tooltip right>
                   <template v-slot:activator="{ on }">
-                    <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>
+                    <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
+                    >
                   </template>
-                  <span class="BYekan">{{selectedLang[lang].edit}}</span>
+                  <span class="BYekan">{{ selectedLang[lang].edit }}</span>
                 </v-tooltip>
 
                 <v-spacer></v-spacer>
 
                 <v-btn
-                        v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''"
-                        icon
-                        @click.prevent="attachment.file.showDetailState = !attachment.file.showDetailState"
+                  v-if="
+                    attachment.file.tags.length > 0 ||
+                      attachment.file.description !== ''
+                  "
+                  icon
+                  @click.prevent="
+                    attachment.file.showDetailState = !attachment.file
+                      .showDetailState
+                  "
                 >
-                  <v-icon>{{ attachment.file.showDetailState ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+                  <v-icon>{{
+                    attachment.file.showDetailState
+                      ? "mdi-chevron-up"
+                      : "mdi-chevron-down"
+                  }}</v-icon>
                 </v-btn>
               </v-card-actions>
 
               <v-expand-transition>
-                <template v-if="attachment.file.tags.length > 0 || attachment.file.description !== ''">
+                <template
+                  v-if="
+                    attachment.file.tags.length > 0 ||
+                      attachment.file.description !== ''
+                  "
+                >
                   <div v-show="attachment.file.showDetailState">
                     <v-divider></v-divider>
                     <v-chip-group
-                            v-if="attachment.file.tags.length > 0"
-                            multiple
-                            active-class="primary--text"
-                            style="padding: 8px"
+                      v-if="attachment.file.tags.length > 0"
+                      multiple
+                      active-class="primary--text"
+                      style="padding: 8px"
                     >
-                      <v-chip v-for="(tag,index) in attachment.file.tags" :key="`attachment-${index}`" style="margin: 5px">
-                        {{tag}}
+                      <v-chip
+                        v-for="(tag, index) in attachment.file.tags"
+                        :key="`attachment-${index}`"
+                        style="margin: 5px"
+                      >
+                        {{ tag }}
                       </v-chip>
                     </v-chip-group>
-                    <v-card-text v-if="attachment.file.description != null" style="text-align: justify">
-                      {{attachment.file.description}}
+                    <v-card-text
+                      v-if="attachment.file.description != null"
+                      style="text-align: justify"
+                    >
+                      {{ attachment.file.description }}
                     </v-card-text>
                   </div>
                 </template>
               </v-expand-transition>
-
             </v-card>
           </v-col>
         </v-row>
         <v-row v-if="fileUploaderType === 'table'">
           <v-col cols="12" lg="12" md="12" xs="12">
-            <v-simple-table :fixed-header="tableFixedHeader" :height="tableHeight + 'px'">
+            <v-simple-table
+              :fixed-header="tableFixedHeader"
+              :height="tableHeight + 'px'"
+            >
               <template v-slot:default>
                 <thead>
-                <tr>
-                  <th v-if="tableThumbColumn" class="text-left">{{selectedLang[lang].table.thumb}}</th>
-                  <th class="text-left">{{selectedLang[lang].table.name}}</th>
-                  <th class="text-left">{{selectedLang[lang].table.size}}</th>
-                  <th class="text-left">{{selectedLang[lang].table.action.action}}</th>
-                </tr>
+                  <tr>
+                    <th v-if="tableThumbColumn">
+                      {{ selectedLang[lang].table.thumb }}
+                    </th>
+                    <th>
+                      {{ selectedLang[lang].table.name }}
+                    </th>
+                    <th>
+                      {{ selectedLang[lang].table.size }}
+                    </th>
+                    <th>
+                      {{ selectedLang[lang].table.action.action }}
+                    </th>
+                  </tr>
                 </thead>
                 <tbody>
-                <tr v-for="(attachment, index) in documentAttachment" :key="`attachment-${index}`">
-                  <td v-if="tableThumbColumn">
-                    <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'">
-                      <v-img
-                              v-if="thumb"
-                              style="margin: 10px"
-                              :src="'data:'+ attachment.file.format  + ',' + attachment.file.base64 "
-                              height="50px"
-                              width="50px"
-                      ></v-img>
-                      <v-icon v-else  style="margin-left: 10px" size="50" file-word-outline color="deep-purple darken-1">mdi-file-image-outline</v-icon>
-                    </template>
-                    <template v-else>
-                      <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>
-                      <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>
-                      <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>
-                      <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>
-                      <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>
-                      <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>
-                      <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>
-                      <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>
-                      <v-icon  v-else x-large file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
-                    </template>
-                  </td>
-                  <td>{{ attachment.file.name }}</td>
-                  <td>
-                    <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) < 1024" class="mt2">
-                      <v-chip
-                              color="teal lighten-2"
-                              label
-                              text-color="white"
+                  <tr
+                    v-for="(attachment, index) in documentAttachment"
+                    :key="`attachment-${index}`"
+                  >
+                    <td v-if="tableThumbColumn">
+                      <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'
+                        "
                       >
-                        {{  Number((attachment.file.size / 1000).toFixed(1)) + selectedLang[lang].size.kb}}
-                        <v-icon right>mdi-harddisk</v-icon>
-                      </v-chip>
-                    </v-card-subtitle>
-                    <v-card-subtitle v-if="Number((attachment.file.size / 1000).toFixed(1)) > 1024">
-                      <v-chip
-                              color="teal lighten-2"
-                              label
-                              text-color="white"
-                      >
-                        {{  Number(((attachment.file.size / 1000) / 1024 ).toFixed(1)) + selectedLang[lang].size.mb}}
-                        <v-icon right>mdi-harddisk</v-icon>
-                      </v-chip>
-                    </v-card-subtitle>
-                  </td>
-                  <td>
-                    <v-tooltip top>
-                      <template v-slot:activator="{ on }">
-                        <v-btn v-if="deletePermission" icon color="red" v-on="on" @click="openDeleteDialog(index , '')" ><v-icon>mdi-delete</v-icon></v-btn>
+                        <v-img
+                          v-if="thumb"
+                          style="margin: 10px"
+                          :src="
+                            'data:' +
+                              attachment.file.format +
+                              ',' +
+                              attachment.file.base64
+                          "
+                          height="50px"
+                          width="50px"
+                        ></v-img>
+                        <v-icon
+                          v-else
+                          style="margin-left: 10px"
+                          size="50"
+                          file-word-outline
+                          color="deep-purple darken-1"
+                          >mdi-file-image-outline</v-icon
+                        >
                       </template>
-                      <span>{{selectedLang[lang].table.action.deleteTooltip}}</span>
-                    </v-tooltip>
-                    <v-tooltip top>
-                      <template v-slot:activator="{ on }">
-                        <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>
+                      <template v-else>
+                        <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
+                        >
+                        <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
+                        >
+                        <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
+                        >
+                        <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
+                        >
+                        <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
+                        >
+                        <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
+                        >
+                        <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
+                        >
+                        <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
+                        >
+                        <v-icon
+                          v-else
+                          x-large
+                          file-word-outline
+                          color="indigo lighten-1"
+                          >mdi-file-question-outline</v-icon
+                        >
                       </template>
-                      <span class="BYekan">{{selectedLang[lang].edit}}</span>
-                    </v-tooltip>
-                  </td>
-                </tr>
+                    </td>
+                    <td>{{ attachment.file.name }}</td>
+                    <td>
+                      <v-card-subtitle
+                        v-if="
+                          Number((attachment.file.size / 1000).toFixed(1)) <
+                            1024
+                        "
+                        class="mt2"
+                      >
+                        <v-chip color="teal lighten-2" label text-color="white">
+                          {{
+                            Number((attachment.file.size / 1000).toFixed(1)) +
+                              selectedLang[lang].size.kb
+                          }}
+                          <v-icon right>mdi-harddisk</v-icon>
+                        </v-chip>
+                      </v-card-subtitle>
+                      <v-card-subtitle
+                        v-if="
+                          Number((attachment.file.size / 1000).toFixed(1)) >
+                            1024
+                        "
+                      >
+                        <v-chip color="teal lighten-2" label text-color="white">
+                          {{
+                            Number(
+                              (attachment.file.size / 1000 / 1024).toFixed(1)
+                            ) + selectedLang[lang].size.mb
+                          }}
+                          <v-icon right>mdi-harddisk</v-icon>
+                        </v-chip>
+                      </v-card-subtitle>
+                    </td>
+                    <td>
+                      <v-tooltip top>
+                        <template v-slot:activator="{ on }">
+                          <v-btn
+                            v-if="deletePermission"
+                            icon
+                            color="red"
+                            v-on="on"
+                            @click="openDeleteDialog(index, '')"
+                            ><v-icon>mdi-delete</v-icon></v-btn
+                          >
+                        </template>
+                        <span>{{
+                          selectedLang[lang].table.action.deleteTooltip
+                        }}</span>
+                      </v-tooltip>
+                      <v-tooltip top>
+                        <template v-slot:activator="{ on }">
+                          <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
+                          >
+                        </template>
+                        <span class="BYekan">{{
+                          selectedLang[lang].edit
+                        }}</span>
+                      </v-tooltip>
+                    </td>
+                  </tr>
                 </tbody>
               </template>
             </v-simple-table>
@@ -332,94 +1022,296 @@
     </v-row>
     <!--Insert New Document Dialog Start-->
     <v-row justify="center">
-      <v-dialog v-model="insertDocumentDialog" :scrollable="false" persistent width="50%">
+      <v-dialog
+        v-model="insertDocumentDialog"
+        :scrollable="false"
+        persistent
+        width="50%"
+      >
         <v-card>
           <v-card-title>
             <v-icon @click="insertDocumentDialog = false">mdi-close</v-icon>
           </v-card-title>
           <v-card-text class="BYekan">
             <template v-if="tempAttachment.length === 0">
-              <v-file-input v-if="fileAccept !== ''" multiple :accept="fileAccept" chip v-model="tempAttachment" :label="selectedLang[lang].insertNewFile"></v-file-input>
-              <v-file-input v-else multiple v-model="tempAttachment" :label="selectedLang[lang].insertNewFile"></v-file-input>
+              <v-file-input
+                v-if="fileAccept !== ''"
+                multiple
+                :accept="fileAccept"
+                chip
+                v-model="tempAttachment"
+                :label="selectedLang[lang].insertNewFile"
+              ></v-file-input>
+              <v-file-input
+                v-else
+                multiple
+                v-model="tempAttachment"
+                :label="selectedLang[lang].insertNewFile"
+              ></v-file-input>
             </template>
             <template>
-              <v-expansion-panels v-if="addFileTag || addFileDescription || changeFileName">
+              <v-expansion-panels
+                v-if="addFileTag || addFileDescription || changeFileName"
+              >
                 <v-expansion-panel
-                        v-for="(attachment, index) in tempAttachmentChanged" :key="`attachment-${index}`"
+                  v-for="(attachment, index) in tempAttachmentChanged"
+                  :key="`attachment-${index}`"
                 >
-                  <v-expansion-panel-header>{{attachment.name}}</v-expansion-panel-header>
+                  <v-expansion-panel-header>{{
+                    attachment.name
+                  }}</v-expansion-panel-header>
                   <v-expansion-panel-content>
                     <v-row align="center" justify="center">
                       <v-col cols="12" lg="9" md="9" xs="12">
                         <v-text-field
-                                v-if="changeFileName"
-                                :label="selectedLang[lang].fileName"
-                                v-model="attachment.name"
-                                :prepend-icon="attachment.icon"
+                          v-if="changeFileName"
+                          :label="selectedLang[lang].fileName"
+                          v-model="attachment.name"
+                          :prepend-icon="attachment.icon"
                         >
                         </v-text-field>
                         <v-textarea
-                                v-if="addFileDescription"
-                                :label="selectedLang[lang].fileDescription"
-                                auto-grow
-                                row-height="1"
-                                v-model="attachment.description"
+                          v-if="addFileDescription"
+                          :label="selectedLang[lang].fileDescription"
+                          auto-grow
+                          row-height="1"
+                          v-model="attachment.description"
                         >
                         </v-textarea>
                         <v-autocomplete
-                                v-if="addFileTag"
-                                v-model="attachment.tags"
-                                :items="tags"
-                                dense
-                                chips
-                                :label="selectedLang[lang].fileTags"
-                                multiple
+                          v-if="addFileTag"
+                          v-model="attachment.tags"
+                          :items="tags"
+                          dense
+                          chips
+                          :label="selectedLang[lang].fileTags"
+                          multiple
                         ></v-autocomplete>
                       </v-col>
                       <v-col align="center" cols="12" lg="3" md="3" xs="12">
-                        <template v-if="attachment.format === 'jpg' || attachment.format === 'jpeg' || attachment.format === 'png' || attachment.format === 'tif' || attachment.format === 'bmp'">
+                        <template
+                          v-if="
+                            attachment.format === 'jpg' ||
+                              attachment.format === 'jpeg' ||
+                              attachment.format === 'png' ||
+                              attachment.format === 'tif' ||
+                              attachment.format === 'bmp'
+                          "
+                        >
                           <v-card>
-                            <v-img
-                                    :src="attachment.base64 "
-                            ></v-img>
+                            <v-img :src="attachment.base64"></v-img>
                           </v-card>
                         </template>
                         <template v-else>
-                          <v-icon  v-if="attachment.format === 'pdf'" size="60" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
-                          <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>
-                          <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>
-                          <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>
-                          <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>
-                          <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>
-                          <v-icon  v-else-if="attachment.format === 'dwg' " size="60" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
-                          <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>
-                          <v-icon  v-else-if="attachment.format === 'txt' " size="60" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
-                          <v-icon  v-else size="60" file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
+                          <v-icon
+                            v-if="attachment.format === 'pdf'"
+                            size="60"
+                            file-word-outline
+                            color="red darken-1"
+                            >mdi-file-pdf-outline</v-icon
+                          >
+                          <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
+                          >
+                          <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
+                          >
+                          <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
+                          >
+                          <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
+                          >
+                          <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
+                          >
+                          <v-icon
+                            v-else-if="attachment.format === 'dwg'"
+                            size="60"
+                            file-word-outline
+                            color="indigo lighten-2"
+                            >mdi-file-cad</v-icon
+                          >
+                          <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
+                          >
+                          <v-icon
+                            v-else-if="attachment.format === 'txt'"
+                            size="60"
+                            file-word-outline
+                            color="light-green darken-3"
+                            >mdi-script-text-outline</v-icon
+                          >
+                          <v-icon
+                            v-else
+                            size="60"
+                            file-word-outline
+                            color="indigo lighten-1"
+                            >mdi-file-question-outline</v-icon
+                          >
                         </template>
                       </v-col>
                     </v-row>
                   </v-expansion-panel-content>
                 </v-expansion-panel>
               </v-expansion-panels>
-              <v-card
-                      v-else
-                      class="mx-auto"
-                      tile
-              >
-                <v-list-item v-for="(attachment, index) in tempAttachmentChanged" :key="`attachment-${index}`" style="border-bottom: 1px solid #E0E0E0">
+              <v-card v-else class="mx-auto" tile>
+                <v-list-item
+                  v-for="(attachment, index) in tempAttachmentChanged"
+                  :key="`attachment-${index}`"
+                  style="border-bottom: 1px solid #E0E0E0"
+                >
                   <v-list-item-content>
                     <v-list-item-title>
-                      <v-icon  v-if="attachment.format === 'pdf'" size="30" file-word-outline color="red darken-1">mdi-file-pdf-outline</v-icon>
-                      <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>
-                      <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>
-                      <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>
-                      <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>
-                      <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>
-                      <v-icon  v-else-if="attachment.format === 'dwg' " size="30" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
-                      <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>
-                      <v-icon  v-else-if="attachment.format === 'txt' " size="30" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
-                      <v-icon  v-else size="30" file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
-                      {{attachment.name}}.{{attachment.format}}
+                      <v-icon
+                        v-if="attachment.format === 'pdf'"
+                        size="30"
+                        file-word-outline
+                        color="red darken-1"
+                        >mdi-file-pdf-outline</v-icon
+                      >
+                      <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
+                      >
+                      <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
+                      >
+                      <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
+                      >
+                      <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
+                      >
+                      <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
+                      >
+                      <v-icon
+                        v-else-if="attachment.format === 'dwg'"
+                        size="30"
+                        file-word-outline
+                        color="indigo lighten-2"
+                        >mdi-file-cad</v-icon
+                      >
+                      <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
+                      >
+                      <v-icon
+                        v-else-if="attachment.format === 'txt'"
+                        size="30"
+                        file-word-outline
+                        color="light-green darken-3"
+                        >mdi-script-text-outline</v-icon
+                      >
+                      <v-icon
+                        v-else
+                        size="30"
+                        file-word-outline
+                        color="indigo lighten-1"
+                        >mdi-file-question-outline</v-icon
+                      >
+                      {{ attachment.name }}.{{ attachment.format }}
                     </v-list-item-title>
                   </v-list-item-content>
                 </v-list-item>
@@ -427,7 +1319,14 @@
             </template>
           </v-card-text>
           <v-card-actions>
-            <v-btn class="BYekan" :disabled="tempAttachment == null || btnLoader" :loading="btnLoader" :color="btnColor" @click="uploadFieldChange">{{selectedLang[lang].add}}</v-btn>
+            <v-btn
+              class="BYekan"
+              :disabled="tempAttachment == null || btnLoader"
+              :loading="btnLoader"
+              :color="btnColor"
+              @click="uploadFieldChange"
+              >{{ selectedLang[lang].add }}</v-btn
+            >
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -435,64 +1334,197 @@
     <!--Insert New Document Dialog End-------------------------------------------------------------------->
     <!--Update Document Dialog Start---------------------------------------------------------------------->
     <v-row justify="center">
-      <v-dialog v-model="editDocumentDialog" :scrollable="false" persistent width="50%">
+      <v-dialog
+        v-model="editDocumentDialog"
+        :scrollable="false"
+        persistent
+        width="50%"
+      >
         <v-card>
           <v-card-title>
             <v-icon @click="editDocumentDialog = false">mdi-close</v-icon>
           </v-card-title>
-          <v-card-text  v-for="(attachment, index) in tempAttachmentChanged" :key="`attachment-${index}`" class="BYekan">
+          <v-card-text
+            v-for="(attachment, index) in tempAttachmentChanged"
+            :key="`attachment-${index}`"
+            class="BYekan"
+          >
             <v-row align="center" justify="center">
               <v-col cols="12" lg="9" md="9" xs="12">
                 <v-text-field
-                        v-if="changeFileName"
-                        :label="selectedLang[lang].fileName"
-                        v-model="attachment.name"
-                        :prepend-icon="attachment.icon"
+                  v-if="changeFileName"
+                  :label="selectedLang[lang].fileName"
+                  v-model="attachment.name"
+                  :prepend-icon="attachment.icon"
                 >
                 </v-text-field>
                 <v-textarea
-                        v-if="addFileDescription"
-                        :label="selectedLang[lang].fileDescription"
-                        auto-grow
-                        row-height="1"
-                        v-model="attachment.description"
+                  v-if="addFileDescription"
+                  :label="selectedLang[lang].fileDescription"
+                  auto-grow
+                  row-height="1"
+                  v-model="attachment.description"
                 >
                 </v-textarea>
                 <v-autocomplete
-                        v-if="addFileTag"
-                        v-model="attachment.tags"
-                        :items="tags"
-                        dense
-                        chips
-                        :label="selectedLang[lang].fileTags"
-                        multiple
+                  v-if="addFileTag"
+                  v-model="attachment.tags"
+                  :items="tags"
+                  dense
+                  chips
+                  :label="selectedLang[lang].fileTags"
+                  multiple
                 ></v-autocomplete>
               </v-col>
               <v-col align="center" cols="12" lg="3" md="3" xs="12">
-                <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'">
+                <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'
+                  "
+                >
                   <v-card>
                     <v-img
-                            :src="'data:'+ attachment.format  + ',' + attachment.base64"
+                      :src="
+                        'data:' + attachment.format + ',' + attachment.base64
+                      "
                     ></v-img>
                   </v-card>
                 </template>
                 <template v-else>
-                  <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>
-                  <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>
-                  <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>
-                  <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>
-                  <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>
-                  <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>
-                  <v-icon  v-else-if="attachment.format === 'dwg' " size="60" file-word-outline color="indigo lighten-2">mdi-file-cad</v-icon>
-                  <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>
-                  <v-icon  v-else-if="attachment.format === 'txt' " size="60" file-word-outline color="light-green darken-3">mdi-script-text-outline</v-icon>
-                  <v-icon  v-else size="60" file-word-outline color="indigo lighten-1">mdi-file-question-outline</v-icon>
+                  <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
+                  >
+                  <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
+                  >
+                  <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
+                  >
+                  <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
+                  >
+                  <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
+                  >
+                  <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
+                  >
+                  <v-icon
+                    v-else-if="attachment.format === 'dwg'"
+                    size="60"
+                    file-word-outline
+                    color="indigo lighten-2"
+                    >mdi-file-cad</v-icon
+                  >
+                  <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
+                  >
+                  <v-icon
+                    v-else-if="attachment.format === 'txt'"
+                    size="60"
+                    file-word-outline
+                    color="light-green darken-3"
+                    >mdi-script-text-outline</v-icon
+                  >
+                  <v-icon
+                    v-else
+                    size="60"
+                    file-word-outline
+                    color="indigo lighten-1"
+                    >mdi-file-question-outline</v-icon
+                  >
                 </template>
               </v-col>
             </v-row>
           </v-card-text>
           <v-card-actions>
-            <v-btn class="BYekan" :disabled="tempAttachment === null || btnLoader" :loading="btnLoader" :color="btnColor" @click="editDocument">{{selectedLang[lang].edit}}</v-btn>
+            <v-btn
+              class="BYekan"
+              :disabled="tempAttachment === null || btnLoader"
+              :loading="btnLoader"
+              :color="btnColor"
+              @click="editDocument"
+              >{{ selectedLang[lang].edit }}</v-btn
+            >
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -500,19 +1532,16 @@
     <!--Update Document Dialog End------------------------------------------------------------------------>
 
     <!--File Uploader SnackBar Alert Start --------------------------------------------------------------->
-    <v-snackbar class="BYekan"
-                v-model="fileUploaderSnackBarAlert"
-                right
-                bottom
-                :color="fileUploaderSnackBarAlertColor"
-                :timeout="3000"
+    <v-snackbar
+      class="BYekan"
+      v-model="fileUploaderSnackBarAlert"
+      right
+      bottom
+      :color="fileUploaderSnackBarAlertColor"
+      :timeout="3000"
     >
-      {{fileUploaderSnackText}}
-      <v-btn
-              color="white"
-              text
-              @click="fileUploaderSnackBarAlert = false"
-      >
+      {{ fileUploaderSnackText }}
+      <v-btn color="white" text @click="fileUploaderSnackBarAlert = false">
         <v-icon>mdi-close</v-icon>
       </v-btn>
     </v-snackbar>
@@ -525,12 +1554,25 @@
             <v-icon color="red"></v-icon>
           </v-card-title>
           <v-card-text class="BYekan">
-            {{selectedLang[lang].deleteDialog.message}}
+            {{ selectedLang[lang].deleteDialog.message }}
           </v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn class="BYekan" color="green darken-1" text @click="deleteDocumentDialog= false">{{selectedLang[lang].deleteDialog.cancel}}</v-btn>
-            <v-btn class="BYekan" color="primary" :disabled="btnLoader" :loading="btnLoader" @click="deleteDocument">{{selectedLang[lang].delete}} </v-btn>
+            <v-btn
+              class="BYekan"
+              color="green darken-1"
+              text
+              @click="deleteDocumentDialog = false"
+              >{{ selectedLang[lang].deleteDialog.cancel }}</v-btn
+            >
+            <v-btn
+              class="BYekan"
+              color="primary"
+              :disabled="btnLoader"
+              :loading="btnLoader"
+              @click="deleteDocument"
+              >{{ selectedLang[lang].delete }}
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -540,418 +1582,426 @@
 </template>
 
 <script>
-  /**
-   * This is an example of uploading files. with this component you can see, insert, delete files.
-   * @version 1.0
-   * @author [ali jahanpak](https://github.com/alijahanpak)
-   * @since Version 1.0
-   */
-  import languages from "./language";
-  export default {
-    props: {
-      /**
-       * Array contain files
-       */
-      documentAttachment: [Array],
-      /**
-       * Send api url for 'add' and 'delete'.
-       * f.e: /building/add or /building/delete
-       */
-      maxFileSize: {
-        type: Number,
-        default: 5120,
-      },
-      /**
-       * choose File Uploader Type
-       */
-      fileUploaderType: {
-        type: String,
-        default: 'thumbnail'
-      },
-      /**
-       * Maximum file Upload
-       */
-      maxFileCount: {
-        type: Number,
-        default: 0
-      },
-      /**
-       * choose File Uploader Card Type
-       */
-      cardType: String,
-      /**
-       * Badge file counter state
-       */
-      badgeCounter: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * change Button Color
-       */
-      btnColor: {
-        type: String,
-        default: 'info'
-      },
-      /**
-       * Enable / Disable image compressor
-       */
-      imageCompressor: Boolean,
-      /**
-       * Image compress level (0 to 1)
-       */
-      imageCompressLevel: {
-        type: Number,
-        default: 0.5
-      },
-      /**
-       * Accept uploaded files
-       */
-      fileAccept: String,
-      /**
-       * show / hidden thumb for images in table and simple file uploader
-       */
-      thumb: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * show / hidden thumb column in table file uploader
-       */
-      tableThumbColumn: Boolean,
-      /**
-       * enable / disable table fixed header
-       */
-      tableFixedHeader: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * set table height
-       */
-      tableHeight: {
-        type: Number,
-        default: 400
-      },
-      /**
-       * Enable RTL support languages
-       */
-      rtlSupport: {
-        type: Boolean,
-        default: false
-      },
-      /**
-       * Change file uploader languages
-       */
-      lang: {
-        type: String,
-        default: 'en'
-      },
-      /**
-       * Change file Name before upload
-       */
-      changeFileName: {
-        type: Boolean,
-        default: false
-      },
-      /**
-       * Add file Description before upload
-       */
-      addFileDescription: {
-        type: Boolean,
-        default: false
-      },
-      /**
-       * Add file tags before upload
-       */
-      addFileTag: {
-        type: Boolean,
-        default: false
-      },
-      /**
-       * Array of file tags
-       */
-      tags: {
-        type: Array,
-      },
-      /**
-       * Change count of columns
-       */
-      cols: {
-        type: Number,
-        default: 4
-      },
-      /**
-       * Define Custom language for uploader
-       */
-      customLang: {
-        type: Object,
-        default: null
-      },
-      /**
-       * Set Insert/Add new file Permission
-       */
-      insertPermission: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * Set edit Permission
-       */
-      editPermission: {
-        type: Boolean,
-        default: true
-      },
-      /**
-       * Set delete Permission
-       */
-      deletePermission: {
-        type: Boolean,
-        default: true
-      },
+/**
+ * This is an example of uploading files. with this component you can see, insert, delete files.
+ * @version 1.0
+ * @author [ali jahanpak](https://github.com/alijahanpak)
+ * @since Version 1.0
+ */
+import languages from "./language";
+export default {
+  props: {
+    /**
+     * Array contain files
+     */
+    documentAttachment: [Array],
+    /**
+     * Send api url for 'add' and 'delete'.
+     * f.e: /building/add or /building/delete
+     */
+    maxFileSize: {
+      type: Number,
+      default: 5120
     },
-    data: () => ({
-      insertDocumentDialog: false,
-      editDocumentDialog: false,
-      deleteDocumentDialog: false,
-      tempAttachment:[],
-      tempAttachmentChanged:[],
-      fileUploaderSnackBarAlert: false,
-      fileUploaderSnackText: '',
-      fileUploaderSnackBarAlertColor: 'green',
-      readerFile: null,
-      registryDocFile: [],
-      documentAttachmentAPI: [],
-      btnLoader: false,
-      showDetail: false,
-      showDetailState: [],
-      selectedIndex: '',
-      selectedId: '',
-      returnedRecord: {},
-      //Card Theme
-      outlined: false,
-      raised: false,
-      shaped: false,
-      tile: false,
-      selectedLang: {},
-      beforeInsertAttachments: {},
-      attachmentIndex: '',
-    }),
-    watch: {
-      tempAttachment : function(newValue){
-        if(this.tempAttachment.length > 0)
-          this.getAttachmentDetails(newValue);
-        else this.tempAttachmentChanged = [];
-      },
-      cardType : function() {
-        this.$emit('update:cardType', this.cardType);
-        this.setCardTheme();
-      },
-      badgeCounter : function() {
-        this.$emit('update:badgeCounter', this.badgeCounter);
-      },
-      maxFileCount : function() {
-        this.$emit('update:maxFileCount', this.maxFileCount);
-      },
-      maxFileSize : function() {
-        this.$emit('update:maxFileSize', Number(this.maxFileSize));
-      },
-      imageCompressor : function() {
-        this.$emit('update:imageCompressor', this.imageCompressor);
-      },
-      imageCompressLevel : function() {
-        this.$emit('update:imageCompressLevel', this.imageCompressLevel);
-      },
-      fileAccept : function() {
-        this.$emit('update:fileAccept', this.fileAccept);
-      },
-      thumb : function() {
-        this.$emit('update:thumb', this.thumb);
-      },
-      changeFileName : function() {
-        this.$emit('update:changeFileName', this.changeFileName);
-      },
-      addFileDescription : function() {
-        this.$emit('update:addFileDescription', this.addFileDescription);
-      },
-      addFileTag : function() {
-        this.$emit('update:addFileTag', this.addFileTag);
-      },
-      tableThumbColumn : function() {
-        this.$emit('update:tableThumbColumn', this.tableThumbColumn);
-      },
-      tableFixedHeader : function() {
-        this.$emit('update:tableFixedHeader', this.tableFixedHeader);
-      },
-      tableHeight : function() {
-        this.$emit('update:tableHeight', this.tableHeight);
-      },
-      lang : function() {
-        this.$emit('update:lang', this.lang);
-      },
+    /**
+     * choose File Uploader Type
+     */
+    fileUploaderType: {
+      type: String,
+      default: "thumbnail"
     },
-    computed: {
-
+    /**
+     * Maximum file Upload
+     */
+    maxFileCount: {
+      type: Number,
+      default: 0
     },
-    mounted () {
-
+    /**
+     * choose File Uploader Card Type
+     */
+    cardType: String,
+    /**
+     * Badge file counter state
+     */
+    badgeCounter: {
+      type: Boolean,
+      default: true
     },
-
-    created(){
-      if(this.rtlSupport)
-        this.changeRTL();
-      this.setLang();
+    /**
+     * change Button Color
+     */
+    btnColor: {
+      type: String,
+      default: "info"
+    },
+    /**
+     * Enable / Disable image compressor
+     */
+    imageCompressor: Boolean,
+    /**
+     * Image compress level (0 to 1)
+     */
+    imageCompressLevel: {
+      type: Number,
+      default: 0.5
+    },
+    /**
+     * Accept uploaded files
+     */
+    fileAccept: String,
+    /**
+     * show / hidden thumb for images in table and simple file uploader
+     */
+    thumb: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * show / hidden thumb column in table file uploader
+     */
+    tableThumbColumn: Boolean,
+    /**
+     * enable / disable table fixed header
+     */
+    tableFixedHeader: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * set table height
+     */
+    tableHeight: {
+      type: Number,
+      default: 400
+    },
+    /**
+     * Enable RTL support languages
+     */
+    rtlSupport: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Change file uploader languages
+     */
+    lang: {
+      type: String,
+      default: "en"
+    },
+    /**
+     * Change file Name before upload
+     */
+    changeFileName: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Add file Description before upload
+     */
+    addFileDescription: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Add file tags before upload
+     */
+    addFileTag: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Array of file tags
+     */
+    tags: {
+      type: Array
+    },
+    /**
+     * Change count of columns
+     */
+    cols: {
+      type: Number,
+      default: 4
+    },
+    /**
+     * Define Custom language for uploader
+     */
+    customLang: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Set Insert/Add new file Permission
+     */
+    insertPermission: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Set edit Permission
+     */
+    editPermission: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Set delete Permission
+     */
+    deletePermission: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data: () => ({
+    insertDocumentDialog: false,
+    editDocumentDialog: false,
+    deleteDocumentDialog: false,
+    tempAttachment: [],
+    tempAttachmentChanged: [],
+    fileUploaderSnackBarAlert: false,
+    fileUploaderSnackText: "",
+    fileUploaderSnackBarAlertColor: "green",
+    readerFile: null,
+    registryDocFile: [],
+    documentAttachmentAPI: [],
+    btnLoader: false,
+    showDetail: false,
+    showDetailState: [],
+    selectedIndex: "",
+    selectedId: "",
+    returnedRecord: {},
+    //Card Theme
+    outlined: false,
+    raised: false,
+    shaped: false,
+    tile: false,
+    selectedLang: {},
+    beforeInsertAttachments: {},
+    attachmentIndex: ""
+  }),
+  watch: {
+    tempAttachment: function(newValue) {
+      if (this.tempAttachment.length > 0) this.getAttachmentDetails(newValue);
+      else this.tempAttachmentChanged = [];
+    },
+    cardType: function() {
+      this.$emit("update:cardType", this.cardType);
       this.setCardTheme();
     },
-    destroyed(){
-      this.registryDocFile= [];
+    badgeCounter: function() {
+      this.$emit("update:badgeCounter", this.badgeCounter);
     },
-    methods: {
-      setLang(){
-        if( this.customLang !== null)
-          this.selectedLang= this.customLang;
-        else
-          this.selectedLang= languages;
-      },
-      changeRTL () {
-        this.$vuetify.rtl = true
-      },
-      setCardTheme (){
-        switch (this.cardType) {
-          case 'default':
-            this.outlined= false;
-            this.raised= false;
-            this.shaped= false;
-            this.tile= false;
-            break;
-          case 'outlined':
-            this.outlined= true;
-            this.raised= false;
-            this.shaped= false;
-            this.tile= false;
-            break;
-          case 'shaped':
-            this.shaped= true;
-            this.raised= false;
-            this.outlined= false;
-            this.tile= false;
-            break;
-          case 'raised':
-            this.raised= true;
-            this.shaped= false;
-            this.outlined= false;
-            this.tile= false;
-            break;
-          case 'tile':
-            this.tile= true;
-            this.shaped= false;
-            this.outlined= false;
-            this.raised= false;
-            break;
-        }
-      },
+    maxFileCount: function() {
+      this.$emit("update:maxFileCount", this.maxFileCount);
+    },
+    maxFileSize: function() {
+      this.$emit("update:maxFileSize", Number(this.maxFileSize));
+    },
+    imageCompressor: function() {
+      this.$emit("update:imageCompressor", this.imageCompressor);
+    },
+    imageCompressLevel: function() {
+      this.$emit("update:imageCompressLevel", this.imageCompressLevel);
+    },
+    fileAccept: function() {
+      this.$emit("update:fileAccept", this.fileAccept);
+    },
+    thumb: function() {
+      this.$emit("update:thumb", this.thumb);
+    },
+    changeFileName: function() {
+      this.$emit("update:changeFileName", this.changeFileName);
+    },
+    addFileDescription: function() {
+      this.$emit("update:addFileDescription", this.addFileDescription);
+    },
+    addFileTag: function() {
+      this.$emit("update:addFileTag", this.addFileTag);
+    },
+    tableThumbColumn: function() {
+      this.$emit("update:tableThumbColumn", this.tableThumbColumn);
+    },
+    tableFixedHeader: function() {
+      this.$emit("update:tableFixedHeader", this.tableFixedHeader);
+    },
+    tableHeight: function() {
+      this.$emit("update:tableHeight", this.tableHeight);
+    },
+    lang: function() {
+      this.$emit("update:lang", this.lang);
+    }
+  },
+  computed: {},
+  mounted() {},
 
-      openInputDocumentModal(){
-        this.btnLoader= false;
-        this.tempAttachment= [];
-        this.insertDocumentDialog = true;
-      },
+  created() {
+    if (this.rtlSupport) this.changeRTL();
+    this.setLang();
+    this.setCardTheme();
+  },
+  destroyed() {
+    this.registryDocFile = [];
+  },
+  methods: {
+    setLang() {
+      if (this.customLang !== null) this.selectedLang = this.customLang;
+      else this.selectedLang = languages;
+    },
+    changeRTL() {
+      this.$vuetify.rtl = true;
+    },
+    setCardTheme() {
+      switch (this.cardType) {
+        case "default":
+          this.outlined = false;
+          this.raised = false;
+          this.shaped = false;
+          this.tile = false;
+          break;
+        case "outlined":
+          this.outlined = true;
+          this.raised = false;
+          this.shaped = false;
+          this.tile = false;
+          break;
+        case "shaped":
+          this.shaped = true;
+          this.raised = false;
+          this.outlined = false;
+          this.tile = false;
+          break;
+        case "raised":
+          this.raised = true;
+          this.shaped = false;
+          this.outlined = false;
+          this.tile = false;
+          break;
+        case "tile":
+          this.tile = true;
+          this.shaped = false;
+          this.outlined = false;
+          this.raised = false;
+          break;
+      }
+    },
 
-      handleUpload(fileAttachment) {
-        let reader = new FileReader();
-        return new Promise(function(resolve) {
-          reader.onloadend = () => {
-            resolve(reader.result);
-          };
-          reader.readAsDataURL(fileAttachment);
-        });
-      },
+    openInputDocumentModal() {
+      this.btnLoader = false;
+      this.tempAttachment = [];
+      this.insertDocumentDialog = true;
+    },
 
-      /**
-       * asynchronous method to insert selected file(s)
-       *
-       * @public
-       * @returns {Array} selected file(s)
-       */
-      async uploadFieldChange (){
-        this.btnLoader= true;
-        for(let [index,item] of this.tempAttachment.entries()){
-          if(this.documentAttachment.length < this.maxFileCount) {
-            if((item.size / 1000).toFixed(1) > this.maxFileSize){
-              this.fileUploaderSnackBarAlertColor= 'red';
-              this.fileUploaderSnackText= `${this.selectedLang[this.lang].maxFileSizeAlert} ${Math.round(this.maxFileSize / 1024)} ${this.selectedLang[this.lang].size.mb}`;
-              this.fileUploaderSnackBarAlert= true;
+    handleUpload(fileAttachment) {
+      let reader = new FileReader();
+      return new Promise(function(resolve) {
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+        reader.readAsDataURL(fileAttachment);
+      });
+    },
+
+    /**
+     * asynchronous method to insert selected file(s)
+     *
+     * @public
+     * @returns {Array} selected file(s)
+     */
+    async uploadFieldChange() {
+      this.btnLoader = true;
+      for (let [index, item] of this.tempAttachment.entries()) {
+        if (this.documentAttachment.length < this.maxFileCount) {
+          if ((item.size / 1000).toFixed(1) > this.maxFileSize) {
+            this.fileUploaderSnackBarAlertColor = "red";
+            this.fileUploaderSnackText = `${
+              this.selectedLang[this.lang].maxFileSizeAlert
+            } ${Math.round(this.maxFileSize / 1024)} ${
+              this.selectedLang[this.lang].size.mb
+            }`;
+            this.fileUploaderSnackBarAlert = true;
+          } else {
+            let tempFile = {};
+            let file = {};
+            try {
+              this.readerFile = await this.handleUpload(item);
+            } catch (e) {
+              console.log(e);
             }
-            else{
-              let tempFile= {};
-              let file = {};
-              try {
-                this.readerFile = await this.handleUpload(item);
-              } catch (e) {
-                console.log(e);
-              }
-              let fullFileType= this.readerFile.split(";");
-              let fileType= fullFileType[0].split(":")
-              let status = false;
-              let imgFile= ''
-              let sizeInKb=0;
-              if(this.imageCompressor){
-                if(fileType[1] === "image/png" || fileType[1] === "image/jpg" || fileType[1] === "image/jpeg" || fileType[1] === "application/octet-stream" || fileType[1] === "image/webp"){
-                  status = true;
-                  imgFile = await this.compressImage(this.readerFile, fileType[1]);
-                }
-              }
-              //tempFile.subject= this.tempAttachmentChanged[index].name + '.' + this.tempAttachmentChanged[index].format;
-              let strTemp= this.readerFile.split(",")
-              if(status){
-                let imgTemp= imgFile.split(",")
-                tempFile.base64=imgTemp[1];
-                sizeInKb= new Buffer(imgFile, 'base64').length;
-                tempFile.size= String(sizeInKb);
-              }
-              else{
-                tempFile.base64=strTemp[1];
-                tempFile.size= String(item.size);
+            let fullFileType = this.readerFile.split(";");
+            let fileType = fullFileType[0].split(":");
+            let status = false;
+            let imgFile = "";
+            let sizeInKb = 0;
+            if (this.imageCompressor) {
+              if (
+                fileType[1] === "image/png" ||
+                fileType[1] === "image/jpg" ||
+                fileType[1] === "image/jpeg" ||
+                fileType[1] === "application/octet-stream" ||
+                fileType[1] === "image/webp"
+              ) {
+                status = true;
+                imgFile = await this.compressImage(
+                  this.readerFile,
+                  fileType[1]
+                );
               }
-              tempFile.name= this.tempAttachmentChanged[index].name+ '.' + this.tempAttachmentChanged[index].format;
-              if(this.tempAttachmentChanged[index].tags === undefined)
-                tempFile.tags= [];
-              else
-                tempFile.tags= this.tempAttachmentChanged[index].tags;
-              if(this.tempAttachmentChanged[index].description === undefined)
-                tempFile.description= '';
-              else
-                tempFile.description= this.tempAttachmentChanged[index].description;
-              tempFile.showDetailState= false;
-
-              tempFile.format= strTemp[0].replace('data:' ,'');
-              file.file=tempFile;
-              this.registryDocFile.push(file);
-              this.$emit('update:documentAttachment' , this.registryDocFile);
-              //console.log(JSON.stringify(this.registryDocFile));
             }
+            //tempFile.subject= this.tempAttachmentChanged[index].name + '.' + this.tempAttachmentChanged[index].format;
+            let strTemp = this.readerFile.split(",");
+            if (status) {
+              let imgTemp = imgFile.split(",");
+              tempFile.base64 = imgTemp[1];
+              sizeInKb = new Buffer(imgFile, "base64").length;
+              tempFile.size = String(sizeInKb);
+            } else {
+              tempFile.base64 = strTemp[1];
+              tempFile.size = String(item.size);
+            }
+            tempFile.name =
+              this.tempAttachmentChanged[index].name +
+              "." +
+              this.tempAttachmentChanged[index].format;
+            if (this.tempAttachmentChanged[index].tags === undefined)
+              tempFile.tags = [];
+            else tempFile.tags = this.tempAttachmentChanged[index].tags;
+            if (this.tempAttachmentChanged[index].description === undefined)
+              tempFile.description = "";
+            else
+              tempFile.description = this.tempAttachmentChanged[
+                index
+              ].description;
+            tempFile.showDetailState = false;
+
+            tempFile.format = strTemp[0].replace("data:", "");
+            file.file = tempFile;
+            this.registryDocFile.push(file);
+            this.$emit("update:documentAttachment", this.registryDocFile);
+            //console.log(JSON.stringify(this.registryDocFile));
           }
-          else {
-            this.fileUploaderSnackBarAlertColor= 'red';
-            this.fileUploaderSnackText= `${this.selectedLang[this.lang].maxFileCountAlert} ${this.maxFileCount}`
-            this.fileUploaderSnackBarAlert= true;
-          }
+        } else {
+          this.fileUploaderSnackBarAlertColor = "red";
+          this.fileUploaderSnackText = `${
+            this.selectedLang[this.lang].maxFileCountAlert
+          } ${this.maxFileCount}`;
+          this.fileUploaderSnackBarAlert = true;
         }
-        this.documentAttachmentAPI= [];
-        this.tempAttachmentChanged= [];
-        this.insertDocumentDialog= false;
-      },
+      }
+      this.documentAttachmentAPI = [];
+      this.tempAttachmentChanged = [];
+      this.insertDocumentDialog = false;
+    },
 
-      compressImage (base64) {
-        const canvas = document.createElement('canvas')
-        const img = document.createElement('img')
+    compressImage(base64) {
+      const canvas = document.createElement("canvas");
+      const img = document.createElement("img");
 
-        return new Promise((resolve, reject) => {
-          let imageCompressLevelTemp= this.imageCompressLevel;
-          img.onload = function () {
-            let width = img.width
-            let height = img.height
-            /*const maxHeight = 1250
+      return new Promise((resolve, reject) => {
+        let imageCompressLevelTemp = this.imageCompressLevel;
+        img.onload = function() {
+          let width = img.width;
+          let height = img.height;
+          /*const maxHeight = 1250
             const maxWidth = 1250
 
             if (width > height) {
@@ -965,79 +2015,83 @@
                 height = maxHeight
               }
             }*/
-            canvas.width = width
-            canvas.height = height
+          canvas.width = width;
+          canvas.height = height;
 
-            const ctx = canvas.getContext('2d')
-            ctx.drawImage(img, 0, 0, width, height)
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, width, height);
 
-            resolve(canvas.toDataURL('image/jpeg', imageCompressLevelTemp))
-          }
-          img.onerror = function (err) {
-            reject(err)
-          }
-          img.src = base64
-        })
-      },
+          resolve(canvas.toDataURL("image/jpeg", imageCompressLevelTemp));
+        };
+        img.onerror = function(err) {
+          reject(err);
+        };
+        img.src = base64;
+      });
+    },
 
-      openDeleteDialog(index , deleteId){
-        this.btnLoader = false;
-        this.selectedIndex= index;
-        this.selectedId= deleteId;
-        this.deleteDocumentDialog= true;
-      },
+    openDeleteDialog(index, deleteId) {
+      this.btnLoader = false;
+      this.selectedIndex = index;
+      this.selectedId = deleteId;
+      this.deleteDocumentDialog = true;
+    },
 
-      deleteDocument(){
-        this.registryDocFile.splice(this.selectedIndex , 1);
-        this.documentAttachment= this.registryDocFile;
-        this.deleteDocumentDialog= false;
-      },
+    deleteDocument() {
+      this.registryDocFile.splice(this.selectedIndex, 1);
+      this.documentAttachment = this.registryDocFile;
+      this.deleteDocumentDialog = false;
+    },
 
-      async getAttachmentDetails(selectedAttachment){
-        for(let item of selectedAttachment){
-          try {
-            this.readerFile = await this.handleUpload(item);
-          } catch (e) {
-            console.log(e);
-          }
-          let obj= {};
-          let name='';
-          name= item.name.split('.');
-          obj.format= item.name.substr(item.name.lastIndexOf('.') + 1);
-          obj.name= name[0];
-          obj.base64= this.readerFile;
-          this.tempAttachmentChanged.push(obj)
+    async getAttachmentDetails(selectedAttachment) {
+      for (let item of selectedAttachment) {
+        try {
+          this.readerFile = await this.handleUpload(item);
+        } catch (e) {
+          console.log(e);
         }
-      },
-
-      openEditDocumentDialog(item, index){
-        this.btnLoader= false;
-        this.attachmentIndex = index;
-        this.editDocumentDialog= true;
-        this.tempAttachmentChanged= item
-      },
+        let obj = {};
+        let name = "";
+        name = item.name.split(".");
+        obj.format = item.name.substr(item.name.lastIndexOf(".") + 1);
+        obj.name = name[0];
+        obj.base64 = this.readerFile;
+        this.tempAttachmentChanged.push(obj);
+      }
+    },
 
-      editDocument(){
-        this.documentAttachment.splice(this.attachmentIndex, 1, this.tempAttachmentChanged);
-        this.editDocumentDialog= false;
-      },
+    openEditDocumentDialog(item, index) {
+      this.btnLoader = false;
+      this.attachmentIndex = index;
+      this.editDocumentDialog = true;
+      this.tempAttachmentChanged = item;
+    },
 
-      getBinaryFile(attachment) {
-        let fileUrl = '/file/' + attachment.file.url;
-        window.open(process.env.apiBaseUrl +fileUrl );
-      },
+    editDocument() {
+      this.documentAttachment.splice(
+        this.attachmentIndex,
+        1,
+        this.tempAttachmentChanged
+      );
+      this.editDocumentDialog = false;
+    },
 
-      getShowDetailState(index){
-        this.showDetailState[index]= !this.showDetailState[index];
-        console.log('showDetailState' + JSON.stringify(this.showDetailState));
-      },
+    getBinaryFile(attachment) {
+      let fileUrl = "/file/" + attachment.file.url;
+      window.open(process.env.apiBaseUrl + fileUrl);
+    },
 
-      destroyFileUploader(){
-        this.documentAttachmentAPI = [];
-        this.documentAttachment = [];
-        this.registryDocFile= [];
-        this.tempAttachment = [];
-      },
+    getShowDetailState(index) {
+      this.showDetailState[index] = !this.showDetailState[index];
+      console.log("showDetailState" + JSON.stringify(this.showDetailState));
     },
-  };
+
+    destroyFileUploader() {
+      this.documentAttachmentAPI = [];
+      this.documentAttachment = [];
+      this.registryDocFile = [];
+      this.tempAttachment = [];
+    }
+  }
+};
 </script>
diff --git a/src/components/language.js b/src/components/language.js
index a69fccc..5f5f5e1 100755
--- a/src/components/language.js
+++ b/src/components/language.js
@@ -1,148 +1,148 @@
-export default{
-  en:{
-    insertFile: 'Insert File',
-    insertNewFile: 'Insert New File',
-    add: 'Add',
-    delete: 'Delete',
-    edit: 'Edit',
-    deleteDialog:{
-      message: 'Are you sure you want to delete the file?',
-      cancel: 'cancel',
+export default {
+  en: {
+    insertFile: "Insert File",
+    insertNewFile: "Insert New File",
+    add: "Add",
+    delete: "Delete",
+    edit: "Edit",
+    deleteDialog: {
+      message: "Are you sure you want to delete the file?",
+      cancel: "cancel"
     },
-    table:{
-      thumb: 'Thumb',
-      name: 'Name',
-      size: 'Size',
-      tags: 'tags',
-      action:{
-        action: 'Action',
-        deleteTooltip: 'Delete'
+    table: {
+      thumb: "Thumb",
+      name: "Name",
+      size: "Size",
+      tags: "tags",
+      action: {
+        action: "Action",
+        deleteTooltip: "Delete"
       }
     },
-    size:{
-      kb: 'KB',
-      mb: 'MB',
+    size: {
+      kb: "KB",
+      mb: "MB"
     },
-    maxFileSizeAlert: 'Max file Size is',
-    maxFileCountAlert: 'Max file Count is',
-    fileName: 'File Name',
-    fileDescription: 'File Description',
-    fileTags: 'File Tags',
+    maxFileSizeAlert: "Max file Size is",
+    maxFileCountAlert: "Max file Count is",
+    fileName: "File Name",
+    fileDescription: "File Description",
+    fileTags: "File Tags"
   },
-  fa:{
-    insertFile: 'افزودن فایل',
-    insertNewFile: 'افزودن فایل جدید',
-    add: 'افزودن',
-    delete: 'حذف',
-    edit: 'ویرایش',
-    deleteDialog:{
-      message: 'آیا برای حذف فایل اطمینان دارید؟',
-      cancel: 'لغو',
+  fa: {
+    insertFile: "افزودن فایل",
+    insertNewFile: "افزودن فایل جدید",
+    add: "افزودن",
+    delete: "حذف",
+    edit: "ویرایش",
+    deleteDialog: {
+      message: "آیا برای حذف فایل اطمینان دارید؟",
+      cancel: "لغو"
     },
-    table:{
-      thumb: 'پیش نمایش',
-      name: 'نام',
-      size: 'حجم',
-      action:{
-        action: 'عملیات',
-        deleteTooltip: 'حذف'
+    table: {
+      thumb: "پیش نمایش",
+      name: "نام",
+      size: "حجم",
+      action: {
+        action: "عملیات",
+        deleteTooltip: "حذف"
       }
     },
-    size:{
-      kb: 'کیلو بایت',
-      mb: 'مگابایت'
+    size: {
+      kb: "کیلو بایت",
+      mb: "مگابایت"
     },
-    maxSizeAlert: 'حداکثر حجم فایل انتحابی ',
-    maxFileCountAlert: 'حداکثر تعداد فایل انتخابی',
-    fileName: 'نام فایل',
-    fileDescription: 'توضیحات فایل',
-    fileTags: 'برچسب فایل',
+    maxSizeAlert: "حداکثر حجم فایل انتحابی ",
+    maxFileCountAlert: "حداکثر تعداد فایل انتخابی",
+    fileName: "نام فایل",
+    fileDescription: "توضیحات فایل",
+    fileTags: "برچسب فایل"
   },
-  fr:{
-    insertFile: 'Insérer un fichier',
-    insertNewFile: 'Insérer un nouveau fichier',
-    add: 'Ajouter',
-    delete: 'Supprimer',
-    edit: 'Éditer',
-    deleteDialog:{
-      message: 'Voulez-vous vraiment supprimer le fichier?',
-      cancel: 'Annuler',
+  fr: {
+    insertFile: "Insérer un fichier",
+    insertNewFile: "Insérer un nouveau fichier",
+    add: "Ajouter",
+    delete: "Supprimer",
+    edit: "Éditer",
+    deleteDialog: {
+      message: "Voulez-vous vraiment supprimer le fichier?",
+      cancel: "Annuler"
     },
-    table:{
-      thumb: 'la vignette',
-      name: 'Nom',
-      size: 'Taille',
-      action:{
-        action: 'Action',
-        deleteTooltip: 'Supprimer'
+    table: {
+      thumb: "la vignette",
+      name: "Nom",
+      size: "Taille",
+      action: {
+        action: "Action",
+        deleteTooltip: "Supprimer"
       }
     },
-    size:{
-      kb: 'KB',
-      mb: 'MB',
+    size: {
+      kb: "KB",
+      mb: "MB"
     },
-    maxSizeAlert: 'La taille maximale du fichier est',
-    maxFileCountAlert: 'Le nombre maximal de fichiers est',
-    fileName: 'Nom de fichier',
-    fileDescription: 'description du fichier',
-    fileTags: 'Balises de fichier',
+    maxSizeAlert: "La taille maximale du fichier est",
+    maxFileCountAlert: "Le nombre maximal de fichiers est",
+    fileName: "Nom de fichier",
+    fileDescription: "description du fichier",
+    fileTags: "Balises de fichier"
   },
-  ch:{
-    insertFile: '插入档案',
-    insertNewFile: '插入新文件',
-    add: '加',
-    delete: '删除',
-    edit: '编辑',
-    deleteDialog:{
-      message: '您确定要删除文件吗?',
-      cancel: '取消',
+  ch: {
+    insertFile: "插入档案",
+    insertNewFile: "插入新文件",
+    add: "加",
+    delete: "删除",
+    edit: "编辑",
+    deleteDialog: {
+      message: "您确定要删除文件吗?",
+      cancel: "取消"
     },
-    table:{
-      thumb: '缩图',
-      name: '名称',
-      size: '尺寸',
-      action:{
-        action: '行动',
-        deleteTooltip: '删除'
+    table: {
+      thumb: "缩图",
+      name: "名称",
+      size: "尺寸",
+      action: {
+        action: "行动",
+        deleteTooltip: "删除"
       }
     },
-    size:{
-      kb: 'KB',
-      mb: 'MB',
+    size: {
+      kb: "KB",
+      mb: "MB"
     },
-    maxSizeAlert: '档案大小上限为',
-    maxFileCountAlert: '现“最大文件数”为',
-    fileName: '文档名称',
-    fileDescription: '文件描述',
-    fileTags: '文件标签',
+    maxSizeAlert: "档案大小上限为",
+    maxFileCountAlert: "现“最大文件数”为",
+    fileName: "文档名称",
+    fileDescription: "文件描述",
+    fileTags: "文件标签"
   },
-  ar:{
-    insertFile: 'إدراج ملف',
-    insertNewFile: 'إدراج ملف جديد',
-    add: 'أضف',
-    delete: 'حذف',
-    edit: 'تعديل',
-    deleteDialog:{
-      message: 'هل أنت متأكد أنك تريد حذف الملف؟',
-      cancel: 'إلغاء',
+  ar: {
+    insertFile: "إدراج ملف",
+    insertNewFile: "إدراج ملف جديد",
+    add: "أضف",
+    delete: "حذف",
+    edit: "تعديل",
+    deleteDialog: {
+      message: "هل أنت متأكد أنك تريد حذف الملف؟",
+      cancel: "إلغاء"
     },
-    table:{
-      thumb: 'ظفري',
-      name: 'اسم',
-      size: 'بحجم',
-      action:{
-        action: 'عمل',
-        deleteTooltip: 'حذف'
+    table: {
+      thumb: "ظفري",
+      name: "اسم",
+      size: "بحجم",
+      action: {
+        action: "عمل",
+        deleteTooltip: "حذف"
       }
     },
-    size:{
-      kb: 'کیلو بایت',
-      mb: 'ميغا بايت'
+    size: {
+      kb: "کیلو بایت",
+      mb: "ميغا بايت"
     },
-    maxSizeAlert: 'الحجم الأقصى للملف هو',
-    maxFileCountAlert: 'الحد الأقصى لعدد الملفات هو',
-    fileName: 'اسم الملف',
-    fileDescription: 'وصف الملف',
-    fileTags: 'علامات الملف',
-  },
-}
+    maxSizeAlert: "الحجم الأقصى للملف هو",
+    maxFileCountAlert: "الحد الأقصى لعدد الملفات هو",
+    fileName: "اسم الملف",
+    fileDescription: "وصف الملف",
+    fileTags: "علامات الملف"
+  }
+};