vue-intergrall-plugins 1.1.89 → 1.2.0

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

@@ -1,486 +1,486 @@
-<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> -->
-    <span :title="dictionary.title_selecionar_anexo"
-      style="display: flex; align-items: center; justify-content-center; cursor: pointer;">
-      <fa-icon :icon="['fas', 'paperclip']" />
-    </span>
-    <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="old-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]"
-        v-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;
-}
-
-.d-none {
-  display: none
-}
-
-.files-counter {
-  position: absolute;
-  top: unset;
-  transform: translate(17.5px, -15px);
-  background-color: #888;
-  z-index: 1;
-  font-size: 8px;
-  width: 15px;
-  height: 15px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  opacity: 0.9;
-  transition: all 300ms;
-  color: #fff;
-  font-weight: 900;
-}
-
-.files-counter:hover {
-  opacity: 1;
-}
-
-.files-counter-2 {
-  transform: translate(-15px, 28px);
-  opacity: 0.9;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #888;
-  font-size: 12.8px;
-}
-
-.files-counter-2 svg {
-  margin-left: 5px;
-}
-
-.files-counter-2:hover {
-  opacity: 1;
-  text-decoration: underline;
-}
-</style>
-
-<script>
-import Clickaway from '@/directives/clickaway';
-import MultipleFilePreview from "./MultipleFilePreview";
-import SingleFilePreview from "./SingleFilePreview";
-
-export default {
-  components: { SingleFilePreview, MultipleFilePreview },
-  directives: {
-    clickaway: 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 && sizeInBytes == 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> -->
+    <span :title="dictionary.title_selecionar_anexo"
+      style="display: flex; align-items: center; justify-content-center; cursor: pointer;">
+      <fa-icon :icon="['fas', 'paperclip']" />
+    </span>
+    <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="old-footer-preview-container" @click.stop v-show="showFilePreview" :class="[previewContainerClass]"
+        v-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;
+}
+
+.d-none {
+  display: none
+}
+
+.files-counter {
+  position: absolute;
+  top: unset;
+  transform: translate(17.5px, -15px);
+  background-color: #888;
+  z-index: 1;
+  font-size: 8px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: all 300ms;
+  color: #fff;
+  font-weight: 900;
+}
+
+.files-counter:hover {
+  opacity: 1;
+}
+
+.files-counter-2 {
+  transform: translate(-15px, 28px);
+  opacity: 0.9;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #888;
+  font-size: 12.8px;
+}
+
+.files-counter-2 svg {
+  margin-left: 5px;
+}
+
+.files-counter-2:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+</style>
+
+<script>
+import Clickaway from '@/directives/clickaway';
+import MultipleFilePreview from "./MultipleFilePreview";
+import SingleFilePreview from "./SingleFilePreview";
+
+export default {
+  components: { SingleFilePreview, MultipleFilePreview },
+  directives: {
+    clickaway: 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 && sizeInBytes == 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>