these also suffered from issue #307

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>

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,19 +66,14 @@ function allFiltersApplyHandler() {
 
 /******************************************************************************/
 
-function appendToUserFiltersFromFile() {
+function handleImportFilePicker() {
-    var input = uDom('<input />').attr({
-        type: 'file',
-        accept: 'text/plain'
-    });
     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 ) {
+    if ( file === undefined || file.name === '' ) {
         return;
     }
     if ( file.type.indexOf('text') !== 0 ) {
@@ -87,14 +82,21 @@ function appendToUserFiltersFromFile() {
     var fr = new FileReader();
     fr.onload = fileReaderOnLoadHandler;
     fr.readAsText(file);
-        input.off('change', filePickerOnChangeHandler);
-    };
-    input.on('change', filePickerOnChangeHandler);
-    input.trigger('click');
 }
 
 /******************************************************************************/
 
+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
+
 })();
 

js/whitelist.js

@@ -60,20 +60,14 @@ var renderWhitelist = function() {
 
 /******************************************************************************/
 
-var importWhitelistFromFile = function() {
+var handleImportFilePicker = function() {
-    var input = uDom('<input />').attr({
-        type: 'file',
-        accept: 'text/plain'
-    });
     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 ) {
+    if ( file === undefined || file.name === '' ) {
         return;
     }
     if ( file.type.indexOf('text') !== 0 ) {
@@ -82,9 +76,17 @@ var importWhitelistFromFile = function() {
     var fr = new FileReader();
     fr.onload = fileReaderOnLoadHandler;
     fr.readAsText(file);
-    };
+};
-    input.on('change', filePickerOnChangeHandler);
+
-    input.trigger('click');
+/******************************************************************************/
+
+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);

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>