Add image upload progressbar and error msg
This commit is contained in:
parent
960d5ba17a
commit
f2953d1190
|
@ -176,6 +176,14 @@ input[type=text], input[type=password], #sendMessage {
|
|||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.upload-error {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
width: 140px;
|
||||
|
@ -349,6 +357,21 @@ td.time {
|
|||
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 */
|
||||
.nav-pills > li > a:active, .nav-pills > li > a:active span {
|
||||
text-decoration: none;
|
||||
|
|
|
@ -10,4 +10,5 @@
|
|||
<button class="btn btn-send unselectable"><i class="glyphicon glyphicon-send"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="imgur-upload-progress"></div>
|
||||
</form>
|
||||
|
|
|
@ -43,6 +43,9 @@
|
|||
<script type="text/javascript" src="3rdparty/favico-0.3.5.min.js"></script>
|
||||
</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">
|
||||
<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">
|
||||
<h2>
|
||||
<img alt="logo" src="assets/img/glowing-bear.svg">
|
||||
|
|
48
js/imgur.js
48
js/imgur.js
|
@ -30,6 +30,10 @@ 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';
|
||||
|
||||
// Create new form data
|
||||
var fd = new FormData();
|
||||
fd.append("image", base64img); // Append the file
|
||||
|
@ -46,29 +50,69 @@ weechat.factory('imgur', ['$rootScope', function($rootScope) {
|
|||
xhttp.setRequestHeader("Accept", "application/json");
|
||||
|
||||
// Handler for response
|
||||
xhttp.onreadystatechange = function() {
|
||||
xhttp.onload = function() {
|
||||
|
||||
progressBar.style.display = 'none';
|
||||
|
||||
// Check state and response status
|
||||
if (xhttp.readyState == 4 && xhttp.status == 200) {
|
||||
if(xhttp.status === 200) {
|
||||
|
||||
// Get response text
|
||||
var response = JSON.parse(xhttp.responseText);
|
||||
|
||||
// Send link as message
|
||||
if( response.data && response.data.link ) {
|
||||
|
||||
if (callback && typeof(callback) === "function") {
|
||||
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
|
||||
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 {
|
||||
process: process
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue