tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add image upload progressbar and error msg

Browse source
This commit is contained in:
Magnus Hauge Bakke 2015-10-09 19:32:26 +02:00 committed by Lorenz Hübschle-Schneider
parent 960d5ba17a
commit f2953d1190
4 changed files with 73 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
css/glowingbear.css
View file

@ -176,6 +176,14 @@ input[type=text], input[type=password], #sendMessage {
padding-right: 6px; padding-right: 6px;
} }
.upload-error {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
#sidebar { #sidebar {
position: fixed; position: fixed;
width: 140px; width: 140px;
@ -349,6 +357,21 @@ td.time {
padding-right: 100px; padding-right: 100px;
} }
#inputform {
position: relative;
}
#imgur-upload-progress {
display: none;
content: " ";
width: 0%;
height: 5px;
position: absolute;
top: -5px;
left: 0;
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;

1
directives/input.html
View file

@ -10,4 +10,5 @@
<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>
</div> </div>
<div id="imgur-upload-progress"></div>
</form> </form>

3
index.html
View file

@ -43,6 +43,9 @@
<script type="text/javascript" src="3rdparty/favico-0.3.5.min.js"></script> <script type="text/javascript" src="3rdparty/favico-0.3.5.min.js"></script>
</head> </head>
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)" ng-keyup="handleKeyRelease($event)" ng-keypress="handleKeyPress($event)" ng-class="{'no-overflow': connected}" ng-init="init()" lang="en-US"> <body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)" ng-keyup="handleKeyRelease($event)" ng-keypress="handleKeyPress($event)" ng-class="{'no-overflow': connected}" ng-init="init()" lang="en-US">
<div class="alert alert-danger upload-error" ng-show="uploadError">
<p><strong>Upload error:</strong> Image upload failed.</p>
</div>
<div ng-hide="connected" class="container"> <div ng-hide="connected" class="container">
<h2> <h2>
<img alt="logo" src="assets/img/glowing-bear.svg"> <img alt="logo" src="assets/img/glowing-bear.svg">

48
js/imgur.js
View file

@ -30,6 +30,10 @@ 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
var progressBar = document.getElementById("imgur-upload-progress");
progressBar.style.width = '0';
// Create new form data // Create new form data
var fd = new FormData(); var fd = new FormData();
fd.append("image", base64img); // Append the file fd.append("image", base64img); // Append the file
@ -46,29 +50,69 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
xhttp.setRequestHeader("Accept", "application/json"); xhttp.setRequestHeader("Accept", "application/json");
// Handler for response // Handler for response
xhttp.onreadystatechange = function() { xhttp.onload = function() {
progressBar.style.display = 'none';
// Check state and response status // Check state and response status
if (xhttp.readyState == 4 && xhttp.status == 200) { if(xhttp.status === 200) {
// Get response text // Get response text
var response = JSON.parse(xhttp.responseText); var response = JSON.parse(xhttp.responseText);
// Send link as message // Send link as message
if( response.data && response.data.link ) { if( response.data && response.data.link ) {
if (callback && typeof(callback) === "function") { if (callback && typeof(callback) === "function") {
callback(response.data.link); callback(response.data.link);
} }
} else {
showErrorMsg();
} }
} else {
showErrorMsg();
} }
}; };
if( "upload" in xhttp ) {
// Set progress
xhttp.upload.onprogress = function (event) {
// Check if we can compute progress
if (event.lengthComputable) {
// Complete in percent
var complete = (event.loaded / event.total * 100 | 0);
// Set progress bar width
progressBar.style.display = 'block';
progressBar.style.width = complete + '%';
}
};
}
// Send request with form data // Send request with form data
xhttp.send(fd); xhttp.send(fd);
}; };
var showErrorMsg = function() {
// Show error msg
$rootScope.uploadError = true;
$rootScope.$apply();
// Hide after 5 seconds
setTimeout(function(){
// Hide error msg
$rootScope.uploadError = false;
$rootScope.$apply();
}, 5000);
};
return { return {
process: process process: process
}; };