added functionality to cancel uploads

frontend/src/fileSender.js

@@ -8,6 +8,7 @@ class FileSender extends EventEmitter {
     super();
     this.file = file;
     this.iv = window.crypto.getRandomValues(new Uint8Array(12));
+    this.uploadXHR = new XMLHttpRequest();
   }
 
   static delete(fileId, token) {
@@ -35,6 +36,10 @@ class FileSender extends EventEmitter {
     });
   }
 
+  cancel() {
+    this.uploadXHR.abort();
+  }
+
   upload() {
     const self = this;
     self.emit('loading', true);
@@ -103,7 +108,7 @@ class FileSender extends EventEmitter {
           const fd = new FormData();
           fd.append('data', blob, file.name);
 
-          const xhr = new XMLHttpRequest();
+          const xhr = self.uploadXHR;
 
           xhr.upload.addEventListener('progress', e => {
             if (e.lengthComputable) {

frontend/src/upload.js

@@ -79,8 +79,7 @@ $(document).ready(function() {
     $('.upload-window').removeClass('ondrag');
     $('#page-one').show();
   });
-  //cancel the upload
-  $('#cancel-upload').click(() => {});
+
   // on file upload by browse or drag & drop
   function onUpload(event) {
     event.preventDefault();
@@ -93,6 +92,12 @@ $(document).ready(function() {
     const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field
 
     const fileSender = new FileSender(file);
+    $('#cancel-upload').click(() => {
+      fileSender.cancel();
+      location.reload();
+      notify('Your upload was cancelled.');
+    });
+
     fileSender.on('progress', progress => {
       $('#page-one').hide();
       $('#upload-error').hide();