Fix unbound methods on upload task from $firebaseStorage (#925)

src/storage/FirebaseStorage.js

@@ -34,11 +34,11 @@
           });
         });
       },
-      $cancel: task.cancel,
-      $resume: task.resume,
-      $pause: task.pause,
-      then: task.then,
-      catch: task.catch,
+      $cancel: task.cancel.bind(task),
+      $resume: task.resume.bind(task),
+      $pause: task.pause.bind(task),
+      then: task.then.bind(task),
+      catch: task.catch.bind(task),
       $snapshot: task.snapshot
     };
   }

tests/protractor/upload/upload.html

@@ -23,12 +23,17 @@
       <button id="submit" ng-click="upload()">Submit</button>
     </div>
 
+    <p ng-show="isCanceled" id="canceled">
+      Canceled
+    </p>
+
     <div ng-show="isUploading" id="uploading">
-      {{(metadata.bytesTransferred / metadata.totalBytes)*100}}%<br />
+      <button id="cancel" ng-click="cancel()">Cancel</button>
+      {{((metadata.bytesTransferred / metadata.totalBytes)*100) || 0}}%<br />
     </div>
 
     <br />
-    <div ng-show="metadata.downloadURL" id="url">{{metadata.downloadURL}}</div>
+    <div ng-show="metadata.downloadURL && snapshot" id="url">{{metadata.downloadURL}}</div>
 
     <div ng-show="error">
       {{ error | json }}

tests/protractor/upload/upload.js

@@ -13,27 +13,52 @@ app.controller('UploadCtrl', function Upload($scope, $firebaseStorage, $timeout)
   }
 
   $scope.upload = function() {
-    $scope.isUploading = true;
     $scope.metadata = {bytesTransferred: 0, totalBytes: 1};
     $scope.error = null;
 
     // upload the file
-    const task = storageFire.$put(file);
+    $scope.task = storageFire.$put(file);
+
+    // pause, wait, then resume.
+    $scope.task.$pause();
+    setTimeout(() => {
+      $scope.task.$resume();
+    }, 500);
 
     // monitor progress state
-    task.$progress(metadata => {
+    $scope.task.$progress(metadata => {
+      if (metadata.state === 'running') {
+        $scope.isCanceled = false;
+        $scope.isUploading = true;
+      }
+
       $scope.metadata = metadata;
     });
     // log a possible error
-    task.$error(error => {
+    $scope.task.$error(error => {
       $scope.error = error;
     });
     // log when the upload completes
-    task.$complete(metadata => {
+    $scope.task.$complete(metadata => {
       $scope.isUploading = false;
       $scope.metadata = metadata;
     });
 
+    $scope.task.then(snapshot => {
+      $scope.snapshot = snapshot;
+    });
+
+    $scope.task.catch(error => {
+      $scope.error = error;
+    });
+
+  }
+
+  $scope.cancel = function() {
+    if ($scope.task && $scope.task.$cancel()) {
+      $scope.isCanceled = true;
+      $scope.isUploading = false;
+    }
   }
 
 });

tests/protractor/upload/upload.manual.js

@@ -50,18 +50,37 @@ describe('Upload App', function () {
     expect(browser.getTitle()).toEqual('AngularFire Upload e2e Test');
   });
 
-  it('uploads a file', function (done) {
+  it('uploads a file, cancels the upload task, and tries uploading again', function (done) {
     var fileToUpload = './upload/logo.png';
     var absolutePath = path.resolve(__dirname, fileToUpload);
 
     $('input[type="file"]').sendKeys(absolutePath);
     $('#submit').click();
 
-    var el = element(by.id('url'));
-    browser.driver.wait(protractor.until.elementIsVisible(el))
+    var el;
+    var cancelEl = element(by.id('cancel'));
+
+    browser.driver.wait(protractor.until.elementIsVisible(cancelEl.getWebElement()))
+      .then(function () {
+          $('#cancel').click();
+
+        var canceledEl = element(by.id('canceled'));
+        return browser.driver.wait(protractor.until.elementIsVisible(canceledEl.getWebElement()))
+      })
+      .then(function () {
+        var submitEl = element(by.id('submit'));
+        return browser.driver.wait(protractor.until.elementIsVisible(submitEl.getWebElement()))
+      })
+      .then(function () {
+        $('#submit').click();
+
+        el = element(by.id('url'));
+        return browser.driver.wait(protractor.until.elementIsVisible(el.getWebElement()))
+      })
       .then(function () {
         return el.getText();
-      }).then(function (text) {
+      })
+      .then(function (text) {
         var result = "https://firebasestorage.googleapis.com/v0/b/oss-test.appspot.com/o/user%2F1.png";
         expect(text.slice(0, result.length)).toEqual(result);
         done();