Support sending multiple images
This commit is contained in:
parent
f2bb543796
commit
3f661ded6c
|
@ -362,16 +362,20 @@ td.time {
|
||||||
}
|
}
|
||||||
|
|
||||||
#imgur-upload-progress {
|
#imgur-upload-progress {
|
||||||
display: none;
|
width: 100%;
|
||||||
content: " ";
|
height: auto;
|
||||||
width: 0%;
|
|
||||||
height: 5px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -5px;
|
bottom: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: #428BCA;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.imgur-progress-bar {
|
||||||
|
width: 0%;
|
||||||
|
height: 5px;
|
||||||
|
margin-top: 1px;
|
||||||
|
background: #428BCA;
|
||||||
|
}
|
||||||
|
|
||||||
/* fix for mobile firefox which ignores :hover */
|
/* fix for mobile firefox which ignores :hover */
|
||||||
.nav-pills > li > a:active, .nav-pills > li > a:active span {
|
.nav-pills > li > a:active, .nav-pills > li > a:active span {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<span class="input-group-btn">
|
<span class="input-group-btn">
|
||||||
<label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image">
|
<label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image">
|
||||||
<i class="glyphicon glyphicon-picture"></i>
|
<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>
|
</label>
|
||||||
<button class="btn btn-send unselectable"><i class="glyphicon glyphicon-send"></i></button>
|
<button class="btn btn-send unselectable"><i class="glyphicon glyphicon-send"></i></button>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -21,20 +21,25 @@ weechat.directive('imgurDrop', ['connection','imgur', function(connection, imgur
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// Check files length
|
// Send image url after upload
|
||||||
if (files.length > 0) {
|
var sendImageUrl = function(imageUrl) {
|
||||||
// Sorry only one file
|
|
||||||
var file = files[0];
|
|
||||||
|
|
||||||
// Upload to imgur
|
// Send image
|
||||||
imgur.process(file, function(imageUrl) {
|
if(imageUrl !== undefined && imageUrl !== '') {
|
||||||
|
connection.sendMessage(String(imageUrl));
|
||||||
|
}
|
||||||
|
|
||||||
// Send image
|
};
|
||||||
if(imageUrl !== undefined && 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);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
19
js/imgur.js
19
js/imgur.js
|
@ -29,9 +29,16 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
|
||||||
// Set client ID (Glowing Bear)
|
// Set client ID (Glowing Bear)
|
||||||
var clientId = "164efef8979cd4b";
|
var clientId = "164efef8979cd4b";
|
||||||
|
|
||||||
// Progress bar DOM elment
|
// Progress bars container
|
||||||
var progressBar = document.getElementById("imgur-upload-progress");
|
var progressBars = document.getElementById("imgur-upload-progress"),
|
||||||
progressBar.style.width = '0';
|
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
|
// Create new form data
|
||||||
var fd = new FormData();
|
var fd = new FormData();
|
||||||
|
@ -51,7 +58,8 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
|
||||||
// Handler for response
|
// Handler for response
|
||||||
xhttp.onload = function() {
|
xhttp.onload = function() {
|
||||||
|
|
||||||
progressBar.style.display = 'none';
|
// Remove progress bar
|
||||||
|
currentProgressBar.parentNode.removeChild(currentProgressBar);
|
||||||
|
|
||||||
// Check state and response status
|
// Check state and response status
|
||||||
if(xhttp.status === 200) {
|
if(xhttp.status === 200) {
|
||||||
|
@ -87,8 +95,7 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
|
||||||
var complete = (event.loaded / event.total * 100 | 0);
|
var complete = (event.loaded / event.total * 100 | 0);
|
||||||
|
|
||||||
// Set progress bar width
|
// Set progress bar width
|
||||||
progressBar.style.display = 'block';
|
currentProgressBar.style.width = complete + '%';
|
||||||
progressBar.style.width = complete + '%';
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -70,12 +70,9 @@ weechat.directive('inputBar', function() {
|
||||||
}, 0);
|
}, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.uploadImage = function( $event, files ) {
|
$scope.uploadImage = function($event, files) {
|
||||||
// Get file
|
// Send image url after upload
|
||||||
var file = files[0];
|
var sendImageUrl = function(imageUrl) {
|
||||||
|
|
||||||
// Process image
|
|
||||||
imgur.process(file, function(imageUrl) {
|
|
||||||
|
|
||||||
// Send image
|
// Send image
|
||||||
if(imageUrl !== undefined && imageUrl !== '') {
|
if(imageUrl !== undefined && imageUrl !== '') {
|
||||||
|
@ -98,10 +95,21 @@ weechat.directive('inputBar', function() {
|
||||||
inputNode.focus();
|
inputNode.focus();
|
||||||
var pos = $scope.command.length - suffix.length;
|
var pos = $scope.command.length - suffix.length;
|
||||||
inputNode.setSelectionRange(pos, pos);
|
inputNode.setSelectionRange(pos, pos);
|
||||||
|
// force refresh?
|
||||||
|
$scope.$apply();
|
||||||
}, 0);
|
}, 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
|
// Send the message to the websocket
|
||||||
|
|
Loading…
Reference in New Issue