Add auto preview when opening a file url

2026-08-26 19:33:39 +00:00 · 2024-02-19 19:52:02 +00:00
parent f9648ddfc6
commit 637402a11c
5 changed files with 101 additions and 35 deletions
@@ -3,6 +3,24 @@ import { useMainStore } from "stores/main-store";

 export const ROOT_FOLDER = "IA=="  // IA== is a space

+function mapFile(obj, prefix) {
+  const date = new Date(obj.uploaded)
+
+  return {
+    ...obj,
+    hash: encode(obj.key),
+    nameHash: encode(obj.key.replace(prefix, '')),
+    name: obj.key.replace(prefix, ''),
+    lastModified: timeSince(date),
+    timestamp: date.getTime(),
+    size: bytesToSize(obj.size),
+    sizeRaw: obj.size,
+    type: 'file',
+    icon: 'article',
+    color: 'grey',
+  }
+}
+
 export const timeSince = (date) => {
  const seconds = Math.floor((new Date() - date) / 1000);

@@ -87,8 +105,17 @@ export const apiHandler = {
      extra
    );
  },
-  headFile: (bucket, key) => {
-    return api.get(`/buckets/${bucket}/${encode(key)}/head`);
+  headFile: async (bucket, key) => {
+    let prefix = ''
+    if (key.includes('/')) {
+      prefix = key.replace(key.split('/').pop(), '')
+    }
+
+    const resp = await api.get(`/buckets/${bucket}/${encode(key)}/head`);
+
+    if (resp.status === 200) {
+      return mapFile(resp.data, prefix)
+    }
  },
  // renameObject: (oldName, newName) => {
  //   return axios.post(`/buckets/${store.state.activeBucket}/move`, {
@@ -171,23 +198,7 @@ export const apiHandler = {
      if (response.data.objects) {
        const files = response.data.objects.filter(function(obj) {
          return !(obj.key.endsWith('/') && delimiter !== '') && obj.key !== prefix  // Remove selected folder when delimiter is defined
-        }).map(function(obj) {
-          const date = new Date(obj.uploaded)
-
-          return {
-            ...obj,
-            hash: encode(obj.key),
-            nameHash: encode(obj.key.replace(prefix, '')),
-            name: obj.key.replace(prefix, ''),
-            lastModified: timeSince(date),
-            timestamp: date.getTime(),
-            size: bytesToSize(obj.size),
-            sizeRaw: obj.size,
-            type: 'file',
-            icon: 'article',
-            color: 'grey',
-          }
-        }).filter(obj => {
+        }).map((obj) => mapFile(obj, prefix)).filter(obj => {
          // Remove hidden files
          return !(mainStore.showHiddenFiles !== true && obj.name.startsWith('.'))
        })
@@ -1,13 +1,13 @@
 <template>
-  <q-dialog v-model="deleteModal" @hide="deleteReset">
+  <q-dialog v-model="deleteModal" @hide="reset">
    <q-card>
-      <q-card-section class="row column" v-if="deleteRow">
+      <q-card-section class="row column" v-if="row">
        <q-avatar class="q-mb-md" icon="delete" color="red" text-color="white" />
-        <span v-if="deleteRow.type === 'folder'" class="q-ml-sm">Are you sure you want to delete the folder <code>{{deleteRow.name}}</code>, and
+        <span v-if="row.type === 'folder'" class="q-ml-sm">Are you sure you want to delete the folder <code>{{row.name}}</code>, and
          <code v-if="deleteFolderInnerFilesCount !== null">{{deleteFolderInnerFilesCount}}</code>
          <code v-else><q-spinner color="primary"/></code>
          files inside?</span>
-        <span v-else class="q-ml-sm">Are you sure you want to delete the file <code>{{deleteRow.name}}</code>?</span>
+        <span v-else class="q-ml-sm">Are you sure you want to delete the file <code>{{row.name}}</code>?</span>
      </q-card-section>

      <q-card-actions align="right">
@@ -16,6 +16,20 @@
      </q-card-actions>
    </q-card>
  </q-dialog>
+
+  <q-dialog v-model="renameModal" @hide="reset">
+    <q-card>
+      <q-card-section class="row column" v-if="row">
+        <q-avatar class="q-mb-md" icon="pencil" color="red" text-color="white" />
+        <span class="q-ml-sm">Are you sure you want to rename the file <code>{{row.name}}</code>?</span>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" color="primary" v-close-popup />
+        <q-btn flat label="Rename" color="red" @click="renameConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>

 <script>
@@ -28,9 +42,10 @@ export default defineComponent({
  name: 'FileOptions',
  data: function () {
    return {
-      deleteRow: null,
+      row: null,
      deleteFolderContents: [],
      deleteModal: false,
+      renameModal: false,
      deleteFolderInnerFilesCount: null,
      newFolderName: ''
    }
@@ -38,16 +53,28 @@ export default defineComponent({
  methods: {
    deleteObject: async function(row) {
      this.deleteModal = true
-      this.deleteRow = row
+      this.row = row
      if (row.type === 'folder') {
        this.deleteFolderContents = await apiHandler.fetchFile(this.selectedBucket, row.key, '')
        this.deleteFolderInnerFilesCount = this.deleteFolderContents.length
      }
    },
+    renameObject: async function(row) {
+      this.deleteModal = true
+      this.row = row
+      if (row.type === 'folder') {
+        this.deleteFolderContents = await apiHandler.fetchFile(this.selectedBucket, row.key, '')
+        this.deleteFolderInnerFilesCount = this.deleteFolderContents.length
+      }
+    },
+    renameConfirm: async function() {
+      this.$bus.emit('fetchFiles')
+      this.reset()
+    },
    deleteConfirm: async function() {
      this.deleteModal = false

-      if (this.deleteRow.type === 'folder') {
+      if (this.row.type === 'folder') {
        const notif = this.q.notify({
          group: false,
          spinner: true,
@@ -65,7 +92,7 @@ export default defineComponent({
            caption: `${parseInt(i*100/(this.deleteFolderInnerFilesCount+1))}%`  // +1 because still needs to delete the folder
          })
        }
-        await apiHandler.deleteObject(this.deleteRow.key, this.selectedBucket)
+        await apiHandler.deleteObject(this.row.key, this.selectedBucket)

        notif({
          icon: 'done', // we add an icon
@@ -75,7 +102,7 @@ export default defineComponent({
          timeout: 2500 // we will timeout it in 2.5s
        })
      } else {
-        await apiHandler.deleteObject(this.deleteRow.key, this.selectedBucket)
+        await apiHandler.deleteObject(this.row.key, this.selectedBucket)
        this.q.notify({
          group: false,
          icon: 'done', // we add an icon
@@ -86,11 +113,12 @@ export default defineComponent({
      }

      this.$bus.emit('fetchFiles')
-      this.deleteReset()
+      this.reset()
    },
-    deleteReset: function() {
+    reset: function() {
      this.deleteModal = false
-      this.deleteRow = null
+      this.renameModal = false
+      this.row = null
      this.deleteFolderInnerFilesCount = null
      this.deleteFolderContents = []
    },
@@ -151,7 +151,7 @@ export default defineComponent({
  methods: {
    openFileDetails: function(row) {
      // this.$emit('updateDrawer', true)  // TODO: enable
-      console.log(row)
+      // console.log(row)
    },
  },
  computed: {
@@ -6,6 +6,9 @@
    <q-item clickable v-close-popup @click="downloadObject" v-if="prop.row.type === 'file'">
      <q-item-section>Download</q-item-section>
    </q-item>
+    <q-item clickable v-close-popup @click="renameObject" v-if="prop.row.type === 'file'">
+      <q-item-section>Rename</q-item-section>
+    </q-item>
    <q-item clickable v-close-popup @click="shareObject">
      <q-item-section>Get sharable link</q-item-section>
    </q-item>
@@ -36,6 +39,9 @@ export default {
    },
  },
  methods: {
+    renameObject: function() {
+      this.$emit('renameObject', this.prop.row)
+    },
    openObject: function() {
      this.$emit('openObject', this.prop.row)
    },
@@ -57,7 +63,7 @@ export default {
          name: 'files-file',
          params: {
            bucket: this.selectedBucket,
-            folder: encode(this.selectedFolder || ROOT_FOLDER),
+            folder: this.selectedFolder ? encode(this.selectedFolder) : ROOT_FOLDER,
            file: this.prop.row.nameHash
          }
        }).href
@@ -53,7 +53,7 @@
              touch-position
              context-menu
            >
-              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" />
+              <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="renameObject" />
            </q-menu>
          </template>

@@ -61,7 +61,7 @@
            <td class="text-right">
              <q-btn round flat icon="more_vert" size="sm">
                <q-menu>
-                  <FileContextMenu :prop="prop" />
+                  <FileContextMenu :prop="prop" @openObject="openObject" @deleteObject="$refs.options.deleteObject" @renameObject="renameObject" />
                </q-menu>
              </q-btn>
            </td>
@@ -218,11 +218,28 @@ export default defineComponent({
        this.$refs.preview.openFile(row)
      }
    },
+    renameObject: function(row) {
+      if (row.type === 'folder') {
+        this.$router.push({ name: `files-folder`, params: { bucket: this.selectedBucket, folder: encode(row.key) }})
+      } else {
+        // console.log(row)
+        this.$refs.preview.openFile(row)
+      }
+    },
    fetchFiles: async function () {
      this.loading = true

      this.rows = await apiHandler.fetchFile(this.selectedBucket, this.selectedFolder, '/')
      this.loading = false
+    },
+    openPreviewFromKey: async function () {
+      let key = `${decode(this.$route.params.file)}`
+      if (this.selectedFolder && this.selectedFolder !== ROOT_FOLDER) {
+        key = `${this.selectedFolder}${decode(this.$route.params.file)}`
+      }
+
+      const file = await apiHandler.headFile(this.selectedBucket, key)
+      this.$refs.preview.openFile(file)
    }
  },
  created() {
@@ -232,6 +249,10 @@ export default defineComponent({
    this.$refs.table.sort('name')

    this.$bus.on('fetchFiles', this.fetchFiles)
+
+    if (this.$route.params.file) {
+      this.openPreviewFromKey()
+    }
  },
  beforeUnmount() {
    this.$bus.off('fetchFiles')