vue-intergrall-plugins 0.0.285 → 0.0.287

package/src/lib-components/Chat/BtnFiles.vue

@@ -1,415 +1,415 @@
-<template>
-  <span class="text-footer-actions--btn" :class="{'files-activated' : openFiles || file.name}" @click="openFilesByClip()"> <!-- || file.length -->
-    <!-- <transition name="fade">
-      <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="`Visualizar ${fileSize} arquivo(s)`" class="files-counter">
-        {{ fileSize }}
-      </span>
-    </transition> -->
-    <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
-    <transition name="fade">
-      <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="!fileSettings.handleFilePreview ? dictionary.msg_abrir_anexos : `${file.length} anexo(s) selecionado(s)`" :class="`${fileSettings.filePreviewStyle == 2 ? 'files-counter-2' : 'files-counter'}`">
-        <template v-if="fileSettings.filePreviewStyle == 1">
-          {{ fileSize }}
-        </template>
-        <template v-else>
-          <fa-icon :icon="['fas', 'eye']" />
-        </template>
-      </span>
-    </transition>
-    <transition name="show">
-      <div v-if="openFiles && hasButtonFiles" class="text-footer-files-container" :class="{'horizontal' : cssStyle.outsideButtons}">
-        <template v-if="!fileSettings.multiple">
-          <div class="files-btn images" :class="{'margin-bottom' : cssStyle.outsideButtons}" :title="dictionary.title_anexo_img" @click="openSelectFileHandler('img')">
-            <fa-icon :icon="['fas', 'image']" />
-          </div>
-          <div class="files-btn docs" :title="dictionary.title_anexo_doc" @click="openSelectFileHandler('doc')">
-            <fa-icon :icon="['fas', 'file-alt']" />
-          </div>
-        </template>
-        <div v-else class="files-btn both" :title="dictionary.title_anexo_arq" @click="openSelectFileHandler('both')">
-          <fa-icon :icon="['fas', 'image']" />
-          <fa-icon :icon="['fas', 'file-alt']" />
-        </div>
-        <div v-if="fileSettings.systemButton" class="files-btn system" :title="dictionary.title_anexo_sistema" @click="openSelectFileHandler('system')">
-          <fa-icon :icon="['fas', 'server']" />
-        </div>
-      </div>
-    </transition>
-    <div class="files-pointers d-none">
-      <input v-if="fileSettings.multiple" type="file" :id="`both-${textId}`" :accept="acceptedExtensions" multiple @change="fileUpload($event, 'both')" />
-      <input v-if="!fileSettings.multiple" type="file" :id="`img-${textId}`" :accept="acceptedExtensions" @change="fileUpload($event, 'img')" />
-      <input v-if="!fileSettings.multiple" type="file" :id="`doc-${textId}`" :accept="acceptedExtensions" @change="fileUpload($event, 'doc')" />
-    </div>
-    <transition name="fade">
-      <div class="text-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]" v-on-clickaway="away">
-        <SingleFilePreview 
-          v-if="!fileSettings.multiple && showFilePreview"
-          :dictionary="dictionary"
-          :file="file"
-          :isDoc="isDoc"
-          :fileFormatError="fileFormatError"
-          :validFileFormats="validFileFormats"
-          :imagePreview="imagePreview"
-          :textId="textId"
-          @delete-file="deleteFile"
-          @open-image="openImage"
-          @close="away"
-        />
-        <MultipleFilePreview 
-          v-else-if="fileSettings.multiple && showFilePreview"
-          :dictionary="dictionary"
-          :file="file"
-          :fileFormatError="fileFormatError"
-          :validFileFormats="validFileFormats"
-          @delete-file="deleteFile"
-          @delete-specific-file="deleteSpecificFile"
-          @open-image="openImage"
-          @close="away"
-        />
-      </div>
-    </transition>
-  </span>
-</template>
-
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.files-counter {
-  position: absolute;
-  top: unset;
-  transform: translate(17.5px, -15px);
-  background-color: #888;
-  z-index: 1;
-  font-size: .5rem;
-  width: 15px;
-  height: 15px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  opacity: .9;
-  transition: all 300ms;
-  color: #FFF;
-  font-weight: 900;
-}
-.files-counter:hover {
-  opacity: 1
-}
-.files-counter-2 {
-  transform: translate(-15px, 28px);
-  opacity: .9;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #888;
-  font-size: .8rem
-}
-.files-counter-2 svg {
-  margin-left: 5px;
-}
-.files-counter-2:hover {
-  opacity: 1;
-  text-decoration: underline;
-}
-</style>
-
-<script>
-import { mixin as clickaway } from 'vue-clickaway'
-import SingleFilePreview from "./SingleFilePreview"
-import MultipleFilePreview from "./MultipleFilePreview"
-
-export default {
-  components: { SingleFilePreview, MultipleFilePreview },
-  mixins: [ clickaway ],
-  props: {
-    textId: {
-      type: String,
-      required: true
-    },
-    dictionary: {
-      type: Object,
-      required: true
-    },
-    fileSettings: {
-      type: Object,
-      required: false
-    },
-    cssStyle: {
-      type: Object,
-      required: false
-    },
-    hasButtonFiles: {
-      type: Boolean,
-      required: false
-    },
-    externalFiles: {
-      type: Array,
-      required: false
-    }
-  },
-  data() {
-    return {
-      file: [],
-      fileSize: 0,
-      openFiles: false,
-      showFilePreview: false,
-      imagePreview: "",
-      isDoc: false,
-      fileFormatError: false,
-      validFileFormats: "",
-      hasAnyFile: false,
-      externalFilesAux: [],
-    }
-  },
-  computed: {
-    previewContainerClass() {
-      if(this.fileFormatError) return "isError"
-      if(this.fileSettings.multiple) return "isMultiple"
-      if(this.isDoc) return "isDoc"
-      return "isMsg"
-    },
-    acceptedExtensions() {
-      let str = ""
-      if(this.fileSettings.docsExtensions && this.fileSettings.imagesExtensions) {
-        str = `${this.fileSettings.docsExtensions.split("|").join(',')}${this.fileSettings.imagesExtensions.split("|").join(',')}`
-      }else if(this.fileSettings.docsExtensions) {
-        str = this.fileSettings.docsExtensions.split("|").join(',')
-      }else if(this.fileSettings.imagesExtensions) {
-        str = this.fileSettings.imagesExtensions.split("|").join(',')
-      }
-      if(str) {
-        const arr = str.split(",").map(ext => {
-          ext = ext && ext.startsWith(".") ? ext : `.${ext}`
-          return ext
-        })
-        str = arr.join(",")
-      }
-      if(this.fileSettings.multiple) return str ? str : "image/*,application/*"
-      if(this.isDoc) return str ? str : "application/*"
-      return str ? str : "image/*"
-    },
-  },
-  watch: {
-    externalFiles() {
-      if(!this.externalFiles.length) return
-      if(this.externalFiles.length > this.fileSettings.max) {
-        this.$emit("reset-file-system")
-        return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
-      }
-      this.file = []
-      this.externalFilesAux = Array.from(this.externalFiles)
-      this.externalFilesAux.forEach(files => {
-        this.file.push(files)
-      })
-      this.fileSize = this.file.length
-      this.multipleFileUpload()
-    }
-  },
-  methods: {
-    openFilesByClip(){
-      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
-      if(this.fileSettings.multiple && !this.hasButtonFiles){
-        return this.openSelectFileHandler('both')
-      }
-      return this.toggleFiles()
-    },
-    away() {
-      this.showFilePreview = false
-    },
-    toggleFiles() {
-      this.openFiles = !this.openFiles
-    },
-    openSelectFileHandler(type) {
-      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
-      if(type == "system") return this.$emit("open-file-system")
-      if(this.fileSettings.multiple){ type = 'both' }
-      const fileInput = document.querySelector(`#${type}-${this.textId}`)
-      if(fileInput) fileInput.click()
-      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
-    },
-    isFileValid(type, fileName, fileType) {
-      if((type == "img" && !this.fileSettings.imagesExtensions) || (type == "doc" && !this.fileSettings.docsExtensions)) {
-        this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
-        this.hasAnyFile = false
-        return false
-      }
-      const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
-      const regex = new RegExp("("+extensions+")", "i")
-      if(regex.test(fileName) || regex.test(fileType)) return true
-      this.hasAnyFile = false
-      this.showToastedValidFormats()
-      return false
-    },
-    showToastedValidFormats() {
-      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
-        const str = {
-          img: this.fileSettings.imagesExtensions.split("|").join(", "),
-          doc: this.fileSettings.docsExtensions.split("|").join(", ")
-        }
-      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
-    },
-    fileUpload(event, type, externalCall) {
-      try {
-        this.fileSize = 0
-        if(this.fileFormatError) this.file = []
-        this.openFiles = false
-        const filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
-        const isStackable = this.fileSettings.stackFiles && this.fileSettings.multiple
-        this.file =  filesAux.length ? isStackable ? this.file.concat(...filesAux) : filesAux : this.file
-        if(!this.file.length) return
-
-        let sizeInBytes = 0
-        Array.from(this.file).forEach(file => sizeInBytes += file.size)
-        const sizeInMb = parseFloat((sizeInBytes / (1024*1024)).toFixed(2))
-        if(sizeInMb == 0) {
-          this.file = []
-          return this.$toasted.global.defaultInfo({ msg: this.dictionary.msg_arquivo_invalido }) 
-        }
-        if(sizeInMb >= 15) {
-          this.file = []
-          return this.$toasted.global.defaultInfo({ msg: `Limite de 15 MB por arquivo` })
-        }
-
-        if(this.file.length > this.fileSettings.max) {
-          this.file = []
-          return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
-        }
-        this.hasAnyFile = true
-        this.fileSize = this.file.length
-        if(!this.fileSettings.multiple) {
-          this.file = this.file[0]
-          this.singleFileUpload(type, this.file.name, this.file.type)
-        }else {
-          this.multipleFileUpload()
-        }
-      }catch(e) {
-        console.error("Error file upload")
-        console.error(e)
-      }
-    },
-    returnFileType(file) {
-      if(!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions) return ""
-
-      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
-      if(imgRegex.test(file.name)) return "img"
-
-      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
-      if(docRegex.test(file.name)) return "doc"
-
-      return ""
-    },
-    multipleFileUpload() {
-      const hasImgExt = this.fileSettings.imagesExtensions ? true : false
-      const hasDocExt = this.fileSettings.docsExtensions ? true : false
-      if(!hasImgExt && !hasDocExt) {
-        this.file = []
-        this.fileSize = 0
-        return this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
-      }
-      let waitForImageLoad = false
-      let hasAnyInvalidFile = false
-      this.file = Array.from(this.file)
-      this.file.forEach(file => {
-        const singleFileType = this.returnFileType(file)
-        if(!singleFileType) file.invalid = true
-        file.imgOrDoc = singleFileType ? singleFileType : ""
-        if(this.isFileValid(file.imgOrDoc, file.name, file.type)) {
-          if(file.imgOrDoc == "img") {
-            const fileReader = new FileReader();
-            waitForImageLoad = true
-            fileReader.onload = () => file.src = fileReader.result
-            fileReader.onloadend = () => this.emitFileVars(true)
-            fileReader.readAsDataURL(file)
-          }
-          if(file.imgOrDoc === "doc") this.isDoc = true
-          file.invalid = false
-          this.fileFormatError = !hasAnyInvalidFile ? false : true
-        }else{
-          hasAnyInvalidFile = true
-          file.invalid = true
-          this.fileFormatError = true
-          if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")}`
-          if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
-          if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")} - Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
-        }
-      })
-
-      if(this.fileFormatError) {
-        this.file = []
-        this.fileSize = 0
-      }
-
-      if(this.isDoc && !waitForImageLoad) this.emitFileVars()
-    },
-    singleFileUpload(type, fileName, fileType) {
-      if(this.isFileValid(type, fileName, fileType)) {
-        const fileReader = new FileReader()
-        if(type === "img") {
-          fileReader.onload = () => this.imagePreview = fileReader.result 
-          fileReader.onloadend = () => this.emitFileVars()
-          fileReader.readAsDataURL(this.file)
-        }
-        if(type === "doc") this.isDoc = true
-        
-        this.fileFormatError = false
-      }else {
-        this.fileFormatError = true
-        const hasImgExt = this.fileSettings.imagesExtensions ? true : false
-        const hasDocExt = this.fileSettings.docsExtensions ? true : false
-        if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions}`
-        if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions}`
-        if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions} - Documentos: ${this.fileSettings.docsExtensions}`
-      }
-
-      if(this.isDoc) this.emitFileVars()
-    },
-    toggleFilePreview() {
-      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
-      if(this.fileSettings.handleFilePreview) {
-        this.emitFileVars()
-        return this.$emit("handle-file-preview")
-      }
-      this.showFilePreview = !this.showFilePreview
-      if(this.showFilePreview && this.openFiles) this.toggleFiles()
-    },
-    emitFileVars() {
-      const vars = { file: this.file, isDoc: this.isDoc, imagePreview: this.imagePreview, fileFormatError: this.fileFormatError, hasAnyFile: this.hasAnyFile }
-
-      this.$emit("set-file-vars", vars)
-      this.$parent.focusTextarea()
-    },
-    deleteSpecificFile(obj) {
-      const { fileName } = obj
-      this.file = this.file.filter(file => {
-        return file.name != fileName
-      })
-      this.fileSize = this.file.length;
-      this.file.length ? this.emitFileVars(true) : this.deleteFile()
-    },
-    deleteFile() {
-      this.fileSize = this.file.length;
-      this.$emit("set-file-vars", { file: [], isDoc: false, imagePreview: "", fileFormatError: false, hasAnyFile: false })
-
-      this.file = []
-      this.isDoc = false
-      this.showFilePreview = false
-      this.hasAnyFile = false
-      this.imagePreview = ""
-      this.fileFormatError = false
-      this.validFileFormats = ""
-    },
-    openImage(imagePreview) {
-      this.$emit("open-image", !imagePreview ? this.imagePreview : imagePreview)
-    }
-  }
-}
-</script>
+<template>
+  <span class="text-footer-actions--btn" :class="{'files-activated' : openFiles || file.name}" @click="openFilesByClip()"> <!-- || file.length -->
+    <!-- <transition name="fade">
+      <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="`Visualizar ${fileSize} arquivo(s)`" class="files-counter">
+        {{ fileSize }}
+      </span>
+    </transition> -->
+    <fa-icon :icon="['fas', 'paperclip']" :title="dictionary.title_selecionar_anexo" />
+    <transition name="fade">
+      <span v-if="fileSize > 0" @click.stop="toggleFilePreview" v-tippy :content="!fileSettings.handleFilePreview ? dictionary.msg_abrir_anexos : `${file.length} anexo(s) selecionado(s)`" :class="`${fileSettings.filePreviewStyle == 2 ? 'files-counter-2' : 'files-counter'}`">
+        <template v-if="fileSettings.filePreviewStyle == 1">
+          {{ fileSize }}
+        </template>
+        <template v-else>
+          <fa-icon :icon="['fas', 'eye']" />
+        </template>
+      </span>
+    </transition>
+    <transition name="show">
+      <div v-if="openFiles && hasButtonFiles" class="text-footer-files-container" :class="{'horizontal' : cssStyle.outsideButtons}">
+        <template v-if="!fileSettings.multiple">
+          <div class="files-btn images" :class="{'margin-bottom' : cssStyle.outsideButtons}" :title="dictionary.title_anexo_img" @click="openSelectFileHandler('img')">
+            <fa-icon :icon="['fas', 'image']" />
+          </div>
+          <div class="files-btn docs" :title="dictionary.title_anexo_doc" @click="openSelectFileHandler('doc')">
+            <fa-icon :icon="['fas', 'file-alt']" />
+          </div>
+        </template>
+        <div v-else class="files-btn both" :title="dictionary.title_anexo_arq" @click="openSelectFileHandler('both')">
+          <fa-icon :icon="['fas', 'image']" />
+          <fa-icon :icon="['fas', 'file-alt']" />
+        </div>
+        <div v-if="fileSettings.systemButton" class="files-btn system" :title="dictionary.title_anexo_sistema" @click="openSelectFileHandler('system')">
+          <fa-icon :icon="['fas', 'server']" />
+        </div>
+      </div>
+    </transition>
+    <div class="files-pointers d-none">
+      <input v-if="fileSettings.multiple" type="file" :id="`both-${textId}`" :accept="acceptedExtensions" multiple @change="fileUpload($event, 'both')" />
+      <input v-if="!fileSettings.multiple" type="file" :id="`img-${textId}`" :accept="acceptedExtensions" @change="fileUpload($event, 'img')" />
+      <input v-if="!fileSettings.multiple" type="file" :id="`doc-${textId}`" :accept="acceptedExtensions" @change="fileUpload($event, 'doc')" />
+    </div>
+    <transition name="fade">
+      <div class="text-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]" v-on-clickaway="away">
+        <SingleFilePreview 
+          v-if="!fileSettings.multiple && showFilePreview"
+          :dictionary="dictionary"
+          :file="file"
+          :isDoc="isDoc"
+          :fileFormatError="fileFormatError"
+          :validFileFormats="validFileFormats"
+          :imagePreview="imagePreview"
+          :textId="textId"
+          @delete-file="deleteFile"
+          @open-image="openImage"
+          @close="away"
+        />
+        <MultipleFilePreview 
+          v-else-if="fileSettings.multiple && showFilePreview"
+          :dictionary="dictionary"
+          :file="file"
+          :fileFormatError="fileFormatError"
+          :validFileFormats="validFileFormats"
+          @delete-file="deleteFile"
+          @delete-specific-file="deleteSpecificFile"
+          @open-image="openImage"
+          @close="away"
+        />
+      </div>
+    </transition>
+  </span>
+</template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.files-counter {
+  position: absolute;
+  top: unset;
+  transform: translate(17.5px, -15px);
+  background-color: #888;
+  z-index: 1;
+  font-size: .5rem;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  opacity: .9;
+  transition: all 300ms;
+  color: #FFF;
+  font-weight: 900;
+}
+.files-counter:hover {
+  opacity: 1
+}
+.files-counter-2 {
+  transform: translate(-15px, 28px);
+  opacity: .9;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #888;
+  font-size: .8rem
+}
+.files-counter-2 svg {
+  margin-left: 5px;
+}
+.files-counter-2:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+</style>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway'
+import SingleFilePreview from "./SingleFilePreview"
+import MultipleFilePreview from "./MultipleFilePreview"
+
+export default {
+  components: { SingleFilePreview, MultipleFilePreview },
+  mixins: [ clickaway ],
+  props: {
+    textId: {
+      type: String,
+      required: true
+    },
+    dictionary: {
+      type: Object,
+      required: true
+    },
+    fileSettings: {
+      type: Object,
+      required: false
+    },
+    cssStyle: {
+      type: Object,
+      required: false
+    },
+    hasButtonFiles: {
+      type: Boolean,
+      required: false
+    },
+    externalFiles: {
+      type: Array,
+      required: false
+    }
+  },
+  data() {
+    return {
+      file: [],
+      fileSize: 0,
+      openFiles: false,
+      showFilePreview: false,
+      imagePreview: "",
+      isDoc: false,
+      fileFormatError: false,
+      validFileFormats: "",
+      hasAnyFile: false,
+      externalFilesAux: [],
+    }
+  },
+  computed: {
+    previewContainerClass() {
+      if(this.fileFormatError) return "isError"
+      if(this.fileSettings.multiple) return "isMultiple"
+      if(this.isDoc) return "isDoc"
+      return "isMsg"
+    },
+    acceptedExtensions() {
+      let str = ""
+      if(this.fileSettings.docsExtensions && this.fileSettings.imagesExtensions) {
+        str = `${this.fileSettings.docsExtensions.split("|").join(',')}${this.fileSettings.imagesExtensions.split("|").join(',')}`
+      }else if(this.fileSettings.docsExtensions) {
+        str = this.fileSettings.docsExtensions.split("|").join(',')
+      }else if(this.fileSettings.imagesExtensions) {
+        str = this.fileSettings.imagesExtensions.split("|").join(',')
+      }
+      if(str) {
+        const arr = str.split(",").map(ext => {
+          ext = ext && ext.startsWith(".") ? ext : `.${ext}`
+          return ext
+        })
+        str = arr.join(",")
+      }
+      if(this.fileSettings.multiple) return str ? str : "image/*,application/*"
+      if(this.isDoc) return str ? str : "application/*"
+      return str ? str : "image/*"
+    },
+  },
+  watch: {
+    externalFiles() {
+      if(!this.externalFiles.length) return
+      if(this.externalFiles.length > this.fileSettings.max) {
+        this.$emit("reset-file-system")
+        return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
+      }
+      this.file = []
+      this.externalFilesAux = Array.from(this.externalFiles)
+      this.externalFilesAux.forEach(files => {
+        this.file.push(files)
+      })
+      this.fileSize = this.file.length
+      this.multipleFileUpload()
+    }
+  },
+  methods: {
+    openFilesByClip(){
+      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
+      if(this.fileSettings.multiple && !this.hasButtonFiles){
+        return this.openSelectFileHandler('both')
+      }
+      return this.toggleFiles()
+    },
+    away() {
+      this.showFilePreview = false
+    },
+    toggleFiles() {
+      this.openFiles = !this.openFiles
+    },
+    openSelectFileHandler(type) {
+      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
+      if(type == "system") return this.$emit("open-file-system")
+      if(this.fileSettings.multiple){ type = 'both' }
+      const fileInput = document.querySelector(`#${type}-${this.textId}`)
+      if(fileInput) fileInput.click()
+      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+    },
+    isFileValid(type, fileName, fileType) {
+      if((type == "img" && !this.fileSettings.imagesExtensions) || (type == "doc" && !this.fileSettings.docsExtensions)) {
+        this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
+        this.hasAnyFile = false
+        return false
+      }
+      const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
+      const regex = new RegExp("("+extensions+")", "i")
+      if(regex.test(fileName) || regex.test(fileType)) return true
+      this.hasAnyFile = false
+      this.showToastedValidFormats()
+      return false
+    },
+    showToastedValidFormats() {
+      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+      if (!document.querySelector(".toasted.toasted-primary.info")) this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+    },
+    fileUpload(event, type, externalCall) {
+      try {
+        this.fileSize = 0
+        if(this.fileFormatError) this.file = []
+        this.openFiles = false
+        const filesAux = !externalCall ? event.target.files ? event.target.files : event.dataTransfer.files : event
+        const isStackable = this.fileSettings.stackFiles && this.fileSettings.multiple
+        this.file =  filesAux.length ? isStackable ? this.file.concat(...filesAux) : filesAux : this.file
+        if(!this.file.length) return
+
+        let sizeInBytes = 0
+        Array.from(this.file).forEach(file => sizeInBytes += file.size)
+        const sizeInMb = parseFloat((sizeInBytes / (1024*1024)).toFixed(2))
+        if(sizeInMb == 0) {
+          this.file = []
+          return this.$toasted.global.defaultInfo({ msg: this.dictionary.msg_arquivo_invalido }) 
+        }
+        if(sizeInMb >= 15) {
+          this.file = []
+          return this.$toasted.global.defaultInfo({ msg: `Limite de 15 MB por arquivo` })
+        }
+
+        if(this.file.length > this.fileSettings.max) {
+          this.file = []
+          return this.$toasted.global.defaultInfo({ msg: `Limite de ${this.fileSettings.max} arquivos` })
+        }
+        this.hasAnyFile = true
+        this.fileSize = this.file.length
+        if(!this.fileSettings.multiple) {
+          this.file = this.file[0]
+          this.singleFileUpload(type, this.file.name, this.file.type)
+        }else {
+          this.multipleFileUpload()
+        }
+      }catch(e) {
+        console.error("Error file upload")
+        console.error(e)
+      }
+    },
+    returnFileType(file) {
+      if(!this.fileSettings.imagesExtensions && !this.fileSettings.docsExtensions) return ""
+
+      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
+      if(imgRegex.test(file.name)) return "img"
+
+      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
+      if(docRegex.test(file.name)) return "doc"
+
+      return ""
+    },
+    multipleFileUpload() {
+      const hasImgExt = this.fileSettings.imagesExtensions ? true : false
+      const hasDocExt = this.fileSettings.docsExtensions ? true : false
+      if(!hasImgExt && !hasDocExt) {
+        this.file = []
+        this.fileSize = 0
+        return this.$toasted.global.defaultInfo({ msg: this.dictionary.sem_extensoes_parametrizadas })
+      }
+      let waitForImageLoad = false
+      let hasAnyInvalidFile = false
+      this.file = Array.from(this.file)
+      this.file.forEach(file => {
+        const singleFileType = this.returnFileType(file)
+        if(!singleFileType) file.invalid = true
+        file.imgOrDoc = singleFileType ? singleFileType : ""
+        if(this.isFileValid(file.imgOrDoc, file.name, file.type)) {
+          if(file.imgOrDoc == "img") {
+            const fileReader = new FileReader();
+            waitForImageLoad = true
+            fileReader.onload = () => file.src = fileReader.result
+            fileReader.onloadend = () => this.emitFileVars(true)
+            fileReader.readAsDataURL(file)
+          }
+          if(file.imgOrDoc === "doc") this.isDoc = true
+          file.invalid = false
+          this.fileFormatError = !hasAnyInvalidFile ? false : true
+        }else{
+          hasAnyInvalidFile = true
+          file.invalid = true
+          this.fileFormatError = true
+          if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")}`
+          if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
+          if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions.split("|").join(", ")} - Documentos: ${this.fileSettings.docsExtensions.split("|").join(", ")}`
+        }
+      })
+
+      if(this.fileFormatError) {
+        this.file = []
+        this.fileSize = 0
+      }
+
+      if(this.isDoc && !waitForImageLoad) this.emitFileVars()
+    },
+    singleFileUpload(type, fileName, fileType) {
+      if(this.isFileValid(type, fileName, fileType)) {
+        const fileReader = new FileReader()
+        if(type === "img") {
+          fileReader.onload = () => this.imagePreview = fileReader.result 
+          fileReader.onloadend = () => this.emitFileVars()
+          fileReader.readAsDataURL(this.file)
+        }
+        if(type === "doc") this.isDoc = true
+        
+        this.fileFormatError = false
+      }else {
+        this.fileFormatError = true
+        const hasImgExt = this.fileSettings.imagesExtensions ? true : false
+        const hasDocExt = this.fileSettings.docsExtensions ? true : false
+        if(hasImgExt && !hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions}`
+        if(hasDocExt && hasImgExt) this.validFileFormats = `Documentos: ${this.fileSettings.docsExtensions}`
+        if(hasImgExt && hasDocExt) this.validFileFormats = `Imagens: ${this.fileSettings.imagesExtensions} - Documentos: ${this.fileSettings.docsExtensions}`
+      }
+
+      if(this.isDoc) this.emitFileVars()
+    },
+    toggleFilePreview() {
+      if(this.fileSettings.handleFileClick) return this.$emit("handle-file-click")
+      if(this.fileSettings.handleFilePreview) {
+        this.emitFileVars()
+        return this.$emit("handle-file-preview")
+      }
+      this.showFilePreview = !this.showFilePreview
+      if(this.showFilePreview && this.openFiles) this.toggleFiles()
+    },
+    emitFileVars() {
+      const vars = { file: this.file, isDoc: this.isDoc, imagePreview: this.imagePreview, fileFormatError: this.fileFormatError, hasAnyFile: this.hasAnyFile }
+
+      this.$emit("set-file-vars", vars)
+      this.$parent.focusTextarea()
+    },
+    deleteSpecificFile(obj) {
+      const { fileName } = obj
+      this.file = this.file.filter(file => {
+        return file.name != fileName
+      })
+      this.fileSize = this.file.length;
+      this.file.length ? this.emitFileVars(true) : this.deleteFile()
+    },
+    deleteFile() {
+      this.fileSize = this.file.length;
+      this.$emit("set-file-vars", { file: [], isDoc: false, imagePreview: "", fileFormatError: false, hasAnyFile: false })
+
+      this.file = []
+      this.isDoc = false
+      this.showFilePreview = false
+      this.hasAnyFile = false
+      this.imagePreview = ""
+      this.fileFormatError = false
+      this.validFileFormats = ""
+    },
+    openImage(imagePreview) {
+      this.$emit("open-image", !imagePreview ? this.imagePreview : imagePreview)
+    }
+  }
+}
+</script>