Use FileReader to base64 encode attachments

* Implements #82

js/background.js

@@ -21,12 +21,13 @@ textsecure.registerOnLoadFunction(function() {
 	} else {
 		if (isRegistrationDone()) {
 			textsecure.subscribeToPush(function(message) {
-				Whisper.Messages.addIncomingMessage(message);
-				console.log("Got message from " + message.pushMessage.source + "." + message.pushMessage.sourceDevice +
-							': "' + getString(message.message.body) + '"');
-				var newUnreadCount = textsecure.storage.getUnencrypted("unreadCount", 0) + 1;
-				textsecure.storage.putUnencrypted("unreadCount", newUnreadCount);
-				extension.navigator.setBadgeText(newUnreadCount);
+				Whisper.Messages.addIncomingMessage(message).then(function() {
+					console.log("Got message from " + message.pushMessage.source + "." + message.pushMessage.sourceDevice +
+								': "' + getString(message.message.body) + '"');
+					var newUnreadCount = textsecure.storage.getUnencrypted("unreadCount", 0) + 1;
+					textsecure.storage.putUnencrypted("unreadCount", newUnreadCount);
+					extension.navigator.setBadgeText(newUnreadCount);
+				});
 			});
 		}
 	}

js/models/messages.js

@@ -30,27 +30,36 @@ var Whisper = Whisper || {};
 
     addIncomingMessage: function(decrypted) {
       //TODO: The data in decrypted (from subscribeToPush) should already be cleaned up
-      var attachments = [];
-      for (var i = 0; i < decrypted.message.attachments.length; i++)
-        attachments[i] = "data:" + decrypted.message.attachments[i].contentType + ";base64," + btoa(getString(decrypted.message.attachments[i].decrypted));
-
-      var thread = Whisper.Threads.findOrCreateForIncomingMessage(decrypted);
-      var timestamp = decrypted.pushMessage.timestamp.toNumber();
-      var m = thread.messages().add({
-        person: decrypted.pushMessage.source,
-        threadId: thread.id,
-        body: decrypted.message.body,
-        attachments: attachments,
-        type: 'incoming',
-        timestamp: timestamp
-      });
-      m.save();
+      return Promise.all(decrypted.message.attachments.map(function(a) {
+        return new Promise(function(resolve, reject) {
+          var dataView = new DataView(a.decrypted);
+          var blob = new Blob([dataView], { type: a.contentType });
+          var FR = new FileReader();
+          FR.onload = function(e) {
+            resolve(e.target.result);
+          };
+          FR.onerror = reject;
+          FR.readAsDataURL(blob);
+        });
+      })).then(function(base64_attachments) {
+        var thread = Whisper.Threads.findOrCreateForIncomingMessage(decrypted);
+        var timestamp = decrypted.pushMessage.timestamp.toNumber();
+        var m = thread.messages().add({
+          person: decrypted.pushMessage.source,
+          threadId: thread.id,
+          body: decrypted.message.body,
+          attachments: base64_attachments,
+          type: 'incoming',
+          timestamp: timestamp
+        });
+        m.save();
 
-      if (timestamp > thread.get('timestamp')) {
-        thread.set('timestamp', timestamp);
-      }
-      thread.save({unreadCount: thread.get('unreadCount') + 1, active: true});
-      return m;
+        if (timestamp > thread.get('timestamp')) {
+          thread.set('timestamp', timestamp);
+        }
+        thread.save({unreadCount: thread.get('unreadCount') + 1, active: true});
+        return m;
+      });
     }
 
   }))();

js/models/threads.js

@@ -22,37 +22,41 @@ var Whisper = Whisper || {};
     },
 
     sendMessage: function(message, attachments) {
-      var timestamp = Date.now();
-      var base64_attachments = _.map(attachments, function(a) {
-        return ['data:', a.contentType, ';base64,', btoa(getString(a.data))].join('');
-      });
-
-      this.messages().add({ type: 'outgoing',
-                            body: message,
-                            threadId: this.id,
-                            attachments: base64_attachments,
-                            timestamp: timestamp }).save();
-
-
-      this.save({ timestamp:   timestamp,
-                  unreadCount: 0,
-                  active:      true});
-
-      if (this.get('type') == 'private') {
-        var promise = textsecure.messaging.sendMessageToNumber(this.get('id'), message, attachments)
-      }
-      else {
-        var promise = textsecure.messaging.sendMessageToGroup(this.get('groupId'), message, attachments);
-      }
-      promise.then(
-        function(result) {
-          console.log(result);
+      return Promise.all(attachments.map(function(a) {
+        return new Promise(function(resolve, reject) {
+          var dataView = new DataView(a.data);
+          var blob = new Blob([dataView], { type: a.contentType });
+          var FR = new FileReader();
+          FR.onload = function(e) {
+            resolve(e.target.result);
+          };
+          FR.onerror = reject;
+          FR.readAsDataURL(blob);
+        });
+      })).then(function(base64_attachments) {
+        var timestamp = Date.now();
+
+        this.messages().add({ type: 'outgoing',
+                              body: message,
+                              threadId: this.id,
+                              attachments: base64_attachments,
+                              timestamp: timestamp }).save();
+
+        this.save({ timestamp:   timestamp,
+                    unreadCount: 0,
+                    active:      true});
+
+        if (this.get('type') == 'private') {
+          return textsecure.messaging.sendMessageToNumber(this.get('id'), message, attachments);
         }
-      ).catch(
-        function(error) {
-          console.log(error);
+        else {
+          return textsecure.messaging.sendMessageToGroup(this.get('groupId'), message, attachments);
         }
-      );
+      }.bind(this)).then(function(result) {
+        console.log(result);
+      }).catch(function(error) {
+        console.log(error);
+      });
     },
 
     messages: function() {