Fix file inputs

As a chrome app we are obligated to use the fileSystem api, and must do
so via the window in which we want to open the dialog.

js/views/conversation_view.js

@@ -31,8 +31,14 @@
 
             this.render();
 
+            this.appWindow = options.appWindow;
+            new Whisper.WindowControlsView({
+                appWindow: this.appWindow
+            }).$el.appendTo(this.$('#header'));
+
             this.fileInput = new Whisper.FileInputView({
-                el: this.$('.attachments')
+                el: this.$('.attachments'),
+                window: this.appWindow.contentWindow
             });
 
             this.view = new Whisper.MessageListView({
@@ -41,10 +47,6 @@
             this.$('.discussion-container').append(this.view.el);
             this.view.render();
 
-            new Whisper.WindowControlsView({
-                appWindow: options.appWindow
-            }).$el.appendTo(this.$('#header'));
-
             setTimeout(function() {
                 this.view.scrollToBottom();
             }.bind(this), 10);

js/views/file_input_view.js

@@ -24,11 +24,12 @@
     Whisper.FileInputView = Backbone.View.extend({
         tagName: 'span',
         className: 'file-input',
-        initialize: function() {
+        initialize: function(options) {
             this.$input = this.$('input[type=file]');
             this.thumb = new Whisper.AttachmentPreviewView();
             this.$el.addClass('file-input');
             this.$default = this.$('.default');
+            this.window = options.window;
         },
 
         events: {
@@ -38,7 +39,17 @@
         },
 
         open: function() {
-            this.$input.click();
+            // hack
+            if (this.window && this.window.chrome && this.window.chrome.fileSystem) {
+                this.window.chrome.fileSystem.chooseEntry({type: 'openFile'}, function(entry) {
+                    entry.file(function(file) {
+                        this.file = file;
+                        this.previewImages();
+                    }.bind(this));
+                }.bind(this));
+            } else {
+                this.$input.click();
+            }
         },
 
         addThumb: function(src) {
@@ -98,7 +109,7 @@
 
         previewImages: function() {
             this.clearForm();
-            var file = this.$input.prop('files')[0];
+            var file = this.file || this.$input.prop('files')[0];
             if (!file) { return; }
 
             var type = file.type.split('/')[0];
@@ -128,13 +139,13 @@
         },
 
         hasFiles: function() {
-            var files = this.$input.prop('files');
+            var files = [this.file] || this.$input.prop('files');
             return files && files.length && files.length > 0;
         },
 
         getFiles: function() {
             var promises = [];
-            var files = this.$input.prop('files');
+            var files = [this.file] || this.$input.prop('files');
             for (var i = 0; i < files.length; i++) {
                 promises.push(this.getFile(files[i]));
             }
@@ -143,7 +154,7 @@
         },
 
         getFile: function(file) {
-            file = file || this.$input.prop('files')[0];
+            file = file || this.file || this.$input.prop('files')[0];
             if (file === undefined) { return Promise.resolve(); }
             return this.autoScale(file).then(this.readFile);
         },

manifest.json

@@ -8,7 +8,8 @@
 
     "permissions": [
       "unlimitedStorage",
-      "notifications"
+      "notifications",
+      "fileSystem"
     ],
 
     "icons": {

stylesheets/_global.scss

@@ -96,7 +96,7 @@ button.back {
     color: $grey_d;
 
     top: 100%;
-    right: 0;
+    left: 0;
     margin: 0;
     padding: 0;
     border: solid 1px $blue;