Add file input with button and send file to imgur

This commit is contained in:
Magnus Hauge Bakke 2015-10-09 14:01:45 +02:00 committed by Lorenz Hübschle-Schneider
parent f6bfa4161b
commit aef26a2dc5
3 changed files with 32 additions and 2 deletions

View File

@ -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%;
}

View File

@ -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>

View File

@ -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() {