Fixes missing progress bars and large file error

src/Umbraco.Web.UI.Client/src/common/directives/components/umbfiledropzone.directive.js

@@ -69,6 +69,7 @@ angular.module("umbraco.directives")
 
 
 			function _processQueueItem(){
+
 				if(scope.queue.length > 0){
 					scope.currentFile = scope.queue.shift();
 					_upload(scope.currentFile);
@@ -125,9 +126,19 @@ angular.module("umbraco.directives")
 					//after processing, test if everthing is done
 					_processQueueItem();
 
-				}).error( function (evt) {
+				}).error( function (evt, status, headers, config) {
 					file.uploadStatus = "error";
 
+					//if the service returns a detailed error
+					if(evt.InnerException){
+						file.errorMessage = evt.InnerException.ExceptionMessage;
+
+						//Check if its the common "too large file" exception
+						if(evt.InnerException.StackTrace && evt.InnerException.StackTrace.indexOf("ValidateRequestEntityLength") > 0){
+							file.errorMessage = "File too large to upload";
+						}
+					}
+
 					//after processing, test if everthing is done
 					scope.done.push(file);
 					scope.currentFile = undefined;

src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less

@@ -95,6 +95,9 @@
         position: absolute;
         right: 0;
         bottom: 0;
+        text-align: right;
+        font-size: 10px;
+        
         .icon {
           font-size: 20px;
           &.ng-enter {

src/Umbraco.Web.UI.Client/src/views/components/umb-file-dropzone.html

@@ -48,7 +48,7 @@
             </div>
         </div>
     </div>
-
+    
     <!-- List of uploading/uploaded files  -->
     <ul class="file-list" ng-show="done.length > 0 || queue.length > 0">
         
@@ -65,17 +65,19 @@
 
             <!-- upload error -->
             <div class="file-upload-done" ng-if="file.uploadStatus == 'error'">
+                <span class="errorMessage color-red">{{file.errorMessage}}</span>
                 <i class="icon icon-alert color-red"></i>
             </div>
         </li>
 
         <li class="file" ng-if="currentFile">
             <!-- file name -->
-            <div class="file-name">{{ currentfile.name }}</div>
+            <div class="file-name">{{ currentFile.name }}</div>
 
             <!-- upload progress bar -->
-            <div class="file-upload-progress">
-                <span class="file-upload-progress-indicator" ng-style="{'width': currentfile.uploadProgress + '%'}"></span>
+            <div class="file-progress">
+                <span class="file-progress-indicator" 
+                ng-style="{'width': currentFile.uploadProgress + '%'}"></span>
             </div>
         </li>