CopyObjectModal.vue

<script setup lang="ts">
import BootstrapModal from "@/components/modals/BootstrapModal.vue";
import { Modal, Toast } from "bootstrap";
import { onMounted, reactive, watch } from "vue";
import type { _Object as S3Object } from "@aws-sdk/client-s3";
import { useBucketStore } from "@/stores/buckets";
import { useS3ObjectStore } from "@/stores/s3objects";
import BootstrapToast from "@/components/BootstrapToast.vue";
import type { AbortController } from "@smithy/types";

const objectRepository = useS3ObjectStore();

const props = defineProps<{
  modalId: string;
  srcObject: S3Object;
  srcBucket: string;
}>();

const formState = reactive<{
  destKey: string;
  destBucket: string;
  uploading: boolean;
  err: string;
  abortController?: AbortController;
}>({
  destKey: "",
  destBucket: "",
  uploading: false,
  err: "",
  abortController: undefined,
});
const bucketRepository = useBucketStore();

const randomIDSuffix = Math.random().toString(16).substring(2, 8);
let copyModal: Modal | null = null;
let successToast: Toast | null = null;
let errorToast: Toast | null = null;

function getFileName(key?: string): string {
  if (key == undefined) {
    return "";
  }
  const splittedKey = key.split("/");
  return splittedKey[splittedKey.length - 1];
}

function copyObject() {
  if (props.srcObject.Key == undefined) {
    return;
  }
  formState.abortController = new AbortController();
  formState.uploading = true;
  objectRepository
    .copyObject(
      props.srcBucket,
      props.srcObject,
      formState.destBucket,
      formState.destKey,
      formState.abortController,
    )
    .then(() => {
      copyModal?.hide();
      successToast?.show();
      formState.destBucket = "";
    })
    .catch((e) => {
      formState.err = e.Code;
      errorToast?.show();
    })
    .finally(() => {
      formState.uploading = false;
      formState.abortController = undefined;
    });
}

function modalClosed() {
  formState.destBucket = "";
}

watch(
  () => props.srcObject.Key,
  (newKey) => {
    formState.destKey = newKey ?? "";
  },
);

onMounted(() => {
  copyModal = new Modal("#" + props.modalId);
  successToast = new Toast("#successToast-" + randomIDSuffix);
  errorToast = new Toast("#errorToast-" + randomIDSuffix);
});
</script>

<template>
  <bootstrap-toast :toast-id="'successToast-' + randomIDSuffix">
    Successfully copied file
  </bootstrap-toast>
  <bootstrap-toast
    :toast-id="'errorToast-' + randomIDSuffix"
    color-class="danger"
  >
    There has been some Error.<br />
    Code: {{ formState.err }}
  </bootstrap-toast>
  <bootstrap-modal
    :modalId="modalId"
    :static-backdrop="true"
    modal-label="Copy Object Modal"
    v-on="{ 'hidden.bs.modal': modalClosed }"
    :track-modal-value="srcBucket + '/' + srcObject.Key"
  >
    <template v-slot:header>
      <h4>Copy file {{ getFileName(props.srcObject.Key) }}</h4>
    </template>
    <template v-slot:body>
      <div class="container-fluid">
        <div class="row">
          <form
            class="col-7"
            :id="'copyObjectForm' + randomIDSuffix"
            @submit.prevent="copyObject"
          >
            <div class="mb-3">
              <label
                :for="'destinationBucket' + randomIDSuffix"
                class="form-label"
              >
                Destination Bucket *
              </label>
              <select
                class="form-select text-lowercase"
                :id="'destinationBucket' + randomIDSuffix"
                required
                v-model="formState.destBucket"
              >
                <option disabled selected>Select one...</option>
                <option
                  v-for="bucket in bucketRepository.writableBuckets"
                  :key="bucket.name"
                  :value="bucket.name"
                >
                  {{ bucket.name }}
                </option>
              </select>
            </div>
            <div class="mb-3">
              <label :for="'objectKey' + randomIDSuffix" class="form-label"
                >Destination Filename *</label
              >
              <input
                type="text"
                class="form-control"
                :id="'objectKey' + randomIDSuffix"
                required
                v-model="formState.destKey"
              />
            </div>
          </form>
          <div class="col-5">
            You can copy objects. You have to create destination buckets prior
            to copy.<br />
            You can specify folder by using '/' at destination object field. For
            example, if you want to copy object under the folder named
            'folder1', you need to specify destination object like
            'folder1/[your object name]'.
          </div>
        </div>
      </div>
    </template>
    <template v-slot:footer>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
        Close
      </button>
      <button
        v-if="formState.uploading"
        class="btn btn-danger"
        @click="formState.abortController?.abort()"
      >
        Cancel
      </button>
      <button
        v-else
        type="submit"
        :form="'copyObjectForm' + randomIDSuffix"
        class="btn btn-primary"
      >
        Copy
      </button>
    </template>
  </bootstrap-modal>
</template>

<style scoped></style>