From 75c08db7221515e54ef98aec1a114f7e9c5a5c85 Mon Sep 17 00:00:00 2001
From: CzBiX <gliuwr@gmail.com>
Date: Fri, 10 May 2019 15:43:36 +0800
Subject: [PATCH] Support upload torrent files

---
 src/Api.ts                 | 20 +++++++--
 src/components/AddForm.vue | 88 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 101 insertions(+), 7 deletions(-)

diff --git a/src/Api.ts b/src/Api.ts
index 95ac455..63c96e5 100644
--- a/src/Api.ts
+++ b/src/Api.ts
@@ -46,9 +46,23 @@ class Api {
     });
   }
 
-  public addTorrents(params: any) {
-    const data = new URLSearchParams(params);
-    return this.axios.post('/torrents/add', data);
+  public addTorrents(params: any, torrents?: any) {
+    let data: any;
+    if (torrents) {
+      const formData = new FormData();
+      for (const [key, value] of Object.entries(params)) {
+        formData.append(key, value);
+      }
+
+      for (const torrent of torrents) {
+        formData.append('torrents', torrent);
+      }
+
+      data = formData;
+    } else {
+      data = new URLSearchParams(params);
+    }
+    return this.axios.post('/torrents/add', data).then(this.handleResponse);
   }
 
   public switchToOldUi() {
diff --git a/src/components/AddForm.vue b/src/components/AddForm.vue
index b369a1a..107d72d 100644
--- a/src/components/AddForm.vue
+++ b/src/components/AddForm.vue
@@ -23,21 +23,40 @@
         <v-card-text>
           <v-form
             v-model="valid"
+            ref="form"
           >
             <v-container pa-0 v-bind="{ [`grid-list-${$vuetify.breakpoint.name}`]: true }">
               <v-layout wrap>
-                <v-flex xs12>
+                <v-flex
+                  xs12
+                  ref="fileZone"
+                >
+                  <div
+                    v-show="files.length"
+                    class="files grey lighten-4 align-center justify-space-between subheading font-weight-medium pl-2"
+                    @click="selectFiles"
+                  >
+                    <input ref="file" type="file" multiple class="d-none" @change="onFilesChanged">
+                    <span v-if="files.length == 1">Selected file: {{ files[0].name }}</span>
+                    <span v-else>Selected {{ files.length }} files.</span>
+                    <v-btn icon @click.stop="files = []">
+                      <v-icon>mdi-close</v-icon>
+                    </v-btn>
+                  </div>
                   <v-textarea
-                    name="urls"
+                    v-show="!files.length"
                     label="URLs"
                     hint="One link per line"
+                    :placeholder="'Upload torrents by drop them here,\nor click attachment button at right to select.'"
                     prepend-icon="mdi-link"
-                    :rules="[v => !!v || 'URLs is required']"
+                    append-outer-icon="mdi-attachment"
+                    :rules="[v => (!!files.length || !!v || 'URLs is required')]"
                     :rows="$vuetify.breakpoint.xsOnly ? 1 : 3"
                     required
                     autofocus
                     :value="params.urls"
                     @input="setParams('urls', $event)"
+                    @click:append-outer="selectFiles"
                   />
                 </v-flex>
                 <v-flex>
@@ -69,6 +88,11 @@
               </v-layout>
             </v-container>
           </v-form>
+          <v-alert
+            type="warning"
+            :value="error"
+            v-text="error"
+          />
         </v-card-text>
         <v-card-actions>
           <!-- <v-btn flat>More</v-btn> -->
@@ -111,7 +135,9 @@ export default Vue.extend({
     return {
       dialog: false,
       valid: false,
+      files: [],
       userParams: {},
+      error: null,
       submitting: false,
     };
   },
@@ -139,6 +165,12 @@ export default Vue.extend({
   created() {
     defaultParams.paused = this.prefs.start_paused_enabled;
   },
+  mounted() {
+    this.$refs.fileZone.addEventListener('drop', this.onDrop, true);
+  },
+  beforeDestroy() {
+    this.$refs.fileZone.removeEventListener('drop', this.onDrop, true);
+  },
 
   methods: {
     setParams(key: string, value: any){
@@ -154,11 +186,47 @@ export default Vue.extend({
       }
 
       this.submitting = true;
-      const resp = await api.addTorrents(this.userParams);
+      this.error = null;
+      const files = this.files.length ? this.files : null;
+
+      try {
+        const resp = await api.addTorrents(this.userParams, files);
+
+        if (resp !== 'Ok.') {
+          this.error = resp;
+        }
+      } catch (e) {
+        this.error = e.message
+      }
 
       this.submitting = false;
+
+      if (this.error) {
+        return;
+      }
+
       this.dialog = false;
+
       this.userParams.urls = null;
+      this.files = [];
+
+      this.$refs.form.resetValidation();
+    },
+    selectFiles() {
+      this.$refs.file.click();
+    },
+    onFilesChanged() {
+      this.files = this.$refs.file.files;
+    },
+    onDrop(e: DragEvent) {
+      const transfer = e.dataTransfer!;
+      const files = transfer.files;
+      if (!files.length) {
+        return;
+      }
+
+      e.preventDefault();
+      this.files = files;
     },
   },
 
@@ -175,6 +243,9 @@ export default Vue.extend({
 
       this.$emit('input', null);
     },
+    files(v) {
+      this.$refs.form.validate();
+    },
   },
 });
 </script>
@@ -183,4 +254,13 @@ export default Vue.extend({
 .btn-add.with-footer {
   margin-bottom: 36px;
 }
+
+.files {
+  display: flex;
+  height: 3em;
+
+  border: 1px dashed;
+  border-color: grey !important;
+  border-radius: 2px;
+}
 </style>