JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: vuetify upload file and folder

Browse Source 
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
This commit is contained in:
Cameron 2023-09-05 16:49:50 -04:00 committed by Storj Robot
parent 4e499fb9bf
commit c52554a2b9
2 changed files with 105 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/satellite/vuetify-poc/src/components/icons/IconFile.vue Normal file
View File

@ -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>

99
web/satellite/vuetify-poc/src/views/Bucket.vue
View File

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