Add file input with button and send file to imgur

css/glowingbear.css

@@ -84,6 +84,25 @@ input[type=text], input[type=password], #sendMessage {
     margin-bottom: 5px !important;
 }
 
+.btn-send-image {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.imgur-upload {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    cursor: inherit;
+    font-size: 1000px !important;
+    height: 300px;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    filter: ~"alpha(opacity=0)";
+}
+
 .input-group {
     width: 100%;
 }

directives/input.html

@@ -3,7 +3,10 @@
     <textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()">
     </textarea>
     <span class="input-group-btn">
-      <button class="btn btn-send-image unselectable"><i class="glyphicon glyphicon-picture"></i></button>
+      <label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image">
+        <i class="glyphicon glyphicon-picture"></i>
+        <input type="file" accept="image/*" title="Send image" id="imgur-upload" class="imgur-upload" file-change="uploadImage($event, files)">
+      </label>
       <button class="btn btn-send unselectable"><i class="glyphicon glyphicon-send"></i></button>
     </span>
   </div>

js/inputbar.js

@@ -14,11 +14,12 @@ weechat.directive('inputBar', function() {
             command: '=command'
         },
 
-        controller: ['$rootScope', '$scope', '$element', '$log', 'connection', 'models', 'IrcUtils', 'settings', function($rootScope,
+        controller: ['$rootScope', '$scope', '$element', '$log', 'connection', 'imgur', 'models', 'IrcUtils', 'settings', function($rootScope,
                              $scope,
                              $element, //XXX do we need this? don't seem to be using it
                              $log,
                              connection, //XXX we should eliminate this dependency and use signals instead
+                             imgur,
                              models,
                              IrcUtils,
                              settings) {
@@ -69,6 +70,13 @@ weechat.directive('inputBar', function() {
                 }, 0);
             };
 
+            $scope.uploadImage = function( $event, files ) {
+                // Get file
+                var file = files[0];
+
+                // Process image
+                imgur.process(file);
+            };
 
             // Send the message to the websocket
             $scope.sendMessage = function() {