Merge pull request #930 from umbraco/temp-U4-6924

Fixes: U4-6924 Ensure drag/drop media uploads show notifications - since the way this works has been overhauled in 7.4

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

@@ -144,33 +144,60 @@ angular.module("umbraco.directives")
 
 				}).success(function (data, status, headers, config) {
 
-					// set done status on file
-					file.uploadStatus = "done";
+					if(data.notifications && data.notifications.length > 0) {
 
-					// set date/time for when done - used for sorting
-					file.doneDate = new Date();
+						// set error status on file
+						file.uploadStatus = "error";
+
+						// Throw message back to user with the cause of the error
+						file.serverErrorMessage = data.notifications[0].message;
+
+						// Put the file in the rejected pool
+						scope.rejected.push(file);
+
+					} else {
+
+						// set done status on file
+						file.uploadStatus = "done";
+
+						// set date/time for when done - used for sorting
+						file.doneDate = new Date();
+
+						// Put the file in the done pool
+						scope.done.push(file);
+
+					}
 
-					scope.done.push(file);
 					scope.currentFile = undefined;
 
 					//after processing, test if everthing is done
 					_processQueueItem();
 
 				}).error( function (evt, status, headers, config) {
+
+					// set status done
 					file.uploadStatus = "error";
 
 					//if the service returns a detailed error
-					if(evt.InnerException){
-						file.errorMessage = evt.InnerException.ExceptionMessage;
+					if (evt.InnerException) {
+					    file.serverErrorMessage = 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";
-						}
+					    //Check if its the common "too large file" exception
+					    if (evt.InnerException.StackTrace && evt.InnerException.StackTrace.indexOf("ValidateRequestEntityLength") > 0) {
+					        file.serverErrorMessage = "File too large to upload";
+					    }
+
+					} else if (evt.Message) {
+					    file.serverErrorMessage = evt.Message;
+					}
+
+					// If file not found, server will return a 404 and display this message
+					if(status === 404 ) {
+						file.serverErrorMessage = "File not found";
 					}
 
 					//after processing, test if everthing is done
-					scope.done.push(file);
+					scope.rejected.push(file);
 					scope.currentFile = undefined;
 
 					_processQueueItem();

src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js

@@ -12,6 +12,7 @@ angular.module("umbraco")
             $scope.cropSize = dialogOptions.cropSize;
             $scope.lastOpenedNode = $cookieStore.get("umbLastOpenedMediaNodeId");
             $scope.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
+            $scope.maxFileSize = Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB";
 
             $scope.model.selectedImages = [];
 

src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html

@@ -47,7 +47,8 @@
          parent-id="{{currentFolder.id}}"
          files-uploaded="onUploadComplete"
          files-queued="onFilesQueue"
-         accept="{{acceptedFileTypes}}">
+         accept="{{acceptedFileTypes}}"
+         max-file-size="{{maxFileSize}}">
       </umb-file-dropzone>
 
       <umb-photo-folder

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

@@ -79,7 +79,11 @@
 
                <span class="file-error" ng-if="file.$error">
                   <span ng-if="file.$error === 'pattern'" class="errorMessage color-red">(Only allowed file types are: "{{ accept }}")</span>
-                  <span ng-if="file.$error === 'maxSize'" class="errorMessage color-red">(Max file size is " {{ maxFileSize }} ")</span>
+                  <span ng-if="file.$error === 'maxSize'" class="errorMessage color-red">(Max file size is "{{maxFileSize}}")</span>
+               </span>
+
+               <span class="file-error" ng-if="file.serverErrorMessage">
+                   <span class="errorMessage color-red">({{file.serverErrorMessage}})</span>
                </span>
 
             </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html

@@ -22,6 +22,7 @@
          parent-id="{{vm.nodeId}}"
          files-uploaded="vm.onUploadComplete"
          accept="{{vm.acceptedFileTypes}}"
+         max-file-size="{{vm.maxFileSize}}"
          hide-dropzone="{{!vm.activeDrag && items.length > 0 }}"
          compact="{{ items.length > 0 }}"
          files-queued="vm.onFilesQueue">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js

@@ -15,6 +15,7 @@
 
       vm.nodeId = $scope.contentId;
       vm.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
+      vm.maxFileSize = Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB";
       vm.activeDrag = false;
       vm.mediaDetailsTooltip = {};
       vm.itemsWithoutFolders = [];

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html

@@ -10,6 +10,7 @@
            parent-id="{{vm.nodeId}}"
            files-uploaded="vm.onUploadComplete"
            accept="{{vm.acceptedFileTypes}}"
+           max-file-size="{{vm.maxFileSize}}"
            hide-dropzone="{{!vm.activeDrag && items.length > 0 }}"
            compact="{{ items.length > 0 }}"
            files-queued="vm.onFilesQueue">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js

@@ -8,6 +8,7 @@
 
         vm.nodeId = $scope.contentId;
         vm.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
+        vm.maxFileSize = Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB";
         vm.activeDrag = false;
 
         vm.selectItem = selectItem;