Added upload file feature

src/ui/css/style.css

@@ -86,6 +86,15 @@ div, span {
     float: left;
 }
 
+.uploadBtnContainer {
+    float: left;
+}
+
+.fileNameContainer {
+    float: left;
+    margin-right: 10px;
+}
+
 #domainDefs {
     margin-top: 30px;
 }
@@ -418,6 +427,12 @@ div, span {
     text-align: center;
 }
 
+.uploadedFileName {
+    flex: 0 0 55px;
+    text-align: center;
+    padding-top: 10px;
+}
+
 .ruleContainer .fileType {
     flex: 0 0 75px;
     padding-top: 8px;

src/ui/devtoolstab.html

@@ -82,8 +82,16 @@
         <div class="arrow">
             To:
         </div>
-        <div class="edit">
-            <button class="btn edit-btn">Edit File</button>
+        <div class="upload">
+            <div class="fileNameContainer">
+                <div class="uploadedFileName">
+                    No File Selected
+                </div>
+            </div>
+            <div class="uploadBtnContainer">
+                <input style="display:none" class="file-btn" type="file" id="file" name="filename">
+                <button class="btn upload-btn">Upload File</button>            
+            </div>
         </div>
         <div class="switch"></div>
         <div class="delete">

src/ui/devtoolstab.js

@@ -11,10 +11,14 @@
     app.requestHeadersSuggest = app.suggest();
     app.responseHeadersSuggest = app.suggest();
     app.files = {};
+    app.fileNames = {};
+
     app.skipNextSync = false;
 
     function renderData() {
         app.files = {};
+        app.fileNames = {};
+
         ui.domainDefs.children().remove();
         chrome.runtime.sendMessage({action: "getDomains"}, function(domains) {
             if (domains.length) {

src/ui/fileRule.js

@@ -1,4 +1,4 @@
-(function() {
+(function () {
     "use strict";
 
     /* globals $ */
@@ -13,9 +13,11 @@
 
         const override = util.instanceTemplate(ui.fileOverrideTemplate);
         const matchInput = override.find(".matchInput");
-        const editBtn = override.find(".edit-btn");
         const ruleOnOff = override.find(".onoffswitch");
         const deleteBtn = override.find(".sym-btn");
+        const uploadBtn = override.find(".upload-btn");
+        const fileBtn = override.find(".file-btn");
+        const fileName = override.find(".uploadedFileName");
 
         matchInput.val(savedData.match || "");
         util.makeFieldRequired(matchInput);
@@ -25,8 +27,22 @@
             override.addClass("disabled");
         }
 
-        editBtn.on("click", function() {
-            app.editor.open(override[0].id, matchInput.val(), false, saveFunc);
+        uploadBtn.on("click", function () {
+            document.getElementById('file').click();
+        });
+
+
+        fileBtn.on("change", function () {
+            const selectedFile = document.getElementById('file').files[0];
+
+            var reader = new FileReader();
+            reader.onload = function (event) {
+                app.files[override[0].id] = event.target.result;
+                app.fileNames[override[0].id] = selectedFile.name;
+                saveFunc();
+                fileName.text(selectedFile.name);
+            };
+            reader.readAsText(selectedFile);
         });
 
         deleteBtn.on("click", function() {
@@ -61,6 +77,7 @@
 
         if (savedData.file) {
             app.files[id] = savedData.file;
+            fileName.text(savedData.fileName);
         }
 
         return override;

src/ui/tabGroup.js

@@ -67,6 +67,7 @@
                     type: "fileOverride",
                     match: $el.find(".matchInput").val(),
                     file: app.files[el.id] || "",
+                    fileName: app.fileNames[el.id] || "No File Selected",
                     fileId: el.id,
                     on: $el.find(".onoffswitch")[0].isOn
                 });