diff --git a/web/satellite/src/components/browser/Dropzone.vue b/web/satellite/src/components/browser/Dropzone.vue
new file mode 100644
index 000000000..537ba1f45
--- /dev/null
+++ b/web/satellite/src/components/browser/Dropzone.vue
@@ -0,0 +1,62 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+ Drop your files to put it into the “{{ bucket }}” bucket.
+
+
+
Drag and drop files here to upload
+
+
+
+
+
+
diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index 9eee4d05f..0f4aa9e8b 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -9,8 +9,10 @@
v-cloak
class="div-responsive"
@drop.prevent="upload"
- @dragover.prevent
+ @dragover.prevent="showDropzone"
>
+
+
@@ -219,6 +221,7 @@ import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
import VTable from '@/components/common/VTable.vue';
import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
import UpEntry from '@/components/browser/UpEntry.vue';
+import Dropzone from '@/components/browser/Dropzone.vue';
import FileIcon from '@/../static/images/objects/file.svg';
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
@@ -239,6 +242,7 @@ const fileInput = ref();
const fetchingFilesSpinner = ref(false);
const isUploadDropDownShown = ref(false);
const isBannerShown = ref(true);
+const isOver = ref(false);
/**
* Retrieve the pathMatch from the current route.
*/
@@ -442,8 +446,12 @@ function filename(file: BrowserObject): string {
* Upload the current selected or dragged-and-dropped file.
*/
async function upload(e: Event): Promise {
+ if (isOver.value) {
+ isOver.value = false;
+ }
+
await obStore.upload({ e });
- await analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
+ analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
const target = e.target as HTMLInputElement;
target.value = '';
}
@@ -494,6 +502,20 @@ function toggleUploadDropdown(): void {
isUploadDropDownShown.value = !isUploadDropDownShown.value;
}
+/**
+ * Makes dropzone visible.
+ */
+function showDropzone(): void {
+ isOver.value = true;
+}
+
+/**
+ * Hides dropzone.
+ */
+function hideDropzone(): void {
+ isOver.value = false;
+}
+
/**
* Closes upload options dropdown.
*/