Basic file preview

frontend/views/Browser.vue

@@ -113,6 +113,9 @@
                 <b-dropdown-item v-if="props.row.type == 'file' && can('download')" aria-role="listitem" @click="download(props.row)">
                   <b-icon icon="download" size="is-small" /> {{ lang('Download') }}
                 </b-dropdown-item>
+                <b-dropdown-item v-if="props.row.type == 'file' && can('read')" aria-role="listitem" @click="preview(props.row)">
+                  <b-icon icon="file-alt" size="is-small" /> {{ lang('View') }}
+                </b-dropdown-item>
                 <b-dropdown-item v-if="can('write')" aria-role="listitem" @click="copy($event, props.row)">
                   <b-icon icon="copy" size="is-small" /> {{ lang('Copy') }}
                 </b-dropdown-item>
@@ -151,11 +154,11 @@
 import Vue from 'vue'
 import Menu from './partials/Menu'
 import Tree from './partials/Tree'
+import Preview from './partials/Preview'
 import Pagination from './partials/Pagination'
 import Upload from './partials/Upload'
 import api from '../api/api'
 import VueClipboard from 'vue-clipboard2'
-import { Base64 } from 'js-base64'
 import _ from 'lodash'
 
 Vue.use(VueClipboard)
@@ -250,7 +253,7 @@ export default {
       if (item.type == 'dir' || item.type == 'back') {
         this.goTo(item.path)
       } else {
-        this.download(item)
+        this.preview(item)
       }
     },
     selectDir() {
@@ -335,17 +338,19 @@ export default {
           this.handleError(error)
         })
     },
-    getDownloadLink(item) {
-      return Vue.config.baseURL+'/download&path='+encodeURIComponent(Base64.encode(item.path))
-    },
     download(item) {
-      window.open(this.getDownloadLink(item), '_blank')
+      window.open(this.getDownloadLink(item.path), '_blank')
     },
     search() {
       // TODO: create search logic
     },
-    edit() {
-      // TODO: create edit file logic
+    preview(item) {
+      this.$modal.open({
+        parent: this,
+        props: { item: item },
+        hasModalCard: true,
+        component: Preview,
+      })
     },
     isArchive(item) {
       return item.type == 'file' && item.name.split('.').pop() == 'zip'

frontend/views/partials/Preview.vue

@@ -0,0 +1,65 @@
+/* eslint-disable */
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">
+        {{ item.name }}
+      </p>
+    </header>
+    <section class="modal-card-body preview">
+      <textarea v-if="isText()" v-model="content" class="textarea" name="content" rows="20" />
+      <div v-if="isImage()" class="image">
+        <img :src="content">
+      </div>
+    </section>
+    <footer class="modal-card-foot">
+      <button class="button" type="button" @click="$parent.close()">
+        {{ lang('Close') }}
+      </button>
+    </footer>
+  </div>
+</template>
+
+<script>
+import api from '../../api/api'
+
+export default {
+  name: 'Preview',
+  props: [ 'item' ],
+  data() {
+    return {
+      content: '',
+    }
+  },
+  mounted() {
+    if (this.isText()) {
+      api.downloadItem({
+        path: this.item.path,
+      })
+        .then((res) => {
+          this.content = res
+        })
+        .catch(error => this.handleError(error))
+    } else if (this.isImage()) {
+      this.content =this.getDownloadLink(this.item.path)
+    }
+  },
+  methods: {
+    isText() {
+      return this.hasExtension(['.txt', '.html', '.css', '.js', '.ts', '.php'])
+    },
+    isImage() {
+      return this.hasExtension(['.jpg', '.jpeg', '.gif', '.png'])
+    },
+    hasExtension(exts) {
+      return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$', 'i')).test(this.item.path)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.preview {
+  min-height: 450px;
+}
+</style>