Use Ajax to send files in receive mode to workaround browser bug with large files

2 files changed, 47 insertions, 3 deletions

diff --git a/share/static/js/receive.js b/share/static/js/receive.js
new file mode 100644
index 00000000..ed4d87e0
--- /dev/null
+++ b/share/static/js/receive.js
@@ -0,0 +1,43 @@
+var form = document.getElementById('send');
+var fileSelect = document.getElementById('file-select');
+var uploadButton = document.getElementById('send-button');
+
+form.onsubmit = function(event) {
+  event.preventDefault();
+
+  // Update button text.
+  uploadButton.innerHTML = 'Uploading...';
+
+  // Get the selected files from the input.
+  var files = fileSelect.files;
+
+  // Create a new FormData object.
+  var formData = new FormData();
+
+  // Loop through each of the selected files.
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+
+    // Add the file to the request.
+    formData.append('file[]', file, file.name);
+  }
+
+  // Set up the request.
+  var xhr = new XMLHttpRequest();
+
+  // Open the connection.
+  xhr.open('POST', window.location.pathname + '/upload', true);
+
+  xhr.onload = function() {
+      if (xhr.status == 200) {
+          uploadButton.innerHTML = 'Send Files';
+          if (document.getElementByClassName('flashes') !=null)
+            var flashes = document.getElementByClassName('flashes')
+          }
+      }
+  }
+
+  // Send the Data.
+  xhr.send(formData);
+}
+
diff --git a/share/templates/receive.html b/share/templates/receive.html
index e85b6ff9..5d2741ed 100644
--- a/share/templates/receive.html
+++ b/share/templates/receive.html
@@ -17,9 +17,9 @@
         <p><img class="logo" src="/static/img/logo_large.png" title="OnionShare"></p>
         <p class="upload-header">Send Files</p>
         <p class="upload-description">Select the files you want to send, then click "Send Files"...</p>
-        <form method="post" enctype="multipart/form-data" action="{{ upload_action }}">
-           <p><input type="file" name="file[]" multiple /></p>
-           <p><input type="submit" class="button" value="Send Files" /></p>
+        <form id="send" method="post" enctype="multipart/form-data" action="{{ upload_action }}">
+           <p><input type="file" id="file-select" name="file[]" multiple /></p>
+           <p><button type="submit" id="send-button" class="button">Send Files</button></p>
            <div>
              {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
@@ -34,5 +34,6 @@
         </form>
       </div>
     </div>
+    <script src="/static/js/receive.js"></script>
   </body>
 </html>