From f2953d11901a7d5b6b4c4ae03123d10d742874f1 Mon Sep 17 00:00:00 2001 From: Magnus Hauge Bakke Date: Fri, 9 Oct 2015 19:32:26 +0200 Subject: [PATCH] Add image upload progressbar and error msg --- css/glowingbear.css | 23 +++++++++++++++++++++ directives/input.html | 1 + index.html | 3 +++ js/imgur.js | 48 +++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 73 insertions(+), 2 deletions(-) diff --git a/css/glowingbear.css b/css/glowingbear.css index a7150a5..dbb2e55 100644 --- a/css/glowingbear.css +++ b/css/glowingbear.css @@ -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; diff --git a/directives/input.html b/directives/input.html index 01b574a..dcb7d2e 100644 --- a/directives/input.html +++ b/directives/input.html @@ -10,4 +10,5 @@ +
diff --git a/index.html b/index.html index 9a9ae1f..566d133 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,9 @@ +
+

Upload error: Image upload failed.

+

logo diff --git a/js/imgur.js b/js/imgur.js index a004392..7b1cfa3 100644 --- a/js/imgur.js +++ b/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 };