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
+
+
+
+
+
+
+
+
+ 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.
*/