-
Daniel Göbel authoredDaniel Göbel authored
BucketView.vue 28.45 KiB
<script setup lang="ts">
import { onMounted, reactive, watch, computed } from "vue";
import type {
S3ObjectMetaInformation,
BucketPermissionOut,
} from "@/client/s3proxy";
import type {
FolderTree,
S3PseudoFolder,
S3ObjectWithFolder,
} from "@/types/PseudoFolder";
import { ObjectService } from "@/client/s3proxy";
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import { filesize } from "filesize";
import dayjs from "dayjs";
import { Toast, Tooltip } from "bootstrap";
import PermissionListModal from "@/components/object-storage/modals/PermissionListModal.vue";
import UploadObjectModal from "@/components/object-storage/modals/UploadObjectModal.vue";
import CopyObjectModal from "@/components/object-storage/modals/CopyObjectModal.vue";
import PermissionModal from "@/components/object-storage/modals/PermissionModal.vue";
import ObjectDetailModal from "@/components/object-storage/modals/ObjectDetailModal.vue";
import CreateFolderModal from "@/components/object-storage/modals/CreateFolderModal.vue";
import DeleteModal from "@/components/modals/DeleteModal.vue";
import {
S3Client,
DeleteObjectCommand,
DeleteObjectsCommand,
GetObjectCommand,
} from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { awsAuthMiddlewareOptions } from "@aws-sdk/middleware-signing";
import { useAuthStore } from "@/stores/auth";
import { useBucketStore } from "@/stores/buckets";
import { environment } from "@/environment";
const authStore = useAuthStore();
const bucketRepository = useBucketStore();
const middleware = [
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
(next) => async (args) => {
args.request.headers["host"] = environment.S3_URL.split("://")[1];
return await next(args);
},
{
relation: "before",
toMiddleware: awsAuthMiddlewareOptions?.name ?? "impossible",
},
];
let client = new S3Client({
region: "us-east-1",
endpoint: environment.S3_URL,
forcePathStyle: true,
credentials: {
accessKeyId: authStore.s3key?.access_key ?? "",
secretAccessKey: authStore.s3key?.secret_key ?? "",
},
});
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
client.middlewareStack.addRelativeTo(middleware[0], middleware[1]);
// If S3 Key changes
authStore.$onAction(({ name, args }) => {
if (name === "setS3Key") {
if (args[0] === null) {
console.error("There are no S3 Keys");
} else {
client = new S3Client({
region: "us-east-1",
endpoint: environment.S3_URL,
forcePathStyle: true,
credentials: {
accessKeyId: args[0].access_key,
secretAccessKey: args[0].secret_key,
},
});
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
client.middlewareStack.addRelativeTo(middleware[0], middleware[1]);
}
}
});
// Constants
// -----------------------------------------------------------------------------
const props = defineProps<{
bucketName: string;
subFolders: string[] | string;
permission?: BucketPermissionOut;
}>();
const randomIDSuffix = Math.random().toString(16).substr(2, 8);
let successToast: Toast | null = null;
// Reactive State
// -----------------------------------------------------------------------------
const deleteObjectsState = reactive<{
deletedItem: string;
potentialObjectToDelete: string;
deleteFolder: boolean;
}>({
deletedItem: "",
potentialObjectToDelete: "",
deleteFolder: true,
});
const objectState = reactive<{
objects: S3ObjectMetaInformation[];
loading: boolean;
filterString: string;
bucketNotFoundError: boolean;
bucketPermissionError: boolean;
createdPermission: undefined | BucketPermissionOut;
editObjectKey: string;
copyObject: S3ObjectMetaInformation;
viewDetailObject: S3ObjectMetaInformation;
}>({
objects: [],
loading: true,
filterString: "",
bucketNotFoundError: false,
bucketPermissionError: false,
createdPermission: undefined,
editObjectKey: "",
copyObject: {
key: "",
size: 0,
bucket: "",
last_modified: "2022-01-01",
content_type: "text/plain",
},
viewDetailObject: {
key: "",
size: 0,
bucket: "",
last_modified: "2022-01-01",
content_type: "text/plain",
},
});
// Watcher
// -----------------------------------------------------------------------------
watch(
() => props.bucketName,
(newBucketName, oldBucketName) => {
if (oldBucketName !== newBucketName) {
// If bucket is changed, update the objects
updateObjects(newBucketName);
objectState.filterString = "";
}
}
);
// Computed Properties
// -----------------------------------------------------------------------------
const filteredObjects = computed<(S3ObjectWithFolder | S3PseudoFolder)[]>(
() => {
return objectState.filterString.length > 0
? visibleObjects.value.filter((obj) =>
obj.key.includes(objectState.filterString)
)
: visibleObjects.value;
}
);
const folderStructure = computed<FolderTree>(() => {
/**
* Store the entire folder structure in a bucket in a tree-like data structure
*/
return objectsWithFolders.value.reduce(
// Add one object after another to the folder structure
(fTree, currentObject) => {
// If the object is not in a sub folder, but it in the top level 'folder'
if (currentObject.folder.length === 0) {
fTree.files.push(currentObject);
} else {
// If the object is in a sub folder
let currentFolder: FolderTree = fTree;
// For every sub folder the object is in , navigate into the sub folder
for (const folderName of currentObject.folder) {
// If the sub folder doesn't exist yet, create it
if (
Object.keys(currentFolder.subFolders).find(
(subFolderName) => subFolderName === folderName
) == undefined
) {
currentFolder.subFolders[folderName] = {
subFolders: {},
files: [],
};
}
// navigate into the sub folder
currentFolder = currentFolder.subFolders[folderName] as FolderTree;
}
// Add object to the folder
currentFolder.files.push(currentObject);
}
return fTree;
},
// Empty folder structure as initial value
{
subFolders: {},
files: [],
} as FolderTree
);
});
const objectsWithFolders = computed<S3ObjectWithFolder[]>(() => {
/**
* Add to the meta information from objects the pseudo filename and their pseudo folder
* This can be inferred from the key of the object where the '/' character is the delimiter, e.g.
* dir1/dir2/text.txt ->
* folder: dir1, dir2
* filename: text.txt
*/
return objectState.objects.map((obj) => {
const splittedKey = obj.key.split("/");
return {
...obj,
pseudoFileName: splittedKey[splittedKey.length - 1],
folder: splittedKey.slice(0, splittedKey.length - 1),
};
});
});
const currentSubFolders = computed<string[]>(() => {
/**
* Transform a single sub folder from a string to an array containing the string and
* replace an empty string with an empty list
*/
return props.subFolders instanceof Array
? props.subFolders
: props.subFolders.length > 0
? [props.subFolders]
: [];
});
const visibleObjects = computed<(S3ObjectWithFolder | S3PseudoFolder)[]>(() => {
/**
* Compute the visible objects based on the current sub folder
*/
let currentFolder = folderStructure.value;
// Navigate into right sub folder
for (const subFolder of currentSubFolders.value) {
if (currentFolder.subFolders[subFolder] == null) {
// If sub folder doesn't exist, no object is visible
return [];
} else {
currentFolder = currentFolder.subFolders[subFolder];
}
}
// Add all objects and sub folders from the current sub folder as visible object
const arr = [];
arr.push(...currentFolder.files);
arr.push(
...Object.keys(currentFolder.subFolders).map((subFolderName) => {
const folderSize = calculateFolderSize(
currentFolder.subFolders[subFolderName]
);
const folderLastModified = dayjs(
calculateFolderLastModified(currentFolder.subFolders[subFolderName])
).toISOString();
return {
name: subFolderName,
size: folderSize,
key: subFolderName,
parentFolder: currentSubFolders.value,
last_modified: folderLastModified,
} as S3PseudoFolder;
})
);
return arr.filter((obj) => !obj.key.endsWith(".s3keep"));
});
const subFolderInUrl = computed<boolean>(
() => currentSubFolders.value.length > 0
);
const errorLoadingObjects = computed<boolean>(
() => objectState.bucketPermissionError || objectState.bucketNotFoundError
);
const writableBucket = computed<boolean>(() =>
bucketRepository.writableBucket(props.bucketName)
);
const readableBucket = computed<boolean>(() =>
bucketRepository.readableBucket(props.bucketName)
);
// Lifecycle Hooks
// -----------------------------------------------------------------------------
onMounted(() => {
updateObjects(props.bucketName);
document
.querySelectorAll(".tooltip-container")
.forEach(
(tooltipTriggerEl) => new Tooltip(tooltipTriggerEl, { trigger: "hover" })
);
successToast = new Toast("#successToast-" + randomIDSuffix);
});
// Functions
// -----------------------------------------------------------------------------
/**
* Calculate recursively the cumulative file size of all o objects in a folder
* @param folder Folder to inspect
* @returns The size of this folder in bytes
*/
function calculateFolderSize(folder: FolderTree): number {
let folderSize = 0;
folderSize += folder.files.reduce((acc, file) => acc + file.size, 0);
for (const subFolderName of Object.keys(folder.subFolders)) {
folderSize += calculateFolderSize(folder.subFolders[subFolderName]);
}
return folderSize;
}
/**
* Calculate recursively when an object in a folder were modified the last time
* @param folder Folder to inspect
* @returns The last modified timestamp as ISO string
*/
function calculateFolderLastModified(folder: FolderTree): string {
let lastModified: dayjs.Dayjs;
lastModified = folder.files
.map((f) => dayjs(f.last_modified))
.reduce(
(acc, fileAccessed) => (fileAccessed.isAfter(acc) ? fileAccessed : acc),
dayjs("2000-01-01")
);
for (const subFolderName of Object.keys(folder.subFolders)) {
const lastModifiedSubFolder = dayjs(
calculateFolderLastModified(folder.subFolders[subFolderName])
);
if (lastModifiedSubFolder.isAfter(lastModified)) {
lastModified = lastModifiedSubFolder;
}
}
return lastModified.toISOString();
}
/**
* Load the meta information about objects from a bucket
* @param bucketName Name of a bucket
*/
function updateObjects(bucketName: string) {
objectState.bucketNotFoundError = false;
objectState.bucketPermissionError = false;
objectState.loading = true;
ObjectService.objectGetBucketObjects(bucketName)
.then((objs) => {
objectState.objects = objs;
})
.catch((error) => {
if (error.status === 404) {
objectState.bucketNotFoundError = true;
} else if (error.status == 403) {
objectState.bucketPermissionError = true;
}
})
.finally(() => {
objectState.loading = false;
});
}
function isS3Object(
obj: S3PseudoFolder | S3ObjectWithFolder
): obj is S3ObjectWithFolder {
return (obj as S3ObjectWithFolder).folder !== undefined;
}
/**
* callback function when an object has been uploaded
* @param newObject Uploaded object
*/
function objectUploaded(newObject: S3ObjectMetaInformation) {
bucketRepository.fetchBucket(newObject.bucket);
const index = objectState.objects.findIndex(
(obj) => obj.key === newObject.key
);
if (index > -1) {
objectState.objects[index] = newObject;
} else {
objectState.objects.push(newObject);
}
}
/**
* callback function when an object has been copied
* @param copiedObject Uploaded object
*/
function objectCopied(copiedObject: S3ObjectMetaInformation) {
bucketRepository.fetchBucket(copiedObject.bucket);
if (copiedObject.bucket === props.bucketName) {
objectState.objects.push(copiedObject);
}
}
function deleteObject(key: string) {
deleteObjectsState.potentialObjectToDelete = key;
deleteObjectsState.deleteFolder = false;
}
/**
* Delete an Object in the current folder
* @param key Key of the Object
*/
function confirmedDeleteObject(key: string) {
const command = new DeleteObjectCommand({
Bucket: props.bucketName,
Key: key,
});
client
.send(command)
.then(() => {
bucketRepository.fetchBucket(props.bucketName);
const splittedKey = key.split("/");
deleteObjectsState.deletedItem = splittedKey[splittedKey.length - 1];
successToast?.show();
objectState.objects = objectState.objects.filter(
(obj) => obj.key !== key
);
})
.catch((err) => {
console.error(err);
});
}
/**
* Initiate the download of the provided object
* @param key Key of the object
* @param bucket Bucket of the object
*/
async function downloadObject(key: string, bucket: string) {
const command = new GetObjectCommand({
Bucket: bucket,
Key: key,
});
const url = await getSignedUrl(client, command, { expiresIn: 30 });
//creating an invisible element
const element = document.createElement("a");
element.setAttribute("href", url);
element.setAttribute("target", "_blank");
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function deleteFolder(folderPath: string) {
deleteObjectsState.potentialObjectToDelete = folderPath;
deleteObjectsState.deleteFolder = true;
}
/**
* Delete a folder in the current Bucket
* @param folderPath Path to the folder with a trailing "/", e.g. some/path/to/a/folder/
*/
function confirmedDeleteFolder(folderPath: string) {
const command = new DeleteObjectsCommand({
Bucket: props.bucketName,
Delete: {
Objects: objectState.objects
.filter((obj) => obj.key.startsWith(folderPath))
.map((obj) => {
return { Key: obj.key };
}),
},
});
client
.send(command)
.then(() => {
bucketRepository.fetchBucket(props.bucketName);
const splittedPath = folderPath.split("/");
deleteObjectsState.deletedItem = splittedPath[splittedPath.length - 2];
successToast?.show();
objectState.objects = objectState.objects.filter(
(obj) => !obj.key.startsWith(folderPath)
);
})
.catch((err) => {
console.error(err);
});
}
function getObjectFileName(key: string): string {
const splittedKey = key.split("/");
return splittedKey[splittedKey.length - 1];
}
watch(
visibleObjects,
(visObjs) => {
if (visObjs.length > 0) {
// Initialise tooltips after DOM changes
setTimeout(() => {
document
.querySelectorAll("span.date-tooltip")
.forEach((tooltipTriggerEl) => new Tooltip(tooltipTriggerEl));
}, 500);
}
},
{ flush: "post" }
);
</script>
<template>
<div class="toast-container position-fixed top-toast end-0 p-3">
<div
role="alert"
aria-live="assertive"
aria-atomic="true"
class="toast text-bg-success align-items-center border-0"
data-bs-autohide="true"
:id="'successToast-' + randomIDSuffix"
>
<div class="d-flex">
<div class="toast-body">
Successfully deleted {{ deleteObjectsState.deletedItem }}
</div>
<button
type="button"
class="btn-close btn-close-white me-2 m-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
</div>
</div>
<DeleteModal
modalID="delete-object-modal"
:object-name-delete="deleteObjectsState.potentialObjectToDelete"
:back-modal-id="undefined"
@confirm-delete="
deleteObjectsState.deleteFolder
? confirmedDeleteFolder(deleteObjectsState.potentialObjectToDelete)
: confirmedDeleteObject(deleteObjectsState.potentialObjectToDelete)
"
/>
<!-- Navbar Breadcrumb -->
<nav aria-label="breadcrumb" class="fs-2">
<ol class="breadcrumb">
<li class="breadcrumb-item" :class="{ active: subFolderInUrl }">
<router-link
v-if="subFolderInUrl"
:to="{
name: 'bucket',
params: { bucketName: props.bucketName, subFolders: [] },
}"
>{{ props.bucketName }}
</router-link>
<span v-else class="text-secondary">{{ props.bucketName }}</span>
</li>
<li
class="breadcrumb-item"
v-for="(folder, index) in currentSubFolders"
:key="folder"
:class="{ active: index === currentSubFolders.length }"
>
<router-link
v-if="index !== currentSubFolders.length - 1"
:to="{
name: 'bucket',
params: {
bucketName: props.bucketName,
subFolders: currentSubFolders.slice(0, index + 1),
},
}"
>{{ folder }}
</router-link>
<span v-else class="text-secondary">{{ folder }}</span>
</li>
</ol>
</nav>
<!-- Inputs on top -->
<!-- Search bucket text input -->
<div class="row">
<div class="col-8">
<div class="input-group mt-2">
<span class="input-group-text" id="objects-search-wrapping"
><font-awesome-icon icon="fa-solid fa-magnifying-glass"
/></span>
<input
type="text"
class="form-control"
placeholder="Search Objects"
aria-label="Search Objects"
aria-describedby="objects-search-wrapping"
:disabled="errorLoadingObjects"
v-model.trim="objectState.filterString"
/>
</div>
</div>
<!-- Upload object button -->
<div id="BucketViewButtons" class="col-auto">
<button
type="button"
class="btn btn-secondary me-2 tooltip-container"
:disabled="errorLoadingObjects || !writableBucket"
data-bs-toggle="modal"
data-bs-title="Upload Object"
data-bs-target="#upload-object-modal"
>
<font-awesome-icon icon="fa-solid fa-upload" fill="white" />
<span class="visually-hidden">Upload Object</span>
</button>
<upload-object-modal
:bucket-name="props.bucketName"
:s3-client="client"
modalID="upload-object-modal"
:key-prefix="currentSubFolders.join('/')"
:edit-object-file-name="undefined"
@object-created="objectUploaded"
/>
<!-- Add folder button -->
<button
type="button"
class="btn btn-secondary m-2 tooltip-container"
:disabled="errorLoadingObjects || !writableBucket"
data-bs-toggle="modal"
data-bs-title="Create Folder"
data-bs-target="#create-folder-modal"
>
<font-awesome-icon icon="fa-solid fa-plus" />
Folder
<span class="visually-hidden">Add Folder</span>
</button>
<create-folder-modal
:bucket-name="props.bucketName"
:s3-client="client"
modalID="create-folder-modal"
:key-prefix="currentSubFolders.join('/')"
@folder-created="objectUploaded"
/>
<!-- Add bucket permission button -->
<button
v-if="!authStore.foreignUser"
:hidden="!bucketRepository.permissionFeatureAllowed(props.bucketName)"
type="button"
class="btn btn-secondary m-2 tooltip-container"
:disabled="errorLoadingObjects"
data-bs-toggle="modal"
data-bs-title="Create Bucket Permission"
data-bs-target="#create-permission-modal"
>
<font-awesome-icon icon="fa-solid fa-user-plus" />
<span class="visually-hidden">Add Bucket Permission</span>
</button>
<permission-modal
v-if="!authStore.foreignUser"
modalID="create-permission-modal"
:bucket-name="props.bucketName"
:sub-folders="folderStructure"
:edit-user-permission="undefined"
:editable="false"
:readonly="false"
:deletable="false"
:back-modal-id="undefined"
@permission-created="
(newPermission) => (objectState.createdPermission = newPermission)
"
/>
<button
v-if="!authStore.foreignUser"
:hidden="!bucketRepository.permissionFeatureAllowed(props.bucketName)"
type="button"
class="btn btn-secondary m-2 tooltip-container"
:disabled="errorLoadingObjects"
data-bs-title="List Bucket Permission"
data-bs-toggle="modal"
data-bs-target="#permission-list-modal"
>
<font-awesome-icon icon="fa-solid fa-users-line" />
<span class="visually-hidden">View Bucket Permissions</span>
</button>
<permission-list-modal
v-if="
bucketRepository.getBucketPermission(props.bucketName) == null &&
!authStore.foreignUser
"
:bucket-name="props.bucketName"
:sub-folders="folderStructure"
modalID="permission-list-modal"
:add-permission="objectState.createdPermission"
/>
</div>
</div>
<!-- Body -->
<div class="pt-3">
<!-- If bucket not found -->
<div v-if="objectState.bucketNotFoundError" class="text-center fs-2 mt-5">
<font-awesome-icon
icon="fa-solid fa-magnifying-glass"
class="mb-3 fs-0"
style="color: var(--bs-secondary)"
/>
<p>
Bucket <i>{{ props.bucketName }}</i> not found
</p>
</div>
<!-- If no permission for bucket -->
<div
v-else-if="objectState.bucketPermissionError"
class="text-center fs-2 mt-5"
>
<font-awesome-icon
icon="fa-solid fa-folder-xmark"
class="mb-3 fs-0"
style="color: var(--bs-secondary)"
/>
<p>You don't have permission for this bucket</p>
</div>
<!-- Show content of bucket -->
<div v-else>
<!-- Table header -->
<table
class="table table-dark table-striped table-hover caption-top align-middle"
>
<caption>
Displaying
{{
objectState.loading ? 0 : filteredObjects.length
}}
Objects
</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Last Accessed</th>
<th scope="col">Size</th>
<th scope="col"></th>
</tr>
</thead>
<!-- Table body when loading the objects -->
<tbody v-if="objectState.loading">
<tr v-for="n in 5" :key="n" class="placeholder-glow">
<th scope="row">
<span class="placeholder w-100 bg-secondary"></span>
</th>
<td><span class="placeholder w-50 bg-secondary"></span></td>
<td><span class="placeholder w-50 bg-secondary"></span></td>
<td></td>
</tr>
</tbody>
<!-- Table body when no objects are in the bucket -->
<tbody v-else-if="filteredObjects.length === 0">
<tr>
<td colspan="4" class="text-center fst-italic fw-light">
No objects to display
</td>
</tr>
</tbody>
<!-- Table body when showing objects -->
<tbody v-else>
<tr v-for="obj in filteredObjects" :key="obj.key">
<th scope="row" class="text-truncate">
<!-- Show file name if row is an object -->
<div v-if="isS3Object(obj)">{{ obj.pseudoFileName }}</div>
<!-- Show link to subfolder if row is a folder -->
<div v-else>
<router-link
class="text-decoration-none"
:to="{
name: 'bucket',
params: {
bucketName: props.bucketName,
subFolders: obj.parentFolder.concat(obj.name),
},
}"
>{{ obj.name }}
</router-link>
</div>
</th>
<td>
<span
class="date-tooltip"
data-bs-toggle="tooltip"
:data-bs-title="
dayjs(obj.last_modified).format('DD.MM.YYYY HH:mm:ss')
"
>{{ dayjs(obj.last_modified).fromNow() }}</span
>
</td>
<td>{{ filesize(obj.size) }}</td>
<!-- Show buttons with dropdown menu if row is an object -->
<td class="text-end">
<div
v-if="isS3Object(obj)"
class="btn-group btn-group-sm dropdown-center dropdown-menu-start"
>
<!-- Download Button -->
<button
type="button"
class="btn btn-secondary"
@click="downloadObject(obj.key, props.bucketName)"
:disabled="!readableBucket"
>
Download
</button>
<button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<!-- Dropdown menu -->
<ul class="dropdown-menu dropdown-menu-dark">
<li>
<button
class="dropdown-item"
type="button"
data-bs-toggle="modal"
data-bs-target="#detail-object-modal"
@click="objectState.viewDetailObject = obj"
>
Details
</button>
</li>
<li>
<button
class="dropdown-item"
type="button"
:disabled="!writableBucket"
data-bs-toggle="modal"
data-bs-target="#edit-object-modal"
@click="objectState.editObjectKey = obj.key"
>
Edit
</button>
</li>
<li>
<button
class="dropdown-item"
type="button"
:disabled="!readableBucket"
data-bs-toggle="modal"
data-bs-target="#copy-object-modal"
@click="objectState.copyObject = obj"
>
Copy
</button>
</li>
<li>
<button
class="dropdown-item text-danger align-middle"
type="button"
@click="deleteObject(obj.key)"
data-bs-toggle="modal"
data-bs-target="#delete-object-modal"
:disabled="!writableBucket"
>
<font-awesome-icon icon="fa-solid fa-trash" />
<span class="ms-1">Delete</span>
</button>
</li>
</ul>
</div>
<!-- Show delete button when row is a folder -->
<div v-else>
<button
type="button"
class="btn btn-danger btn-sm align-baseline"
:disabled="!writableBucket"
data-bs-toggle="modal"
data-bs-target="#delete-object-modal"
@click="
deleteFolder(
obj.parentFolder.concat(['']).join('/') + obj.name + '/'
)
"
>
<font-awesome-icon icon="fa-solid fa-trash" class="me-2" />
<span>Delete</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<upload-object-modal
:bucket-name="props.bucketName"
:s3-client="client"
modalID="edit-object-modal"
:key-prefix="currentSubFolders.join('/')"
:edit-object-file-name="getObjectFileName(objectState.editObjectKey)"
@object-created="objectUploaded"
/>
<copy-object-modal
:source-object="objectState.copyObject"
:s3-client="client"
modalID="copy-object-modal"
@object-copied="objectCopied"
/>
<object-detail-modal
:s3-object="objectState.viewDetailObject"
modalID="detail-object-modal"
/>
</div>
</div>
</template>
<style scoped></style>