From ffc002b240fb8bd7f5cabd7bbbb64aa8162a99f2 Mon Sep 17 00:00:00 2001
From: Natanel Shitrit <natanelsht@gmail.com>
Date: Thu, 13 Aug 2020 13:53:30 +0300
Subject: [PATCH] Fix - when uploading multiple files, not everything is
 uploaded. Added button to browse files for includes.

---
 src/css/spider.css |  8 +++++
 src/index.html     |  3 +-
 src/js/spider.js   | 85 ++++++++++++++++++++++++++--------------------
 3 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/src/css/spider.css b/src/css/spider.css
index b82664f..5152060 100644
--- a/src/css/spider.css
+++ b/src/css/spider.css
@@ -470,3 +470,11 @@ html.dark .ace_search {
 #include-drop.hover:first-child {
   border-top-color: #31708f;
 }
+
+#upload_link{
+    text-decoration:none;
+}
+
+#include-select{
+    display:none
+}
diff --git a/src/index.html b/src/index.html
index adada51..b399363 100644
--- a/src/index.html
+++ b/src/index.html
@@ -97,7 +97,8 @@
         </div>
         <ul id="includes" class="list-group">
           <li id="include-drop" class="list-group-item text-muted text-center">
-            <span class="trans">Drop</span> <strong>.inc</strong> <span class="trans">files here</span>
+			<input class="file-upload__input" type="file" id="include-select" accept="text/plain,.sma,.inl,.sp,.inc" multiple>
+            <span class="trans">Drop</span> <strong>.inc</strong> <span class="trans">files here</span> <a href="#" id="upload_link">(or click here to browse files)</a>
           </li>
         </ul>
         <div id="footer">
diff --git a/src/js/spider.js b/src/js/spider.js
index 8220e15..2ded7f6 100644
--- a/src/js/spider.js
+++ b/src/js/spider.js
@@ -138,6 +138,8 @@
 
   var includes = document.getElementById('includes');
   var includeDrop = document.getElementById('include-drop');
+  var includeSelect = document.getElementById('include-select');
+  var includeSelectText = document.getElementById('upload_link');
 
   var theme;
 
@@ -514,54 +516,63 @@
 
   includeDrop.ondrop = function(event) {
     includeDrop.classList.remove('hover');
+	
+    for (var i = 0; i < event.dataTransfer.files.length; i++) {
+	  setupReader(event.dataTransfer.files[i]);
+    }
+	
+    event.stopPropagation();
+    event.preventDefault();
+  };
 
-    for (var i = 0; i < event.dataTransfer.files.length; ++i) {
-      var file = event.dataTransfer.files[i];
+  includeSelectText.onclick = function() {
+      includeSelect.click();
+  };
 
-      if (!file.type.match(/^text\//) && !file.name.match(/\.(sma|inl|sp|inc)$/)) {
-        continue;
-      }
+  includeSelect.onchange = function(event) {
+	for (var i = 0; i < event.target.files.length; i++) {
+      setupReader(event.target.files[i]);
+    }
+  }
 
-      var reader = new FileReader();
-      reader.onload = (function() {
-        return function(event) {
-          var exists = (localStorage['/extra/' + file.name] !== undefined);
-          localStorage['/extra/' + file.name] = event.target.result;
+  function setupReader(file) {
+    if (!file.type.match(/^text\//) && !file.name.match(/\.(sma|inl|sp|inc)$/)) {
+      return;
+    }
 
-          if (exists) {
-            return;
-          }
+    var reader = new FileReader();
+    reader.onload = function(e) {
+	  var exists = (localStorage['/extra/' + file.name] !== undefined);
+      localStorage['/extra/' + file.name] = event.target.result;
 
-          var li = document.createElement('li');
-          li.classList.add('list-group-item');
+      if (exists) {
+        return;
+      }
 
-          var close = document.createElement('button');
-          close.type = 'button';
-          close.classList.add('close');
-          close.textContent = '\u00D7';
-          close.onclick = function() {
-            delete localStorage['/extra/' + file.name];
-            includes.removeChild(li);
-          };
+      var li = document.createElement('li');
+      li.classList.add('list-group-item');
 
-          var display = document.createElement('ol');
-          var olli = document.createElement('li');
-          olli.textContent = file.name;
-          display.appendChild(olli);
+      var close = document.createElement('button');
+      close.type = 'button';
+      close.classList.add('close');
+      close.textContent = '\u00D7';
+      close.onclick = function() {
+        delete localStorage['/extra/' + file.name];
+        includes.removeChild(li);
+      };
 
-          li.appendChild(close);
-          li.appendChild(display);
+      var display = document.createElement('ol');
+      var olli = document.createElement('li');
+      olli.textContent = file.name;
+      display.appendChild(olli);
 
-          includes.insertBefore(li, includeDrop);
-        };
-      })();
+      li.appendChild(close);
+      li.appendChild(display);
 
-      reader.readAsText(file);
+      includes.insertBefore(li, includeDrop);
     }
-
-    event.stopPropagation();
-    event.preventDefault();
-  };
+    reader.readAsText(file);
+  }
 
   input.container.ondragenter = function(event) {
     event.dataTransfer.dropEffect = 'copy';