add file and translate button display

app/static/css/main.css

@@ -142,7 +142,7 @@ h3.header {
   border: 1px solid #ccc;
   background: #f3f3f3;
   padding: 1rem 2rem 1rem 1.5rem;
-  height: 220px;
+  min-height: 220px;
   position: relative;
 }
 

app/static/js/app.js

@@ -32,7 +32,8 @@ document.addEventListener('DOMContentLoaded', function(){
             isSuggesting: false,
 
             supportedFilesFormat : [],
-            translationType: "text"
+            translationType: "text",
+            inputFile: false
         },
         mounted: function(){
             var self = this;
@@ -308,6 +309,16 @@ document.addEventListener('DOMContentLoaded', function(){
             },
             switchType: function(type) {
                 this.translationType = type;
+            },
+            handleInputFile: function(e) {
+                this.inputFile = e.target.files[0];
+            },
+            removeFile: function(e) {
+              e.preventDefault()
+              this.inputFile = false;
+            },
+            translateFile: function(e) {
+                e.preventDefault();
             }
         }
     });

app/templates/index.html

@@ -174,13 +174,13 @@
 						</div>
                         <div class="row" v-if="translationType === 'files'">
                             <div class="file-dropzone">
-                                <div class="dropzone-content">
+                                <div v-if="inputFile === false" class="dropzone-content">
                                     <span>Supported file format: [[ supportedFilesFormatFormatted ]]</span>
                                     <form action="#">
                                         <div class="file-field input-field">
                                             <div class="btn">
                                                 <span>File</span>
-                                                <input type="file">
+                                                <input type="file" @change="handleInputFile" ref="fileInputRef">
                                             </div>
                                             <div class="file-path-wrapper hidden">
                                                 <input class="file-path validate" type="text">
@@ -188,6 +188,23 @@
                                         </div>
                                     </form>
                                 </div>
+                                <div v-if="inputFile !== false" class="dropzone-content">
+                                    <div class="card">
+                                        <div class="card-content">
+                                            <div class="row">
+                                                <div class="col s10">
+                                            <p>[[ inputFile.name ]]</p>
+                                                </div>
+                                                <div class="col s2">
+                                                    <button @click="removeFile" class="btn-flat">
+                                                        <i class="material-icons">close</i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <button @click="translateFile" class="btn">Translate</button>
+                                </div>
                             </div>
                         </div>
 					</form>