Support sending multiple images

css/glowingbear.css

@@ -362,15 +362,19 @@ td.time {
 }
 
 #imgur-upload-progress {
-    display: none;
-    content: " ";
+    width: 100%;
+    height: auto;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+}
+
+    .imgur-progress-bar {
         width: 0%;
         height: 5px;
-    position: absolute;
-    top: -5px;
-    left: 0;
+        margin-top: 1px;
         background: #428BCA;
-}
+    }
 
 /* fix for mobile firefox which ignores :hover */
 .nav-pills > li > a:active, .nav-pills > li > a:active span {

directives/input.html

@@ -5,7 +5,7 @@
     <span class="input-group-btn">
       <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)">
+        <input type="file" accept="image/*" multiple 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>

js/imgur-drop-directive.js

@@ -21,20 +21,25 @@ weechat.directive('imgurDrop', ['connection','imgur', function(connection, imgur
                 e.stopPropagation();
                 e.preventDefault();
 
-                // Check files length
-                if (files.length > 0) {
-                    // Sorry only one file
-                    var file = files[0];
-
-                    // Upload to imgur
-                    imgur.process(file, function(imageUrl) {
+                // Send image url after upload
+                var sendImageUrl = function(imageUrl) {
 
                     // Send image
                     if(imageUrl !== undefined && imageUrl !== '') {
-                            connection.sendMessage( String(imageUrl) );
+                        connection.sendMessage(String(imageUrl));
+                    }
+
+                };
+
+                // Check files
+                if(typeof files !== "undefined" && files.length > 0) {
+
+                    // Loop through files
+                    for (var i = 0; i < files.length; i++) {
+                        // Upload to imgur
+                        imgur.process(files[i], sendImageUrl);
                     }
 
-                    });
                 }
             };
         }

js/imgur.js

@@ -29,9 +29,16 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
         // Set client ID (Glowing Bear)
         var clientId = "164efef8979cd4b";
 
-        // Progress bar DOM elment
-        var progressBar = document.getElementById("imgur-upload-progress");
-        progressBar.style.width = '0';
+        // Progress bars container
+        var progressBars = document.getElementById("imgur-upload-progress"),
+            currentProgressBar = document.createElement("div");
+
+        // Set progress bar attributes
+        currentProgressBar.className='imgur-progress-bar';
+        currentProgressBar.style.width = '0';
+
+        // Append progress bar
+        progressBars.appendChild(currentProgressBar);
 
         // Create new form data
         var fd = new FormData();
@@ -51,7 +58,8 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
         // Handler for response
         xhttp.onload = function() {
 
-            progressBar.style.display = 'none';
+            // Remove progress bar
+            currentProgressBar.parentNode.removeChild(currentProgressBar);
 
             // Check state and response status
             if(xhttp.status === 200) {
@@ -87,8 +95,7 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
                     var complete = (event.loaded / event.total * 100 | 0);
 
                     // Set progress bar width
-                    progressBar.style.display = 'block';
-                    progressBar.style.width = complete + '%';
+                    currentProgressBar.style.width = complete + '%';
                 }
             };
 

js/inputbar.js

@@ -70,12 +70,9 @@ weechat.directive('inputBar', function() {
                 }, 0);
             };
 
-            $scope.uploadImage = function( $event, files ) {
-                // Get file
-                var file = files[0];
-
-                // Process image
-                imgur.process(file, function(imageUrl) {
+            $scope.uploadImage = function($event, files) {
+                // Send image url after upload
+                var sendImageUrl = function(imageUrl) {
 
                     // Send image
                     if(imageUrl !== undefined && imageUrl !== '') {
@@ -98,10 +95,21 @@ weechat.directive('inputBar', function() {
                             inputNode.focus();
                             var pos = $scope.command.length - suffix.length;
                             inputNode.setSelectionRange(pos, pos);
+                            // force refresh?
+                            $scope.$apply();
                         }, 0);
                     }
 
-                });
+                };
+
+                if(typeof files !== "undefined" && files.length > 0) {
+                    // Loop through files
+                    for (var i = 0; i < files.length; i++) {
+                        // Process image
+                        imgur.process(files[i], sendImageUrl);
+                    }
+
+                }
             };
 
             // Send the message to the websocket