Upload component (#108)

* unified upload button + download backups

* javascript toolings

* fix vuetur config

* fixed type check error

* refactor: clean up bag javascript

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/src/components/UI/UploadBtn.vue

@@ -1,24 +1,61 @@
 <template>
   <v-form ref="file">
-    <v-file-input
-      :loading="loading"
-      :label="$t('migration.upload-an-archive')"
-      v-model="file"
-      accept=".zip"
-      @change="upload"
-      :prepend-icon="icon"
-      class="file-icon"
+    <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
+    <v-btn
+      :loading="isSelecting"
+      @click="onButtonClick"
+      color="success"
+      text
     >
-    </v-file-input>
-    <v-btn color="success" text class="ma-2 white--text">
+      <v-icon left > mdi-cloud-upload </v-icon>
       Upload
-      <v-icon right dark> mdi-cloud-upload </v-icon>
     </v-btn>
   </v-form>
 </template>
 
 <script>
-export default {};
+import api from "../../api";
+export default {
+  props: {
+    url: String,
+  },
+  data: () => ({
+    defaultButtonText: "Upload",
+    file: null,
+    isSelecting: false,
+  }),
+
+  methods: {
+    async upload() {
+      if (this.file != null) {
+        this.isSelecting = true;
+        let formData = new FormData();
+        formData.append("archive", this.file);
+
+        await api.utils.uploadFile(this.url, formData);
+
+        this.isSelecting = false;
+        this.$emit("uploaded");
+      }
+    },
+    onButtonClick() {
+      this.isSelecting = true;
+      window.addEventListener(
+        "focus",
+        () => {
+          this.isSelecting = false;
+        },
+        { once: true }
+      );
+
+      this.$refs.uploader.click();
+    },
+    onFileChanged(e) {
+      this.file = e.target.files[0];
+      this.upload();
+    },
+  },
+};
 </script>
 
 <style>