Finish uploader

.gitignore

@@ -36,3 +36,4 @@ packages/github-action/wrangler.toml
 packages/github-action/src
 
 packages/dashboard-v2/.env
+.dev.vars

packages/dashboard-v2/src/components/main/LeftSidebar.vue

@@ -19,6 +19,7 @@
         </template>
       </q-field>
 
+      <q-field stack-label borderless dense>
       <q-btn-dropdown color="green" label="New" icon="add" style="width: 100%">
         <q-list>
           <q-item clickable v-close-popup @click="$refs.createFolder.open()">
@@ -29,19 +30,20 @@
 
           <q-separator></q-separator>
 
-          <q-item clickable v-close-popup @click="onItemClick">
+          <q-item clickable v-close-popup @click="$bus.emit('openFilesUploader')">
             <q-item-section>
               <q-item-label><q-icon name="upload_file" size="sm"/> Upload Files</q-item-label>
             </q-item-section>
           </q-item>
 
-          <q-item clickable v-close-popup @click="onItemClick">
+          <q-item clickable v-close-popup @click="$bus.emit('openFoldersUploader')">
             <q-item-section>
               <q-item-label><q-icon name="folder" size="sm"/> Upload Folders</q-item-label>
             </q-item-section>
           </q-item>
         </q-list>
       </q-btn-dropdown>
+      </q-field>
     </div>
   </div>
 

packages/dashboard-v2/src/components/utils/DragAndDrop.vue

@@ -104,8 +104,6 @@ export default {
       this.uploadFiles(folders)
     },
     async uploadFiles (folders) {
-      const self = this
-
       let totalFiles = 0
       const filenames = []
 
@@ -133,6 +131,9 @@ export default {
       let uploadCount = 0
       for (const [folder, files] of Object.entries(folders)) {
         let targetFolder = this.selectedFolder + folder
+        if (targetFolder.slice(-1) !== '/') {
+          targetFolder += '/'
+        }
 
         for (const file of files) {
           uploadCount += 1
@@ -258,6 +259,14 @@ export default {
       this.isHover = false
     }
   },
+  mounted() {
+    this.$bus.on('openFilesUploader', this.openFilesUploader)
+    this.$bus.on('openFoldersUploader', this.openFoldersUploader)
+  },
+  beforeUnmount() {
+    this.$bus.off('openFilesUploader')
+    this.$bus.off('openFoldersUploader')
+  },
   setup () {
     return {
       mainStore: useMainStore()

packages/dashboard-v2/src/pages/files/FilesFolderPage.vue

@@ -5,7 +5,6 @@
         <q-breadcrumbs-el style="cursor: pointer" v-for="obj in breadcrumbs" :key="obj.name" :label="obj.name" @click="breadcrumbsClick(obj)" />
       </q-breadcrumbs>
 
-
       <drag-and-drop ref="uploader">
 
         <q-table
@@ -17,7 +16,10 @@
           :hide-pagination="true"
           :rows-per-page-options="[0]"
           column-sort-order="da"
-          :flat="true">
+          :flat="true"
+          @row-click="openRowMenu"
+          @row-contextmenu="openRowMenu"
+        >
 
           <template v-slot:body-cell-name="prop">
             <td class="flex" style="align-items: center">
@@ -29,7 +31,7 @@
           <template v-slot:body-cell-options="prop">
             <td class="text-right">
               <q-btn round flat icon="more_vert" size="sm">
-                <q-menu>
+                <q-menu :ref="(el) => setItemRef(el, prop.rowIndex)">
                   <q-list style="min-width: 100px">
                     <q-item clickable v-close-popup @click="openObject(prop.row)">
                       <q-item-section>Open</q-item-section>
@@ -43,9 +45,6 @@
                     <q-item clickable v-close-popup @click="$refs.options.deleteObject(prop.row)">
                       <q-item-section>Delete</q-item-section>
                     </q-item>
-                    <q-item clickable v-close-popup>
-                      <q-item-section>New incognito tab</q-item-section>
-                    </q-item>
                     <q-separator />
                   </q-list>
                 </q-menu>
@@ -78,6 +77,7 @@ export default defineComponent({
   components: { FileOptions, DragAndDrop, FilePreview },
   data: function () {
     return {
+      rowMenu: [],
       loading: false,
       rows: [],
       columns: [
@@ -177,6 +177,15 @@ export default defineComponent({
     },
   },
   methods: {
+    setItemRef(el, index) {
+      if (el) {
+        this.rowMenu[index] = el
+      }
+    },
+    openRowMenu: function(evt, row, index) {
+      evt.preventDefault()
+      this.rowMenu[index].show()
+    },
     breadcrumbsClick: function(obj) {
       this.$router.push({ name: `files-folder`, params: { bucket: this.selectedBucket, folder: encode(obj.path) }})
     },

worker/dev/index.ts

@@ -1,18 +1,23 @@
 import { R2Explorer } from "../src";
 
-export default R2Explorer({
+const baseConfig = {
   readonly: false,
   cors: true,
   showHiddenFiles: true,
-  dashboardUrl: "https://dashboard-v2.r2-explorer-dashboard.pages.dev/",
-  basicAuth: [{
-    username: 'teste',
-    password: 'abc'
-  },{
-    username: 'teste33',
-    password: 'abcdd'
-  },{
-    username: 'teste55',
-    password: 'abchh'
-  }]
-});
+  dashboardUrl: "https://dashboard-v2.r2-explorer-dashboard.pages.dev/"
+};
+
+export default {
+  async email(event, env, context) {
+    await R2Explorer(baseConfig).email(event, env, context);
+  },
+  async fetch(request, env, context) {
+    return R2Explorer({
+      ...baseConfig,
+      basicAuth: {
+        username: env.BASIC_USERNAME,
+        password: env.BASIC_PASSWORD
+      }
+    }).fetch(request, env, context);
+  }
+};

worker/dev/wrangler.toml

@@ -9,16 +9,6 @@ bucket_name = 'teste'
 preview_bucket_name = 'teste'
 
 [[r2_buckets]]
-binding = 'r2-explorer-example-2'
-bucket_name = 'r2-explorer-example-2'
-preview_bucket_name = 'r2-explorer-example-2'
-
-[[r2_buckets]]
-binding = 'r2-explorer-example-1'
-bucket_name = 'r2-explorer-example-1'
-preview_bucket_name = 'r2-explorer-example-1'
-
-#[[r2_buckets]]
-#binding = 'drive'
-#bucket_name = 'drive'
-#preview_bucket_name = 'drive'
+binding = 'storage'
+bucket_name = 'storage'
+preview_bucket_name = 'storage'