ShowEasyFrontEnd/FrontEnd/components/booking/Modal/UploadRemittanceSlipModal.vue

<template>
  <modal name="UploadRemittanceSlip" :clickToClose="false">
    <div class="tw-text-base-primary">
      <div v-if="choose == false">
        <div>
          <div class="modal-header tw-flex tw-w-full tw-mb-[10px]">
            <div class="t18 tw-font-bold tw-mt-[15px] tw-flex tw-w-full justify-center lg:t28 lg:tw-font-bold">
              {{ $t('Upload your file') }}
            </div>
            <button class="close tw-transition tw-btn-md" @click="$modal.hide('UploadRemittanceSlip')"></button>
          </div>
          <div class="t14 tw-flex tw-justify-center tw-text-base-tertiary tw-mb-[20px] lg:tw-body-2 lg:tw-mb-[40px]">
            {{ $t('JPG, PNG, PDF are allowed') }}
          </div>
          <div class="modal-content">
            <button
              class="tw-flex tw-flex-col tw-items-center tw-bg-neutrals-0 tw-border tw-border-dashed tw-border-neutrals-800 tw-rounded-[16px] tw-w-full"
              @click="handleUploadEvent">
              <img src="~/assets/svg/uploadImg.svg" class="tw-mb-[15px] tw-mt-[23px] mb:tw-mb-[23px] mb:tw-mb-[35px]"
                alt="" />
              <div class="t14 tw-text-base-tertiary tw-whitespace-nowrap tw-mb-[10px] tw-mx-[10px] lg:tw-body-2">
                {{ $t('Drag and drop or browse to choose a file') }}
              </div>
              <div class="tw-body-5 tw-text-base-tertiary tw-mb-[20px] lg:tw-body-3 lg:tw-mb-[40px]">
                {{ $t('"Upload up to 1 file"') }}
              </div>

              <input type="file" class="d-none" ref="uploader" @change="UploadEvent" />
            </button>
          </div>
        </div>
      </div>
      <div v-if="success == true">
        <div class="modal-header tw-flex tw-mb-[20px]">
          <div class="tw-mt-[15px] tw-flex tw-w-full tw-flex-col tw-items-center">
            <img src="~/assets/svg/White.svg" class="tw-mb-[10px] tw-h-[36px] tw-w-[36px]" />
            <div class="t18 tw-font-bold lg:t28">{{ $t('Upload Successfully') }}</div>
          </div>

          <button class="close tw-transition tw-btn-md" @click="hideUploadRemittanceSlip"></button>
        </div>
        <div class="modal-content t12 tw-text-neutrals-800">
          <div class="tw-flex tw-mb-[10px] tw-w-full tw-justify-between lg:tw-body-2">
            <div>{{ $t('1 of 1 uploaded') }}</div>
            <button @click="cancelUpload">{{ $t('Cancel') }}</button>
          </div>
          <div class="tw-flex tw-bg-neutrals-0 tw-rounded-[10px]">
            <div
              class="t12 tw-flex tw-justify-between tw-items-center tw-break-words tw-text-neutrals-800 tw-w-full lg:t16">
              <div class="tw-mr-[66px] tw-relative tw-z-[2] tw-pl-[20px] tw-py-[4px]">
                <div class="tw-max-w-[170px] tw-whitespace-normal">
                  {{ $t(this.filename) }}
                </div>
                <div>{{ $t(this.size) }} KB</div>
              </div>
              <div class="tw-z-[2] tw-mr-[10px]">
                <img src="~/assets/svg/UploadSuccessful.svg" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="upload == true">
        <div class="modal-header tw-flex tw-w-full tw-mb-[10px]">
          <div
            class="t18 tw-font-bold tw-mt-[15px] tw-mb-[20px] tw-flex tw-w-full justify-center lg:t28 lg:tw-font-bold">
            {{ $t('Uploading ...') }}
          </div>
          <button class="close tw-transition tw-btn-md" @click="$modal.hide('UploadRemittanceSlip')"></button>
        </div>
        <div class="modal-content t12 tw-text-neutrals-800">
          <div class="tw-flex tw-mb-[10px] tw-w-full tw-justify-between lg:tw-body-2">
            <div>{{ $t('1 of 1 uploaded') }}</div>
            <button>{{ $t('Cancel') }}</button>
          </div>
          <div class="t12 tw-flex tw-relative tw-justify-between tw-items-center tw-break-words tw-text-white lg:t16">
            <div class="tw-mr-[66px] tw-relative tw-z-[2] tw-pl-[20px] tw-py-[4px]">
              <div class="tw-max-w-[170px] tw-whitespace-normal">
                {{ $t(this.filename) }}
              </div>
              <div>{{ $t(this.size) }} KB</div>
            </div>
            <div class="tw-z-[2] tw-mr-[10px]">
              <img src="~/assets/svg/Cancel.svg" />
            </div>

            <progress max="100" :value.prop="uploadPercentage"
              class="tw-absolute tw-left-0 tw-top-0 tw-w-full tw-z-[1] tw-h-full"></progress>
          </div>
        </div>
      </div>
    </div>
  </modal>
</template>
<script>
export default {
  name: "UploadRemittanceSlip",
  data() {
    return {
      uploaded: null,
      choose: false,
      success: false,
      upload: false,
      uploadPercentage: 0,
      filename: "",
      size: "",
    };
  },

  methods: {
    handleUploadEvent() {
      window.addEventListener("focus", () => {}, { once: true });
      this.$refs.uploader.click();
    },

    UploadEvent(e) {
      this.choose = true;
      this.upload = true;
      this.uploaded = new FormData();
      this.uploaded.append("file", e.target.files[0]);
      console.log(e.target.files[0]);
      this.uploaded.append("bucket", "media-showeasy-com");
      this.uploaded.append("bucket_path", "users");
      this.filename = e.target.files[0].name;
      this.size = Math.ceil(e.target.files[0].size / 1000);
      console.log(this.filename);
      console.log(this.size);
      this.$axios
        .post("/s3/upload", this.uploaded, {
          onUploadProgress: function (progressEvent) {
            this.uploadPercentage = parseInt(
              Math.round((progressEvent.loaded / progressEvent.total) * 100)
            );
          }.bind(this),
        })
        .then((response) => {
          console.log(response.status);
          if (response.status == 200) {
            this.upload = false;
            this.success = true;
          }
        })
        .catch((error) => console.log(error));
    },

    hideUploadRemittanceSlip() {
      this.$modal.hide("UploadRemittanceSlip");
      this.success = false;
      this.choose = false;
      this.upload = false;
    },

    cancelUpload() {},
  },
};
</script>
<style lang="scss" scoped>
.close {
  position: absolute;
  right: 25px;
  top: 25px;
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;

  @media (min-width: 1366px) {
    position: relative;
    right: initial;
    top: initial;
  }
}

progress[value] {
  -webkit-appearance: none;
  appearance: none;
  // width: 290px;
  // height: 40px;
}

progress[value]::-webkit-progress-bar {
  background-color: #f8f8f8;
  border-radius: 16px;
}

progress[value]::-webkit-progress-value {
  background-color: #f48800;
  border-radius: 16px;
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

@-webkit-keyframes animate-stripes {
  100% {
    background-position: -100px 0px;
    -webkit-animation: animate-stripes 5s linear infinite;
    animation: animate-stripes 5s linear infinite;
  }
}

@keyframes animate-stripes {
  100% {
    background-position: -100px 0px;
    -webkit-animation: animate-stripes 5s linear infinite;
    animation: animate-stripes 5s linear infinite;
  }
}

:deep() {
  .v--modal {
    background-color: white !important;
    text-align: left;
    border-radius: 16px;
    box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
    padding: 20px;
    max-width: 100%;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
    height: auto !important;
    vertical-align: middle;

    @media screen and (min-width: 768px) {
      padding: 20px;
    }

    @media screen and (min-width: 1024px) {
      padding: 40px;
    }
  }

  .v--modal-overlay {
    position: fixed;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: max-content;
    height: auto;
    background: rgba(0, 0, 0, 0.2);
    z-index: 999;
    opacity: 1;
  }

  .v--modal-top-right {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
  }

  .v--modal-background-click {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v--modal-box {
    margin-left: 30px;
    margin-right: 30px;

    @media (min-width: 768px) {
      margin-left: 67px;
      margin-right: 67px;
    }
  }
}
</style>