From dbd36b24a090deae60b8648bc5f27298877f2144 Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Mon, 13 Oct 2014 11:01:31 -0400
Subject: [PATCH] these also suffered from issue #307

---
 1p-filters.html  |  1 +
 js/1p-filters.js | 49 ++++++++++++++++++++++++++----------------------
 js/whitelist.js  | 45 +++++++++++++++++++++++---------------------
 whitelist.html   |  1 +
 4 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/1p-filters.html b/1p-filters.html
index 402231678..2b343211d 100644
--- a/1p-filters.html
+++ b/1p-filters.html
@@ -13,6 +13,7 @@
 <div>
     <p data-i18n="1pFormatHint"></p>
     <p><button id="importUserFiltersFromFile" data-i18n="1pImport"></button> &emsp; <button id="exportUserFiltersToFile" data-i18n="1pExport"></button></p>
+    <input id="importFilePicker" type="file" accept="text/plain" style="display:none;">
     <textarea class="userFilters" id="userFilters" dir="auto" spellcheck="false"></textarea>
     <p><button id="userFiltersApply" disabled="true" data-i18n="1pApplyChanges"></button></p>
 </div>
diff --git a/js/1p-filters.js b/js/1p-filters.js
index 0c701a5db..037692c81 100644
--- a/js/1p-filters.js
+++ b/js/1p-filters.js
@@ -37,7 +37,7 @@ messaging.start('1p-filters.js');
 
 // This is to give a visual hint that the content of user blacklist has changed.
 
-function userFiltersChanged(ev) {
+function userFiltersChanged() {
     uDom('#userFiltersApply').prop(
         'disabled',
         uDom('#userFilters').val().trim() === cachedUserFilters
@@ -66,35 +66,37 @@ function allFiltersApplyHandler() {
 
 /******************************************************************************/
 
-function appendToUserFiltersFromFile() {
-    var input = uDom('<input />').attr({
-        type: 'file',
-        accept: 'text/plain'
-    });
+function handleImportFilePicker() {
     var fileReaderOnLoadHandler = function() {
         var textarea = uDom('#userFilters');
         textarea.val([textarea.val(), this.result].join('\n').trim());
         userFiltersChanged();
     };
-    var filePickerOnChangeHandler = function() {
-        var file = this.files[0];
-        if ( !file ) {
-            return;
-        }
-        if ( file.type.indexOf('text') !== 0 ) {
-            return;
-        }
-        var fr = new FileReader();
-        fr.onload = fileReaderOnLoadHandler;
-        fr.readAsText(file);
-        input.off('change', filePickerOnChangeHandler);
-    };
-    input.on('change', filePickerOnChangeHandler);
-    input.trigger('click');
+    var file = this.files[0];
+    if ( file === undefined || file.name === '' ) {
+        return;
+    }
+    if ( file.type.indexOf('text') !== 0 ) {
+        return;
+    }
+    var fr = new FileReader();
+    fr.onload = fileReaderOnLoadHandler;
+    fr.readAsText(file);
 }
 
 /******************************************************************************/
 
+var startImportFilePicker = function() {
+    var input = document.getElementById('importFilePicker');
+    // Reset to empty string, this will ensure an change event is properly
+    // triggered if the user pick a file, even if it is the same as the last
+    // one picked.
+    input.value = '';
+    input.click();
+};
+
+/******************************************************************************/
+
 function exportUserFiltersToFile() {
     chrome.downloads.download({
         'url': 'data:text/plain,' + encodeURIComponent(uDom('#userFilters').val()),
@@ -125,7 +127,8 @@ function userFiltersApplyHandler() {
 
 uDom.onLoad(function() {
     // Handle user interaction
-    uDom('#importUserFiltersFromFile').on('click', appendToUserFiltersFromFile);
+    uDom('#importUserFiltersFromFile').on('click', startImportFilePicker);
+    uDom('#importFilePicker').on('change', handleImportFilePicker);
     uDom('#exportUserFiltersToFile').on('click', exportUserFiltersToFile);
     uDom('#userFilters').on('input', userFiltersChanged);
     uDom('#userFiltersApply').on('click', userFiltersApplyHandler);
@@ -135,5 +138,7 @@ uDom.onLoad(function() {
 
 /******************************************************************************/
 
+// https://www.youtube.com/watch?v=UNilsLf6eW4
+
 })();
 
diff --git a/js/whitelist.js b/js/whitelist.js
index d100c2389..ee306f505 100644
--- a/js/whitelist.js
+++ b/js/whitelist.js
@@ -60,31 +60,33 @@ var renderWhitelist = function() {
 
 /******************************************************************************/
 
-var importWhitelistFromFile = function() {
-    var input = uDom('<input />').attr({
-        type: 'file',
-        accept: 'text/plain'
-    });
+var handleImportFilePicker = function() {
     var fileReaderOnLoadHandler = function() {
         var textarea = uDom('#whitelist');
         textarea.val([textarea.val(), this.result].join('\n').trim());
         whitelistChanged();
     };
-    var filePickerOnChangeHandler = function() {
-        input.off('change', filePickerOnChangeHandler);
-        var file = this.files[0];
-        if ( !file ) {
-            return;
-        }
-        if ( file.type.indexOf('text') !== 0 ) {
-            return;
-        }
-        var fr = new FileReader();
-        fr.onload = fileReaderOnLoadHandler;
-        fr.readAsText(file);
-    };
-    input.on('change', filePickerOnChangeHandler);
-    input.trigger('click');
+    var file = this.files[0];
+    if ( file === undefined || file.name === '' ) {
+        return;
+    }
+    if ( file.type.indexOf('text') !== 0 ) {
+        return;
+    }
+    var fr = new FileReader();
+    fr.onload = fileReaderOnLoadHandler;
+    fr.readAsText(file);
+};
+
+/******************************************************************************/
+
+var startImportFilePicker = function() {
+    var input = document.getElementById('importFilePicker');
+    // Reset to empty string, this will ensure an change event is properly
+    // triggered if the user pick a file, even if it is the same as the last
+    // one picked.
+    input.value = '';
+    input.click();
 };
 
 /******************************************************************************/
@@ -112,7 +114,8 @@ var whitelistApplyHandler = function() {
 /******************************************************************************/
 
 uDom.onLoad(function() {
-    uDom('#importWhitelistFromFile').on('click', importWhitelistFromFile);
+    uDom('#importWhitelistFromFile').on('click', startImportFilePicker);
+    uDom('#importFilePicker').on('change', handleImportFilePicker);
     uDom('#exportWhitelistToFile').on('click', exportWhitelistToFile);
     uDom('#whitelist').on('input', whitelistChanged);
     uDom('#whitelistApply').on('click', whitelistApplyHandler);
diff --git a/whitelist.html b/whitelist.html
index ce97b1bca..ea79f4984 100644
--- a/whitelist.html
+++ b/whitelist.html
@@ -13,6 +13,7 @@
 <div>
     <p data-i18n="whitelistPrompt"></p>
     <p><button id="importWhitelistFromFile" data-i18n="whitelistImport"></button> &emsp; <button id="exportWhitelistToFile" data-i18n="whitelistExport"></button></p>
+    <input id="importFilePicker" type="file" accept="text/plain" style="display:none;">
     <textarea id="whitelist" dir="auto" spellcheck="false"></textarea>
     <p><button id="whitelistApply" type="button" disabled="true" data-i18n="whitelistApply"></button></p>
 </div>