threshold ui 추가

@@ -2,7 +2,9 @@
   <v-sheet>
     <v-overlay v-model="loadingProcess">
       <v-progress-circular :size="120" width="10" color="primary" indeterminate></v-progress-circular>
-      <div style="color: #ffffff; font-size: 22px; margin-top: 20px; margin-left: -30px;">Analyzing Your Video...</div>
+      <div
+        style="color: #ffffff; font-size: 22px; margin-top: 20px; margin-left: -30px;"
+      >Analyzing Your Video...</div>
     </v-overlay>
     <v-layout justify-center>
       <v-flex xs12 sm8 md6 lg4>
@@ -25,7 +27,10 @@
             </v-flex>
             <v-flex md5>
               <v-card width="240" elevation="0" class="ml-5">
-                <v-img width="240" src="http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1/uploads/b70e4a173c2b7d5fa6ab73d48582dd6e/youtubelogoBlack.326653df.png"></v-img>
+                <v-img
+                  width="240"
+                  src="http://khuhub.khu.ac.kr/2020-1-capstone-design1/PKH_Project1/uploads/b70e4a173c2b7d5fa6ab73d48582dd6e/youtubelogoBlack.326653df.png"
+                ></v-img>
               </v-card>
             </v-flex>
           </v-row>
@@ -63,11 +68,25 @@
               @dragenter.prevent
               @drop.prevent="onDrop"
             >
-              <v-btn style="text-transform: none" @click="clickUploadButton" text large color="primary">CLICK or DRAG & DROP</v-btn>
+              <v-btn
+                style="text-transform: none"
+                @click="clickUploadButton"
+                text
+                large
+                color="primary"
+              >CLICK or DRAG & DROP</v-btn>
               <input ref="fileInput" style="display: none" type="file" @change="onFileChange" />
             </v-card>
           </v-row>
-
+          <div
+            style="font-size: 20px; font-weight: 300; color: #888; text-align: center; margin-top: 20px; margin-bottom: 18px"
+          >
+            <div>And Set up Threshold of</div>
+            <div>recommended Youtube link</div>
+          </div>
+          <v-row justify="center" class="mx-12">
+            <v-slider v-model="slider" :thumb-size="20" thumb-label="always" :min="20" :max="80" ></v-slider>
+          </v-row>
           <div
             style="font-size: 24px; text-align: center; font-weight: 400; color: #5a5a5a;"
             class="mt-10"
@@ -111,6 +130,7 @@ export default {
       videoFile: '',
       YoutubeUrl: [],
       generatedTag: [],
+      threshold: 20,
       successDialog: false,
       errorDialog: false,
       loadingProcess: false,
@@ -120,20 +140,25 @@ export default {
     this.YoutubeUrl = [];
     this.generatedTag = [];
   },
-
   methods: {
     loadVideoInfo() {},
     uploadVideo(files) {
       this.loadingProcess = true;
       const formData = new FormData();
       formData.append('file', files[0]);
+      formData.append('threshold', this.threshold);
       console.log(files[0]);
-      this.$axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
+      this.$axios
+        .post('/upload', formData, {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        })
         .then((r) => {
           this.loadingProcess = false;
+          this.successDialog = true;
           console.log(r);
         })
         .catch((e) => {
+          this.errorDialog = true;
           console.log(e.message);
         });
     },