Fixed #57

WebApp/src/css/_default_styles.less

@@ -843,8 +843,10 @@ form
 
 .filePicker input
 {
-  width: 310px;
+  width: 405px;
   margin-top: 5px;
+  background: @filters-separator;
+  font-style: italic;
 }
 
 .filePicker button
@@ -857,6 +859,13 @@ form
   font-size: larger;
 }
 
+.importDetails
+{
+  color: @todo-priority-default;
+  font-family: 'Courier New', monospace;
+  text-align: center;
+}
+
 .dragOver
 {
   border-color: @import-border-hover;

WebApp/src/js/views/importing.ts

@@ -64,6 +64,8 @@ module TodoTxtJs.View
                 $dropTargetChild.on('dragover', this.dragOver);
                 $dropTargetChild.on('dragleave', this.dragLeave);
                 $dropTargetChild.on('drop', this.drop);
+
+                $('#filePicker').on('change', this.onChange_filePicker);
             });
         }
 
@@ -90,11 +92,6 @@ module TodoTxtJs.View
             this._resetImportData();
         }
 
-        public onClick_PickFile()
-        {
-
-        }
-
         public onClick_Import()
         {
             if (this.replaceImport())
@@ -107,6 +104,16 @@ module TodoTxtJs.View
             this._dialog.dialog("close");
         }
 
+        public onChange_filePicker = (event): boolean =>
+        {
+            if (event.target.files.length > 0)
+            {
+                var file = event.target.files[0];
+                this._readFile(file);
+            }
+            return false;
+        };
+
         private _resetImportData()
         {
             this._enableImportButton(false);
@@ -148,17 +155,22 @@ module TodoTxtJs.View
             if (files.length > 0)
             {
                 var file = files[0];
-                var reader = new FileReader();
+                this._readFile(file);
+            }
+        };
 
-                reader.onloadend = (event): void =>
-                {
-                    this._importData = (<any>event.target).result.split(/\r?\n/);
-                    this.importDetails("Ready to import " + this._importData.length + " entries.");
-                    this._enableImportButton();
-                };
+        private _readFile = (file) =>
+        {
+            var reader = new FileReader();
 
-                reader.readAsText(file, 'UTF-8');
-            }
+            reader.onloadend = (event): void =>
+            {
+                this._importData = (<any>event.target).result.split(/\r?\n/);
+                this.importDetails("Ready to import " + this._importData.length + " entries.");
+                this._enableImportButton();
+            };
+
+            reader.readAsText(file, 'UTF-8');
         };
 
         private _enableImportButton(enable:boolean = true)

WebApp/src/todotxt.html

@@ -349,7 +349,7 @@ <h1>Display</h1>
         </div>
         <div class="fileAlternative">or</div>
         <div class="filePicker">
-            <label><input type="text" readonly></label><button data-bind="click: onClick_PickFile">Pick File</button>
+            <label><input id="filePicker" type="file" /></label>
         </div>
         <div class="importDetails" data-bind="text: importDetails">