Merge pull request #226 from mozilla/cancel_uploads

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();

server/server.js

@@ -219,6 +219,19 @@ app.post('/upload', (req, res, next) => {
       });
     });
   });
+
+  req.on('close', err => {
+    storage
+      .forceDelete(newId)
+      .then(err => {
+        if (!err) {
+          log.info('Deleted:', newId);
+        }
+      })
+      .catch(err => {
+        log.info('DeleteError:', newId);
+      });
+  })
 });
 
 app.get('/__lbheartbeat__', (req, res) => {

server/storage.js

@@ -234,13 +234,13 @@ function awsDelete(id, delete_token) {
       if (!reply || delete_token !== reply) {
         reject();
       } else {
-        redis_client.del(id);
         const params = {
           Bucket: conf.s3_bucket,
           Key: id
         };
 
         s3.deleteObject(params, function(err, _data) {
+          redis_client.del(id);
           err ? reject(err) : resolve(err);
         });
       }
@@ -250,13 +250,13 @@ function awsDelete(id, delete_token) {
 
 function awsForceDelete(id) {
   return new Promise((resolve, reject) => {
-    redis_client.del(id);
     const params = {
       Bucket: conf.s3_bucket,
       Key: id
     };
 
     s3.deleteObject(params, function(err, _data) {
+      redis_client.del(id);
       err ? reject(err) : resolve(err);
     });
   });