Add direct S3 interaction

Closes #15 (closed)

src/components/Modals/UploadObjectModal.vue

@@ -2,7 +2,7 @@
 import type { S3Client } from "@aws-sdk/client-s3";
 import { Upload } from "@aws-sdk/lib-storage";
 import BootstrapModal from "@/components/Modals/BootstrapModal.vue";
-import { computed, onMounted, reactive } from "vue";
+import { computed, onMounted, reactive, watch } from "vue";
 import type { ComputedRef } from "vue";
 import type { S3ObjectMetaInformation } from "@/client";
 import dayjs from "dayjs";
@@ -15,6 +15,7 @@ const props = defineProps<{
   bucketName: string;
   keyPrefix: string;
   s3Client: S3Client;
+  editObjectFileName: string | undefined;
 }>();
 
 const randomIDSuffix = Math.random().toString(16).substr(2, 8);
@@ -30,6 +31,13 @@ const emit = defineEmits<{
   (e: "object-created", object: S3ObjectMetaInformation): void;
 }>();
 
+watch(
+  () => props.editObjectFileName,
+  (nextFileName) => {
+    formState.key = nextFileName ?? "";
+  }
+);
+
 const formState = reactive({
   file: {},
   key: "",
@@ -48,6 +56,10 @@ const uploadProgress: ComputedRef<number> = computed(() =>
   Math.round((100 * formState.uploadDone) / formState.uploadTotal)
 );
 
+const editObject: ComputedRef<boolean> = computed(
+  () => props.editObjectFileName !== undefined
+);
+
 async function uploadObject() {
   const key =
     props.keyPrefix.length > 0
@@ -99,7 +111,9 @@ async function uploadObject() {
 // eslint-disable-next-line
 function fileChange(event: any) {
   formState.file = event.target.files[0];
-  formState.key = formState.file.name;
+  if (!editObject.value) {
+    formState.key = formState.file.name;
+  }
 }
 
 onMounted(() => {
@@ -197,9 +211,13 @@ onMounted(() => {
               >
               <input
                 type="text"
-                class="form-control"
+                :class="{
+                  'form-control-plaintext': editObject,
+                  'form-control': !editObject,
+                }"
                 :id="'objectKey' + randomIDSuffix"
                 required
+                :disabled="editObject"
                 v-model="formState.key"
               />
             </div>