From c52554a2b9e4d9b328db901512b4c6781419518c Mon Sep 17 00:00:00 2001
From: Cameron <cameron@storj.io>
Date: Tue, 5 Sep 2023 16:49:50 -0400
Subject: [PATCH] web/satellite: vuetify upload file and folder

add functionality to upload files and folders in object browser

issue: https://github.com/storj/storj/issues/6101
issue: https://github.com/storj/storj/issues/6102

Change-Id: I4aa86b89adc051b91b0d7fde69dd7375b2a3f370
---
 .../src/components/icons/IconFile.vue         | 17 ++++
 .../vuetify-poc/src/views/Bucket.vue          | 99 ++++++++++++++++---
 2 files changed, 105 insertions(+), 11 deletions(-)
 create mode 100644 web/satellite/vuetify-poc/src/components/icons/IconFile.vue

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.
+
+<template>
+    <!-- File Icon -->
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="mr-2" xmlns="http://www.w3.org/2000/svg">
+        <path :fill="color" d="M8.75652 0.799805C9.13527 0.799805 9.49851 0.950259 9.76632 1.21807L13.5258 4.97747C13.7937 5.24529 13.9441 5.60854 13.9441 5.9873V12.9387C13.9441 14.1875 12.9318 15.1998 11.683 15.1998H4.66153C3.41274 15.1998 2.40039 14.1875 2.40039 12.9387V3.06104C2.40039 1.81225 3.41274 0.799805 4.66153 0.799805H8.75652ZM8.17213 2.10889H4.66153C4.14568 2.10889 3.72559 2.51926 3.70993 3.03139L3.70947 3.06104V12.9387C3.70947 13.4545 4.11979 13.8746 4.63188 13.8903L4.66153 13.8907H11.683C12.1989 13.8907 12.6189 13.4804 12.6346 12.9683L12.635 12.9387V6.57167L8.82679 6.57176C8.47412 6.57176 8.18659 6.29284 8.17277 5.94355L8.17225 5.91722L8.17213 2.10889ZM11.9597 5.26259L9.48122 2.78425L9.48134 5.26268L11.9597 5.26259Z" />
+    </svg>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+    color: string;
+}>(), {
+    color: 'currentColor',
+});
+</script>
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 @@
 
         <v-col>
             <v-row class="mt-2 mb-4">
-                <v-btn
-                    color="primary"
-                    min-width="120"
-                    :disabled="isContentDisabled"
-                    @click="snackbar = true"
-                >
-                    <browser-snackbar-component :on-cancel="() => { snackbar = false }" />
-                    <IconUpload />
-                    Upload
-                </v-btn>
+                <v-menu v-model="menu" location="bottom" transition="scale-transition" offset="5">
+                    <template #activator="{ props }">
+                        <v-btn
+                            color="primary"
+                            min-width="120"
+                            :disabled="isContentDisabled"
+                            v-bind="props"
+                        >
+                            <browser-snackbar-component :on-cancel="() => { snackbar = false }" />
+                            <IconUpload />
+                            Upload
+                        </v-btn>
+                    </template>
+                    <v-list class="pa-2">
+                        <v-list-item rounded="lg" @click.stop="buttonFileUpload">
+                            <template #prepend>
+                                <IconFile />
+                            </template>
+                            <v-list-item-title class="text-body-2 ml-3">
+                                Upload File
+                            </v-list-item-title>
+                        </v-list-item>
 
+                        <v-divider class="my-2" />
+
+                        <v-list-item class="mt-1" rounded="lg" @click.stop="buttonFolderUpload">
+                            <template #prepend>
+                                <icon-folder />
+                            </template>
+                            <v-list-item-title class="text-body-2 ml-3">
+                                Upload Folder
+                            </v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+
+                <input
+                    ref="fileInput"
+                    type="file"
+                    aria-roledescription="file-upload"
+                    hidden
+                    multiple
+                    @change="upload"
+                >
+                <input
+                    ref="folderInput"
+                    type="file"
+                    aria-roledescription="folder-upload"
+                    hidden
+                    multiple
+                    webkitdirectory
+                    mozdirectory
+                    @change="upload"
+                >
                 <v-btn
                     variant="outlined"
                     color="default"
@@ -50,7 +93,17 @@
 <script setup lang="ts">
 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<HTMLInputElement>();
+const fileInput = ref<HTMLInputElement>();
+const menu = ref<boolean>(false);
 const isLoading = ref<boolean>(true);
 const isDragging = ref<boolean>(false);
 const isContentDisabled = ref<boolean>(true);
@@ -105,6 +162,26 @@ const projectId = computed<string>(() => projectsStore.state.selectedProject.id)
  */
 const isPromptForPassphrase = computed<boolean>(() => bucketsStore.state.promptForPassphrase);
 
+/**
+ * Open the operating system's file system for file upload.
+ */
+async function buttonFileUpload(): Promise<void> {
+    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<void> {
+    menu.value = false;
+    const folderInputElement = folderInput.value as HTMLInputElement;
+    folderInputElement.showPicker();
+    analyticsStore.eventTriggered(AnalyticsEvent.UPLOAD_FOLDER_CLICKED);
+}
+
 /**
  * Initializes object browser store.
  */