From cf85404dd25cd7fdd73aa32878b4dc5f85ee3e96 Mon Sep 17 00:00:00 2001
From: Filippo Finke <37296364+filippofinke@users.noreply.github.com>
Date: Mon, 21 Feb 2022 19:30:42 +0100
Subject: [PATCH] feat: add upload file list with progress (#1825)
---
.../src/components/prompts/UploadFiles.vue | 62 +++++
frontend/src/css/base.css | 32 ++-
frontend/src/css/listing-icons.css | 252 +++++++++---------
frontend/src/css/styles.css | 1 +
frontend/src/css/upload-files.css | 61 +++++
frontend/src/i18n/en.json | 3 +-
frontend/src/store/getters.js | 30 ++-
frontend/src/store/modules/upload.js | 7 +-
frontend/src/utils/upload.js | 10 +
frontend/src/views/Layout.vue | 5 +-
frontend/src/views/Share.vue | 2 +-
frontend/src/views/files/Listing.vue | 7 +-
12 files changed, 325 insertions(+), 147 deletions(-)
create mode 100644 frontend/src/components/prompts/UploadFiles.vue
create mode 100644 frontend/src/css/upload-files.css
diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue
new file mode 100644
index 00000000..cad8bc0f
--- /dev/null
+++ b/frontend/src/components/prompts/UploadFiles.vue
@@ -0,0 +1,62 @@
+<template>
+ <div
+ v-if="filesInUploadCount > 0"
+ class="upload-files"
+ v-bind:class="{ closed: !open }"
+ >
+ <div class="card floating">
+ <div class="card-title">
+ <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
+
+ <button
+ class="action"
+ @click="toggle"
+ aria-label="Toggle file upload list"
+ title="Toggle file upload list"
+ >
+ <i class="material-icons">{{
+ open ? "keyboard_arrow_down" : "keyboard_arrow_up"
+ }}</i>
+ </button>
+ </div>
+
+ <div class="card-content file-icons">
+ <div
+ class="file"
+ v-for="file in filesInUpload"
+ :key="file.id"
+ :data-type="file.type"
+ :aria-label="file.name"
+ >
+ <div class="file-name">
+ <i class="material-icons"></i> {{ file.name }}
+ </div>
+ <div class="file-progress">
+ <div v-bind:style="{ width: file.progress + '%' }"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+ name: "uploadFiles",
+ data: function () {
+ return {
+ open: false,
+ };
+ },
+ computed: {
+ ...mapGetters(["filesInUpload", "filesInUploadCount"]),
+ },
+ methods: {
+ toggle: function () {
+ this.open = !this.open;
+ },
+ },
+};
+</script>
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index bf34798b..05d799c9 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -1,5 +1,5 @@
body {
- font-family: 'Roboto', sans-serif;
+ font-family: "Roboto", sans-serif;
padding-top: 4em;
background-color: #fafafa;
color: #333333;
@@ -13,7 +13,7 @@ body {
*:hover,
*:active,
*:focus {
- outline: 0
+ outline: 0;
}
a {
@@ -44,7 +44,7 @@ i.spin {
}
#app {
- transition: .2s ease padding;
+ transition: 0.2s ease padding;
}
#app.multiple {
@@ -63,17 +63,17 @@ nav .action {
display: block;
border-radius: 0;
font-size: 1.1em;
- padding: .5em;
+ padding: 0.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-nav>div {
+nav > div {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
-nav .action>* {
+nav .action > * {
vertical-align: middle;
}
@@ -97,19 +97,25 @@ main {
.breadcrumbs a {
color: inherit;
- transition: .1s ease-in;
- border-radius: .125em;
+ transition: 0.1s ease-in;
+ border-radius: 0.125em;
}
.breadcrumbs a:hover {
- background-color: rgba(0,0,0, 0.05);
+ background-color: rgba(0, 0, 0, 0.05);
}
.breadcrumbs span a {
- padding: .2em;
+ padding: 0.2em;
}
-#progress {
+.files {
+ position: absolute;
+ bottom: 30px;
+ width: 100%;
+}
+
+.progress {
position: fixed;
top: 0;
left: 0;
@@ -118,11 +124,11 @@ main {
z-index: 9999999999;
}
-#progress div {
+.progress div {
height: 100%;
background-color: #40c4ff;
width: 0;
- transition: .2s ease width;
+ transition: 0.2s ease width;
}
.break-word {
diff --git a/frontend/src/css/listing-icons.css b/frontend/src/css/listing-icons.css
index bb8822c6..2de6baab 100644
--- a/frontend/src/css/listing-icons.css
+++ b/frontend/src/css/listing-icons.css
@@ -2,202 +2,202 @@
/* General */
-#listing [aria-label^="."] { opacity: 0.33 }
-#listing [aria-label$=".bak"] { opacity: 0.33 }
+.file-icons [aria-label^="."] { opacity: 0.33 }
+.file-icons [aria-label$=".bak"] { opacity: 0.33 }
-#listing [data-type=audio] i::before { content: 'volume_up' }
-#listing [data-type=blob] i::before { content: 'insert_drive_file' }
-#listing [data-type=image] i::before { content: 'image' }
-#listing [data-type=pdf] i::before { content: 'description' }
-#listing [data-type=text] i::before { content: 'description' }
-#listing [data-type=video] i::before { content: 'movie' }
+.file-icons [data-type=audio] i::before { content: 'volume_up' }
+.file-icons [data-type=blob] i::before { content: 'insert_drive_file' }
+.file-icons [data-type=image] i::before { content: 'image' }
+.file-icons [data-type=pdf] i::before { content: 'description' }
+.file-icons [data-type=text] i::before { content: 'description' }
+.file-icons [data-type=video] i::before { content: 'movie' }
/* #f90 - Image */
-#listing [aria-label$=".ai"] i::before,
-#listing [aria-label$=".odg"] i::before,
-#listing [aria-label$=".xcf"] i::before
+.file-icons [aria-label$=".ai"] i::before,
+.file-icons [aria-label$=".odg"] i::before,
+.file-icons [aria-label$=".xcf"] i::before
{ content: 'image' }
/* #f90 - Presentation */
-#listing [aria-label$=".odp"] i::before,
-#listing [aria-label$=".ppt"] i::before,
-#listing [aria-label$=".pptx"] i::before
+.file-icons [aria-label$=".odp"] i::before,
+.file-icons [aria-label$=".ppt"] i::before,
+.file-icons [aria-label$=".pptx"] i::before
{ content: 'slideshow' }
/* #0f0 - Spreadsheet/Database */
-#listing [aria-label$=".csv"] i::before,
-#listing [aria-label$=".db"] i::before,
-#listing [aria-label$=".odb"] i::before,
-#listing [aria-label$=".ods"] i::before,
-#listing [aria-label$=".xls"] i::before,
-#listing [aria-label$=".xlsx"] i::before
+.file-icons [aria-label$=".csv"] i::before,
+.file-icons [aria-label$=".db"] i::before,
+.file-icons [aria-label$=".odb"] i::before,
+.file-icons [aria-label$=".ods"] i::before,
+.file-icons [aria-label$=".xls"] i::before,
+.file-icons [aria-label$=".xlsx"] i::before
{ content: 'border_all' }
/* #00f - Document */
-#listing [aria-label$=".doc"] i::before,
-#listing [aria-label$=".docx"] i::before,
-#listing [aria-label$=".log"] i::before,
-#listing [aria-label$=".odt"] i::before,
-#listing [aria-label$=".rtf"] i::before
+.file-icons [aria-label$=".doc"] i::before,
+.file-icons [aria-label$=".docx"] i::before,
+.file-icons [aria-label$=".log"] i::before,
+.file-icons [aria-label$=".odt"] i::before,
+.file-icons [aria-label$=".rtf"] i::before
{ content: 'description' }
/* #999 - Code */
-#listing [aria-label$=".c"] i::before,
-#listing [aria-label$=".cpp"] i::before,
-#listing [aria-label$=".cs"] i::before,
-#listing [aria-label$=".css"] i::before,
-#listing [aria-label$=".go"] i::before,
-#listing [aria-label$=".h"] i::before,
-#listing [aria-label$=".html"] i::before,
-#listing [aria-label$=".java"] i::before,
-#listing [aria-label$=".js"] i::before,
-#listing [aria-label$=".json"] i::before,
-#listing [aria-label$=".kt"] i::before,
-#listing [aria-label$=".php"] i::before,
-#listing [aria-label$=".py"] i::before,
-#listing [aria-label$=".rb"] i::before,
-#listing [aria-label$=".rs"] i::before,
-#listing [aria-label$=".vue"] i::before,
-#listing [aria-label$=".xml"] i::before,
-#listing [aria-label$=".yml"] i::before
+.file-icons [aria-label$=".c"] i::before,
+.file-icons [aria-label$=".cpp"] i::before,
+.file-icons [aria-label$=".cs"] i::before,
+.file-icons [aria-label$=".css"] i::before,
+.file-icons [aria-label$=".go"] i::before,
+.file-icons [aria-label$=".h"] i::before,
+.file-icons [aria-label$=".html"] i::before,
+.file-icons [aria-label$=".java"] i::before,
+.file-icons [aria-label$=".js"] i::before,
+.file-icons [aria-label$=".json"] i::before,
+.file-icons [aria-label$=".kt"] i::before,
+.file-icons [aria-label$=".php"] i::before,
+.file-icons [aria-label$=".py"] i::before,
+.file-icons [aria-label$=".rb"] i::before,
+.file-icons [aria-label$=".rs"] i::before,
+.file-icons [aria-label$=".vue"] i::before,
+.file-icons [aria-label$=".xml"] i::before,
+.file-icons [aria-label$=".yml"] i::before
{ content: 'code' }
/* #999 - Executable */
-#listing [aria-label$=".apk"] i::before,
-#listing [aria-label$=".bat"] i::before,
-#listing [aria-label$=".exe"] i::before,
-#listing [aria-label$=".jar"] i::before,
-#listing [aria-label$=".ps1"] i::before,
-#listing [aria-label$=".sh"] i::before
+.file-icons [aria-label$=".apk"] i::before,
+.file-icons [aria-label$=".bat"] i::before,
+.file-icons [aria-label$=".exe"] i::before,
+.file-icons [aria-label$=".jar"] i::before,
+.file-icons [aria-label$=".ps1"] i::before,
+.file-icons [aria-label$=".sh"] i::before
{ content: 'web_asset' }
/* #999 - Installer */
-#listing [aria-label$=".deb"] i::before,
-#listing [aria-label$=".msi"] i::before,
-#listing [aria-label$=".pkg"] i::before,
-#listing [aria-label$=".rpm"] i::before
+.file-icons [aria-label$=".deb"] i::before,
+.file-icons [aria-label$=".msi"] i::before,
+.file-icons [aria-label$=".pkg"] i::before,
+.file-icons [aria-label$=".rpm"] i::before
{ content: 'archive' }
/* #999 - Compressed */
-#listing [aria-label$=".7z"] i::before,
-#listing [aria-label$=".bz2"] i::before,
-#listing [aria-label$=".cab"] i::before,
-#listing [aria-label$=".gz"] i::before,
-#listing [aria-label$=".rar"] i::before,
-#listing [aria-label$=".tar"] i::before,
-#listing [aria-label$=".xz"] i::before,
-#listing [aria-label$=".zip"] i::before,
-#listing [aria-label$=".zst"] i::before
+.file-icons [aria-label$=".7z"] i::before,
+.file-icons [aria-label$=".bz2"] i::before,
+.file-icons [aria-label$=".cab"] i::before,
+.file-icons [aria-label$=".gz"] i::before,
+.file-icons [aria-label$=".rar"] i::before,
+.file-icons [aria-label$=".tar"] i::before,
+.file-icons [aria-label$=".xz"] i::before,
+.file-icons [aria-label$=".zip"] i::before,
+.file-icons [aria-label$=".zst"] i::before
{ content: 'folder_zip' }
/* #999 - Disk */
-#listing [aria-label$=".ccd"] i::before,
-#listing [aria-label$=".dmg"] i::before,
-#listing [aria-label$=".iso"] i::before,
-#listing [aria-label$=".mdf"] i::before,
-#listing [aria-label$=".vdi"] i::before,
-#listing [aria-label$=".vhd"] i::before,
-#listing [aria-label$=".vmdk"] i::before,
-#listing [aria-label$=".wim"] i::before
+.file-icons [aria-label$=".ccd"] i::before,
+.file-icons [aria-label$=".dmg"] i::before,
+.file-icons [aria-label$=".iso"] i::before,
+.file-icons [aria-label$=".mdf"] i::before,
+.file-icons [aria-label$=".vdi"] i::before,
+.file-icons [aria-label$=".vhd"] i::before,
+.file-icons [aria-label$=".vmdk"] i::before,
+.file-icons [aria-label$=".wim"] i::before
{ content: 'album' }
/* #999 - Font */
-#listing [aria-label$=".otf"] i::before,
-#listing [aria-label$=".ttf"] i::before,
-#listing [aria-label$=".woff"] i::before,
-#listing [aria-label$=".woff2"] i::before
+.file-icons [aria-label$=".otf"] i::before,
+.file-icons [aria-label$=".ttf"] i::before,
+.file-icons [aria-label$=".woff"] i::before,
+.file-icons [aria-label$=".woff2"] i::before
{ content: 'font_download' }
/* Colors */
/* General */
-#listing [data-type=audio] i { color: var(--icon-yellow) }
-#listing [data-type=image] i { color: var(--icon-orange) }
-#listing [data-type=video] i { color: var(--icon-violet) }
+.file-icons [data-type=audio] i { color: var(--icon-yellow) }
+.file-icons [data-type=image] i { color: var(--icon-orange) }
+.file-icons [data-type=video] i { color: var(--icon-violet) }
/* #f00 - Adobe/Oracle */
-#listing [aria-label$=".ai"] i,
-#listing [aria-label$=".java"] i,
-#listing [aria-label$=".jar"] i,
-#listing [aria-label$=".psd"] i,
-#listing [aria-label$=".rb"] i,
-#listing [data-type=pdf] i
+.file-icons [aria-label$=".ai"] i,
+.file-icons [aria-label$=".java"] i,
+.file-icons [aria-label$=".jar"] i,
+.file-icons [aria-label$=".psd"] i,
+.file-icons [aria-label$=".rb"] i,
+.file-icons [data-type=pdf] i
{ color: var(--icon-red) }
/* #f90 - Image/Presentation */
-#listing [aria-label$=".html"] i,
-#listing [aria-label$=".odg"] i,
-#listing [aria-label$=".odp"] i,
-#listing [aria-label$=".ppt"] i,
-#listing [aria-label$=".pptx"] i,
-#listing [aria-label$=".vue"] i,
-#listing [aria-label$=".xcf"] i
+.file-icons [aria-label$=".html"] i,
+.file-icons [aria-label$=".odg"] i,
+.file-icons [aria-label$=".odp"] i,
+.file-icons [aria-label$=".ppt"] i,
+.file-icons [aria-label$=".pptx"] i,
+.file-icons [aria-label$=".vue"] i,
+.file-icons [aria-label$=".xcf"] i
{ color: var(--icon-orange) }
/* #ff0 - Various */
-#listing [aria-label$=".css"] i,
-#listing [aria-label$=".js"] i,
-#listing [aria-label$=".json"] i,
-#listing [aria-label$=".zip"] i
+.file-icons [aria-label$=".css"] i,
+.file-icons [aria-label$=".js"] i,
+.file-icons [aria-label$=".json"] i,
+.file-icons [aria-label$=".zip"] i
{ color: var(--icon-yellow) }
/* #0f0 - Spreadsheet/Google */
-#listing [aria-label$=".apk"] i,
-#listing [aria-label$=".dex"] i,
-#listing [aria-label$=".go"] i,
-#listing [aria-label$=".ods"] i,
-#listing [aria-label$=".xls"] i,
-#listing [aria-label$=".xlsx"] i
+.file-icons [aria-label$=".apk"] i,
+.file-icons [aria-label$=".dex"] i,
+.file-icons [aria-label$=".go"] i,
+.file-icons [aria-label$=".ods"] i,
+.file-icons [aria-label$=".xls"] i,
+.file-icons [aria-label$=".xlsx"] i
{ color: var(--icon-green) }
/* #00f - Document/Microsoft/Apple/Closed */
-#listing [aria-label$=".aac"] i,
-#listing [aria-label$=".bat"] i,
-#listing [aria-label$=".cab"] i,
-#listing [aria-label$=".cs"] i,
-#listing [aria-label$=".dmg"] i,
-#listing [aria-label$=".doc"] i,
-#listing [aria-label$=".docx"] i,
-#listing [aria-label$=".emf"] i,
-#listing [aria-label$=".exe"] i,
-#listing [aria-label$=".ico"] i,
-#listing [aria-label$=".mp2"] i,
-#listing [aria-label$=".mp3"] i,
-#listing [aria-label$=".mp4"] i,
-#listing [aria-label$=".mpg"] i,
-#listing [aria-label$=".msi"] i,
-#listing [aria-label$=".odt"] i,
-#listing [aria-label$=".ps1"] i,
-#listing [aria-label$=".rtf"] i,
-#listing [aria-label$=".vob"] i,
-#listing [aria-label$=".wim"] i
+.file-icons [aria-label$=".aac"] i,
+.file-icons [aria-label$=".bat"] i,
+.file-icons [aria-label$=".cab"] i,
+.file-icons [aria-label$=".cs"] i,
+.file-icons [aria-label$=".dmg"] i,
+.file-icons [aria-label$=".doc"] i,
+.file-icons [aria-label$=".docx"] i,
+.file-icons [aria-label$=".emf"] i,
+.file-icons [aria-label$=".exe"] i,
+.file-icons [aria-label$=".ico"] i,
+.file-icons [aria-label$=".mp2"] i,
+.file-icons [aria-label$=".mp3"] i,
+.file-icons [aria-label$=".mp4"] i,
+.file-icons [aria-label$=".mpg"] i,
+.file-icons [aria-label$=".msi"] i,
+.file-icons [aria-label$=".odt"] i,
+.file-icons [aria-label$=".ps1"] i,
+.file-icons [aria-label$=".rtf"] i,
+.file-icons [aria-label$=".vob"] i,
+.file-icons [aria-label$=".wim"] i
{ color: var(--icon-blue) }
/* #60f - Various */
-#listing [aria-label$=".iso"] i,
-#listing [aria-label$=".php"] i,
-#listing [aria-label$=".rar"] i
+.file-icons [aria-label$=".iso"] i,
+.file-icons [aria-label$=".php"] i,
+.file-icons [aria-label$=".rar"] i
{ color: var(--icon-violet) }
/* Overrides */
-#listing [data-dir=true] i { color: var(--icon-blue) }
-#listing [data-dir=true] i::before { content: 'folder' }
-#listing [aria-selected=true] i { color: var(--item-selected) }
+.file-icons [data-dir=true] i { color: var(--icon-blue) }
+.file-icons [data-dir=true] i::before { content: 'folder' }
+.file-icons [aria-selected=true] i { color: var(--item-selected) }
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 10427a9d..8b3b608c 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -11,6 +11,7 @@
@import "./header.css";
@import "./listing.css";
@import "./listing-icons.css";
+@import "./upload-files.css";
@import "./dashboard.css";
@import "./login.css";
diff --git a/frontend/src/css/upload-files.css b/frontend/src/css/upload-files.css
new file mode 100644
index 00000000..ce864182
--- /dev/null
+++ b/frontend/src/css/upload-files.css
@@ -0,0 +1,61 @@
+.upload-files .card.floating {
+ left: auto;
+ top: auto;
+ margin: 0;
+ right: 0;
+ bottom: 0;
+ transform: none;
+}
+
+.upload-files .file {
+ margin-bottom: 8px;
+}
+
+.upload-files .file .file-name {
+ font-size: 1.1em;
+ display: flex;
+ align-items: center;
+}
+
+.upload-files .file .file-name i {
+ margin-right: 5px;
+}
+
+.upload-files .file .file-progress {
+ margin-top: 2px;
+ width: 100%;
+ height: 5px;
+}
+
+.upload-files .file .file-progress div {
+ height: 100%;
+ background-color: #40c4ff;
+ width: 0;
+ transition: 0.2s ease width;
+ border-radius: 10px;
+}
+
+.upload-files.closed .card-content {
+ display: none;
+ padding: 0em 1em 1em 1em;
+}
+
+.upload-files .card .card-title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8em;
+ padding: 1em 1em 0em;
+}
+
+.upload-files.closed .card-title {
+ font-size: 0.7em;
+ padding: 0.5em 1em;
+}
+
+@media (max-width: 450px) {
+ .upload-files .card.floating {
+ max-width: 100%;
+ width: 100%;
+ }
+}
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 76a1d06a..182c6c08 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -100,7 +100,7 @@
"ru": "Русский",
"sk": "Slovenčina",
"svSE": "Swedish (Sweden)",
- "tr" : "Türkçe",
+ "tr": "Türkçe",
"ua": "Українська",
"zhCN": "中文 (简体)",
"zhTW": "中文 (繁體)"
@@ -151,6 +151,7 @@
"show": "Show",
"size": "Size",
"upload": "Upload",
+ "uploadFiles": "Uploading {files} files...",
"uploadMessage": "Select an option to upload.",
"optionalPassword": "Optional password"
},
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index 8f1a8a4c..eee94fe2 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -8,8 +8,36 @@ const getters = {
return 0;
}
+ let totalSize = state.upload.sizes.reduce((a, b) => a + b, 0);
+
let sum = state.upload.progress.reduce((acc, val) => acc + val);
- return Math.ceil((sum / state.upload.size) * 100);
+ return Math.ceil((sum / totalSize) * 100);
+ },
+ filesInUploadCount: (state) => {
+ let total =
+ Object.keys(state.upload.uploads).length + state.upload.queue.length;
+ return total;
+ },
+ filesInUpload: (state) => {
+ let files = [];
+
+ for (let index in state.upload.uploads) {
+ let upload = state.upload.uploads[index];
+ let id = upload.id;
+ let type = upload.type;
+ let name = decodeURIComponent(upload.path.replace(/^.*[\\/]/, ""));
+ let progress = state.upload.progress[id];
+ let size = state.upload.sizes[id];
+
+ files.push({
+ id,
+ name,
+ progress: Math.ceil((progress / size) * 100),
+ type,
+ });
+ }
+
+ return files.sort((a, b) => a.progress - b.progress);
},
};
diff --git a/frontend/src/store/modules/upload.js b/frontend/src/store/modules/upload.js
index b1a59bc8..4110cb33 100644
--- a/frontend/src/store/modules/upload.js
+++ b/frontend/src/store/modules/upload.js
@@ -7,7 +7,7 @@ const UPLOADS_LIMIT = 5;
const state = {
id: 0,
- size: 0,
+ sizes: [],
progress: [],
queue: [],
uploads: {},
@@ -19,12 +19,12 @@ const mutations = {
},
reset: (state) => {
state.id = 0;
- state.size = 0;
+ state.sizes = [];
state.progress = [];
},
addJob: (state, item) => {
state.queue.push(item);
- state.size += item.file.size;
+ state.sizes[state.id] = item.file.size;
state.id++;
},
moveJob(state) {
@@ -33,6 +33,7 @@ const mutations = {
Vue.set(state.uploads, item.id, item);
},
removeJob(state, id) {
+ Vue.delete(state.uploads, id);
delete state.uploads[id];
},
};
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index 1ab4bb65..e1222024 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -99,6 +99,15 @@ export function scanFiles(dt) {
});
}
+function detectType(mimetype) {
+ if (mimetype.startsWith("video")) return "video";
+ if (mimetype.startsWith("audio")) return "audio";
+ if (mimetype.startsWith("image")) return "image";
+ if (mimetype.startsWith("pdf")) return "pdf";
+ if (mimetype.startsWith("text")) return "text";
+ return "blob";
+}
+
export function handleFiles(files, base, overwrite = false) {
for (let i = 0; i < files.length; i++) {
let id = store.state.upload.id;
@@ -120,6 +129,7 @@ export function handleFiles(files, base, overwrite = false) {
path,
file,
overwrite,
+ type: detectType(file.type),
};
store.dispatch("upload/upload", item);
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index e9f306dc..4ccc441f 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <div id="progress">
+ <div v-if="progress" class="progress">
<div v-bind:style="{ width: this.progress + '%' }"></div>
</div>
<sidebar></sidebar>
@@ -9,6 +9,7 @@
<shell v-if="isExecEnabled && isLogged && user.perm.execute" />
</main>
<prompts></prompts>
+ <upload-files></upload-files>
</div>
</template>
@@ -17,6 +18,7 @@ import { mapState, mapGetters } from "vuex";
import Sidebar from "@/components/Sidebar";
import Prompts from "@/components/prompts/Prompts";
import Shell from "@/components/Shell";
+import UploadFiles from "../components/prompts/UploadFiles";
import { enableExec } from "@/utils/constants";
export default {
@@ -25,6 +27,7 @@ export default {
Sidebar,
Prompts,
Shell,
+ UploadFiles,
},
computed: {
...mapGetters(["isLogged", "progress"]),
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index c1b79e65..eefc6453 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -114,7 +114,7 @@
<div class="share__box__header" v-if="req.isDir">
{{ $t("files.files") }}
</div>
- <div id="listing" class="list">
+ <div id="listing" class="list file-icons">
<item
v-for="item in req.items.slice(0, this.showLimit)"
:key="base64(item.name)"
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index fac8608f..4286e8dc 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -146,7 +146,12 @@
multiple
/>
</div>
- <div v-else id="listing" ref="listing" :class="user.viewMode">
+ <div
+ v-else
+ id="listing"
+ ref="listing"
+ :class="user.viewMode + ' file-icons'"
+ >
<div>
<div class="item header">
<div></div>