From 5e64499a1515039c0ffcb8c0d37046e4a957ad4f Mon Sep 17 00:00:00 2001
From: Martin Gill <martin@martinsgill.co.uk>
Date: Sat, 31 Jan 2015 16:35:58 +0100
Subject: [PATCH] Fixed #57

---
 WebApp/src/css/_default_styles.less | 11 +++++++-
 WebApp/src/js/views/importing.ts    | 40 +++++++++++++++++++----------
 WebApp/src/todotxt.html             |  2 +-
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/WebApp/src/css/_default_styles.less b/WebApp/src/css/_default_styles.less
index 4568bf4..e6a7473 100644
--- a/WebApp/src/css/_default_styles.less
+++ b/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;
diff --git a/WebApp/src/js/views/importing.ts b/WebApp/src/js/views/importing.ts
index d277277..2a9f4bd 100644
--- a/WebApp/src/js/views/importing.ts
+++ b/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)
diff --git a/WebApp/src/todotxt.html b/WebApp/src/todotxt.html
index 92d62eb..7d59722 100644
--- a/WebApp/src/todotxt.html
+++ b/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">