Work on general UI for user files

app/imports/api/files/UserImages.js

@@ -0,0 +1,18 @@
+import { createS3FilesCollection } from '/imports/api/files/s3FileStorage.js';
+
+const UserImages = createS3FilesCollection({
+  collectionName: 'userImages',
+  storagePath: Meteor.isDevelopment ? '/DiceCloud/userImages/' : 'assets/app/userImages',
+  onBeforeUpload(file) {
+    // Allow upload files under 10MB
+    if (file.size > 10485760) {
+      return 'Please upload with size equal or less than 10MB';
+    }
+    // Allow common image extensions
+    if (/gif|png|jpe?g|webp/i.test(file.extension || '')) {
+      return 'Please upload an image file only';
+    }
+  }
+});
+
+export default UserImages;

app/imports/ui/layouts/Sidebar.vue

@@ -96,6 +96,7 @@
           {title: 'Library', icon: 'mdi-library-shelves', to: '/library', requireLogin: true},
           //{title: 'Tabletops', icon: 'api', to: '/tabletops', requireLogin: true},
           //{title: 'Friends', icon: 'people', to: '/friends', requireLogin: true},
+          {title: 'Files', icon: 'mdi-file-multiple', to: '/my-files'},
           {title: 'Feedback', icon: 'mdi-bug', to: '/feedback'},
           {title: 'About', icon: 'mdi-sign-text', to: '/about'},
           {title: 'Patreon', icon: 'mdi-patreon', href: 'https://www.patreon.com/dicecloud'},

app/imports/ui/pages/Files.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-container>
+    <v-row>
+      <template v-if="archiveFiles && archiveFiles.length">
+        <v-col cols="12">
+          <v-subheader> Archived Characters </v-subheader>
+        </v-col>
+        <v-col
+          v-for="file in archiveFiles"
+          :key="file._id"
+          cols="12"
+          md="4"
+          lg="3"
+        >
+          <v-card>
+            <v-card-title>
+              {{ file.meta.creatureName }}
+            </v-card-title>
+            <v-card-subtitle>
+              {{ file.size }}
+            </v-card-subtitle>
+            <v-card-actions>
+              <v-btn text>
+                Restore
+              </v-btn>
+              <v-flex />
+              <v-btn
+                icon
+              >
+                <v-icon>mdi-delete</v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                :href="`${file.link}?download=true`"
+              >
+                <v-icon>mdi-download</v-icon>
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </template>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="js">
+import ArchiveCreatureFiles from '/imports/api/creature/archive/ArchiveCreatureFiles.js';
+import prettyBytes from 'pretty-bytes';
+
+export default {
+  meteor: {
+    $subscribe: {
+      'archiveCreatureFiles': [],
+    },
+    archiveFiles() {
+      var userId = Meteor.userId();
+      return ArchiveCreatureFiles.find(
+        {
+          userId,
+        }, {
+          sort: {'size': -1},
+        }
+      ).map(f => {
+        f.json = JSON.stringify(f, null, 2);
+        f.size = prettyBytes(f.size);
+        f.link = ArchiveCreatureFiles.link(f);
+        return f;
+      });
+    },
+  }
+}
+</script>
+
+<style>
+</style>

app/imports/ui/router.js

@@ -30,6 +30,7 @@ const TabletopToolbar = () => import('/imports/ui/tabletop/TabletopToolbar.vue')
 const TabletopRightDrawer = () => import('/imports/ui/tabletop/TabletopRightDrawer.vue');
 const Admin = () => import('/imports/ui/pages/Admin.vue');
 const Maintenance = () => import('/imports/ui/pages/Maintenance.vue');
+const Files = () => import('/imports/ui/pages/Files.vue');
 
 // Not found
 const NotFound = () => import('/imports/ui/pages/NotFound.vue');
@@ -199,8 +200,8 @@ RouterFactory.configure(router => {
       meta: {
         title: 'Register',
       },
-		},{
-			path: '/account',
+    }, {
+      path: '/account',
       components: {
         default: Account,
       },
@@ -208,7 +209,16 @@ RouterFactory.configure(router => {
         title: 'Account',
       },
       beforeEnter: ensureLoggedIn,
-		},{
+    }, {
+      path: '/my-files',
+      components: {
+        default: Files,
+      },
+      meta: {
+        title: 'Files',
+      },
+      beforeEnter: ensureLoggedIn,
+    }, {
       path: '/feedback',
       components: {
         default: Feedback,

app/package-lock.json

@@ -2564,6 +2564,11 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "pretty-bytes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
+      "integrity": "sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg=="
+    },
     "prism-media": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/prism-media/-/prism-media-1.3.1.tgz",
@@ -2788,7 +2793,7 @@
     },
     "signal-exit": {
       "version": "3.0.2",
-      "resolved": false,
+      "resolved": "",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "simpl-schema": {

app/package.json

@@ -40,6 +40,7 @@
     "nearley": "^2.19.1",
     "ngraph.graph": "^19.1.0",
     "ngraph.path": "^1.4.0",
+    "pretty-bytes": "^6.0.0",
     "qrcode": "^1.5.0",
     "request": "^2.88.2",
     "simpl-schema": "^1.12.0",