upload progress & ajax error fallback

config.ini

@@ -44,6 +44,6 @@ logs_path = data/logs/
 
 [system]
 system_name = blog
-version = 1.21
+version = 1.22
 debug = false
 logs = false

index.php

@@ -173,7 +173,10 @@ if(!empty($scripts)){
 								<textarea class="e_text" placeholder="<?php echo __("What's on your mind?"); ?>"></textarea>
 							</div>
 						</div>
-						<div class="e_loading"><img src="static/images/loading.gif" /></div>
+						<div class="e_loading">
+							<img src="static/images/loading.gif" />
+							<div class="e_meter"><span></span></div>
+						</div>
 						<input type="hidden" class="i_content_type">
 						<input type="hidden" class="i_content">
 						<div class="modal-body content"></div>

static/scripts/app.js

@@ -399,6 +399,11 @@ $.fn.error_msg = function(msg){
 	}, 5000);
 };
 
+// Attach the event handler to the document
+$(document).ajaxError(function(){
+	$("body").error_msg("Ajax request failed.");
+});
+
 // Apply events on post editing
 $.fn.apply_edit = function(data){
 	// Parse link
@@ -409,10 +414,16 @@ $.fn.apply_edit = function(data){
 
 		var add_content_loading = function(){
 			modal.find(".e_loading").css("display", "block");
+			modal.find(".e_loading .e_meter > span").width(0);
+		};
+
+		var content_loading_progress = function(progress){
+			modal.find(".e_loading .e_meter > span").width((progress * 100) + "%");
 		};
 
 		var remove_content = function(){
 			modal.find(".e_loading").hide();
+			modal.find(".e_loading .e_meter > span").width(0);
 
 			modal.find(".content").empty().hide();
 			modal.find(".i_content_type").val("");
@@ -472,6 +483,10 @@ $.fn.apply_edit = function(data){
 							return ;
 
 						add_content(data.content_type, data.content);
+					},
+					error: function() {
+						$("body").error_msg("Error when communicating with the server.");
+						remove_content();
 					}
 				});
 			});
@@ -489,6 +504,20 @@ $.fn.apply_edit = function(data){
 			add_content_loading();
 
 			$.post({
+				xhr: function(){
+					var xhr = new window.XMLHttpRequest();
+
+					// Upload progress
+					xhr.upload.addEventListener("progress", function(evt){
+						if (evt.lengthComputable) {
+							var percentComplete = evt.loaded / evt.total;
+							//Do something with upload progress
+							content_loading_progress(percentComplete);
+						}
+					}, false);
+
+					return xhr;
+				},
 				dataType: "json",
 				url: "ajax.php?action=upload_image",
 				cache: false,
@@ -503,6 +532,10 @@ $.fn.apply_edit = function(data){
 					}
 
 					add_content("image", data);
+				},
+				error: function() {
+					$("body").error_msg("Error when communicating with the server.");
+					remove_content();
 				}
 			});
 		}

static/styles/design.css

@@ -671,7 +671,25 @@ body {
 .e_loading {
   display: none;
   text-align: center;
-  padding-bottom: 15px;
+}
+
+.e_loading .e_meter {
+  height: 5px;
+  position: relative;
+  margin-top: 15px;
+  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
+}
+
+.e_loading .e_meter > span {
+  display: block;
+  width: 0;
+  height: 100%;
+  background-color: #4267b2;
+  box-shadow:
+    inset 0 2px 9px  rgba(255,255,255,0.3),
+    inset 0 -2px 6px rgba(0,0,0,0.4);
+  position: relative;
+  overflow: hidden;
 }
 
 .e_text {