From 8b44c83741a132ccb3f969580a5faab36b68794b Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sat, 23 Apr 2022 11:35:11 +0200
Subject: [PATCH] Added archive upload UI

---
 app/imports/ui/pages/Files.vue | 56 +++++++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/app/imports/ui/pages/Files.vue b/app/imports/ui/pages/Files.vue
index a6f7e917..8d77f097 100644
--- a/app/imports/ui/pages/Files.vue
+++ b/app/imports/ui/pages/Files.vue
@@ -1,6 +1,9 @@
 <template>
   <v-container>
-    <v-row justify="center">
+    <v-row
+      justify="center"
+      class="mt-2"
+    >
       <file-storage-stats />
     </v-row>
     <v-row dense>
@@ -17,6 +20,37 @@
         >
           <archive-file-card :model="file" />
         </v-col>
+        <v-col
+          key="upload"
+          cols="12"
+          md="4"
+          lg="3"
+          class="layout column justify-center"
+        >
+          <input
+            ref="archiveFileInput"
+            type="file"
+            accept=".json"
+            style="display: none;"
+            @input="inputArchiveFile"
+          >
+          <v-btn
+            outlined
+            style="height: 100%; width: 100%;"
+            :color="archiveFileError ? 'error' : undefined"
+            @click="$refs.archiveFileInput.click()"
+          >
+            <v-icon left>
+              mdi-file-upload-outline
+            </v-icon>
+            <template v-if="archiveFileError">
+              {{ archiveFileError }}
+            </template>
+            <template v-else>
+              Upload archive
+            </template>
+          </v-btn>
+        </v-col>
       </template>
     </v-row>
   </v-container>
@@ -35,6 +69,8 @@ export default {
   },
   data(){ return {
     updateStorageUsedLoading: false,
+    archiveFileError: undefined,
+    archiveFile: undefined,
   }},
   meteor: {
     $subscribe: {
@@ -56,5 +92,23 @@ export default {
       });
     },
   },
+  methods: {
+    inputArchiveFile(){
+      this.archiveFile = undefined;
+      this.archiveFileError = undefined;
+      const file = this.$refs.archiveFileInput.files[0];
+      if (!file) return;
+      if (file.type !== 'application/json'){
+        this.archiveFileError = 'File must be .json';
+        return;
+      }
+      if (file.size > 10000000){
+        this.archiveFileError = 'File too large';
+        return;
+      }
+      this.archiveFile = file;
+      console.log(this.archiveFile);
+    }
+  },
 }
 </script>