search_ui/components/entity/modals/EntityFilesModal.vue

<template>
  <div class="position-relative">
    <form>
      <!-- <div>entity_id: {{ data.entity.id }}</div> -->
      <div class="form-row">
        <label for="">عنوان </label>
        <input
          style="line-height: 3.5"
          type="text"
          placeholder="عنوان گویا و مختصری را وارد کنید"
          v-model="value.title"
        />
      </div>
      <div class="form-row">
        <label for="">فایل مرتبط </label>
        <!-- <a href="javascript:void(0)" data-bs-toggle="modal" -->
        <!-- data-bs-target="#jahat-modal" @click="$emit('file-event')">افزودن</a> -->

        <div
          class="image-uploader-container"
          :class="{ 'hide-preview': hasImage }"
        >
          <image-uploader
            ref="file-uploader"
            :preview="true"
            :debug="1"
            :maxWidth="300"
            :maxHeight="300"
            :maxSize="5"
            :quality="1"
            :autoRotate="true"
            outputFormat="file"
            accept=".xlsx,.xls,.doc,.docx,.ppt,.pptx,.txt,.pdf,video/*,image/*,audio/*"
            :className="['fileinput', { 'fileinput--loaded': hasImage }]"
            :capture="false"
            @input="setImage"
          >
            <label class="upload-label" for="fileInput" slot="upload-label">
              <img
                v-if="
                  value.file?.length &&
                  (getFileExtension(value.file) == 'png' ||
                    getFileExtension(value.file) == 'jpg' ||
                    getFileExtension(value.file) == 'jpeg')
                "
                :src="mediaAssetsUrl + value.file"
                class="img-fluid"
                :alt="value.file"
              />

              <span
                v-else-if="value.file?.length"
                class="tavasi"
                :class="`tavasi-${getFileExtension(value.file)}-file`"
              ></span>

              <!-- replace image src with incoming src -->

              <span v-else class="tavasi tavasi-cloud-upload"></span>
            </label>
          </image-uploader>
        </div>
      </div>

      <div class="popUp-tab__buttons">
        <div class="d-flex justify-content-between flex-grow-1">
          <button
            type="button"
            class="btn delete-btn btn-outline-danger"
            @click.prevent="deleteProperty()"
          >
            حذف
          </button>

          <div class="d-flex">
            <button
              type="button"
              class="popUp-tab__clear btn"
              @click.prevent="closeModal"
            >
              لغو
            </button>
            <button
              type="button"
              class="popUp-tab__submit btn"
              @click.prevent="saveProperty()"
            >
              ثبت
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import { propertyMixin } from "~/entity/mixins/propertyMixin";
// import ImageUploader from "vue-image-upload-resize";
import { mapState } from "pinia";

export default {
  mixins: [propertyMixin],

  props: {
    data: { type: Object, default: () => ({}) },
  },
  mounted() {
    const res = this.getPropertyValue(
      this.data.entity,
      this.data.keyName,
      this.data.index
    );

    if (res) this.value = res;
  },
  data() {
    return {
      value: {
        title: null,
        file: null,
        file_name: null,
      },
      hasImage: false,
      imageUrl: undefined,
    };
  },

  computed: {
    ...mapState("common", ["mediaAssetsUrl"]),

    loadPropertyImage() {
      return "";
    },
    // propertyObj(){
    //   return this.value;
    // }
  },

  methods: {
    getFileExtension(filename) {
      const validtypes = [
        "xlsx",
        "xls",
        "doc",
        "docx",
        "ppt",
        "pptx",
        "txt",
        "pdf",
        "jpg",
        "png",
        "jpeg",
      ];
      const fileExtension = filename?.split(".").pop();
      return validtypes.includes(fileExtension) ? fileExtension : "other";
    },

    setImage: function (file) {
      this.hasImage = true;
      this.imageUrl = file;
      this.value.file_name = file.name;
      this.saveFile(file);
    },
  },
};
</script>
<style lang="scss">
.picture-input input[type="file"],
#fileInput {
  display: none !important;
}

.image-uploader-container {
  position: relative;
  // border: 2px dashed #eee;
  padding: 0.2em;

  &.hide-preview {
    .upload-label {
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
      width: auto !important;
      overflow: hidden;
      .tavasi,
      img {
        visibility: hidden;
      }
    }
  }

  .upload-label {
    .tavasi {
      font-size: 4rem;
    }

    &:hover {
      cursor: pointer;
    }
  }

  .img-preview {
    width: 300px;
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
  }
}
</style>