diff --git a/web/satellite/vuetify-poc/src/components/icons/IconFile.vue b/web/satellite/vuetify-poc/src/components/icons/IconFile.vue new file mode 100644 index 000000000..c1c309ea8 --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/icons/IconFile.vue @@ -0,0 +1,17 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + diff --git a/web/satellite/vuetify-poc/src/views/Bucket.vue b/web/satellite/vuetify-poc/src/views/Bucket.vue index 132b42c04..40df4e829 100644 --- a/web/satellite/vuetify-poc/src/views/Bucket.vue +++ b/web/satellite/vuetify-poc/src/views/Bucket.vue @@ -13,17 +13,60 @@ - - - - Upload - + + + + + + + Upload File + + + + + + + + Upload Folder + + + + + + + import { computed, onMounted, ref, watch } from 'vue'; import { useRoute, useRouter } from 'vue-router'; -import { VContainer, VCol, VRow, VBtn } from 'vuetify/components'; +import { + VContainer, + VCol, + VRow, + VBtn, + VMenu, + VList, + VListItem, + VListItemTitle, + VDivider, +} from 'vuetify/components'; import { useBucketsStore } from '@/store/modules/bucketsStore'; import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore'; @@ -67,6 +120,7 @@ import BrowserTableComponent from '@poc/components/BrowserTableComponent.vue'; import BrowserNewFolderDialog from '@poc/components/dialogs/BrowserNewFolderDialog.vue'; import IconUpload from '@poc/components/icons/IconUpload.vue'; import IconFolder from '@poc/components/icons/IconFolder.vue'; +import IconFile from '@poc/components/icons/IconFile.vue'; import EnterBucketPassphraseDialog from '@poc/components/dialogs/EnterBucketPassphraseDialog.vue'; import DropzoneDialog from '@poc/components/dialogs/DropzoneDialog.vue'; @@ -79,6 +133,9 @@ const router = useRouter(); const route = useRoute(); const notify = useNotify(); +const folderInput = ref(); +const fileInput = ref(); +const menu = ref(false); const isLoading = ref(true); const isDragging = ref(false); const isContentDisabled = ref(true); @@ -105,6 +162,26 @@ const projectId = computed(() => projectsStore.state.selectedProject.id) */ const isPromptForPassphrase = computed(() => bucketsStore.state.promptForPassphrase); +/** + * Open the operating system's file system for file upload. + */ +async function buttonFileUpload(): Promise { + menu.value = false; + const fileInputElement = fileInput.value as HTMLInputElement; + fileInputElement.showPicker(); + analyticsStore.eventTriggered(AnalyticsEvent.UPLOAD_FILE_CLICKED); +} + +/** + * Open the operating system's file system for folder upload. + */ +async function buttonFolderUpload(): Promise { + menu.value = false; + const folderInputElement = folderInput.value as HTMLInputElement; + folderInputElement.showPicker(); + analyticsStore.eventTriggered(AnalyticsEvent.UPLOAD_FOLDER_CLICKED); +} + /** * Initializes object browser store. */