Show UI errors for invalid files in media upload (#11061)

Author: madsrasmussen

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

@@ -65,16 +65,15 @@ angular.module("umbraco.directives")
                     function _filesQueued(files, event) {
                         //Push into the queue
                         Utilities.forEach(files, file => {
+                            if (_filterFile(file) === true) {
 
-                                if (_filterFile(file) === true) {
-
-                                    if (file.$error) {
-                                        scope.rejected.push(file);
-                                    } else {
-                                        scope.queue.push(file);
-                                    }
+                                if (file.$error) {
+                                    scope.rejected.push(file);
+                                } else {
+                                    scope.queue.push(file);
                                 }
-                            });
+                            }
+                        });
 
                         //when queue is done, kick the uploader
                         if (!scope.working) {
@@ -173,6 +172,8 @@ angular.module("umbraco.directives")
                                     }
                                 } else if (evt.Message) {
                                     file.serverErrorMessage = evt.Message;
+                                } else if (evt && typeof evt === 'string') {
+                                    file.serverErrorMessage = evt;
                                 }
                                 // If file not found, server will return a 404 and display this message
                                 if (status === 404) {
@@ -247,11 +248,18 @@ angular.module("umbraco.directives")
                         return true;// yes, we did open the choose-media dialog, therefor we return true.
                     }
 
-                    scope.handleFiles = function(files, event) {
+                    scope.handleFiles = function(files, event, invalidFiles) {
+                        const allFiles = [...files, ...invalidFiles];
+
+                        // add unique key for each files to use in ng-repeats
+                        allFiles.forEach(file => {
+                            file.key = String.CreateGuid();
+                        });
+
                         if (scope.filesQueued) {
-                            scope.filesQueued(files, event);
+                            scope.filesQueued(allFiles, event);
                         }
-                        _filesQueued(files, event);
+                        _filesQueued(allFiles, event);
                     };
                 }
             };

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

@@ -6,7 +6,7 @@
         <div ngf-drop
             ng-hide="hideDropzone === 'true'"
             ng-model="filesHolder"
-            ngf-change="handleFiles($files, $event)"
+            ngf-change="handleFiles($files, $event, $invalidFiles)"
             class="dropzone"
             ngf-drag-over-class="'drag-over'"
             ngf-multiple="true"
@@ -30,7 +30,7 @@
                      class="file-select"
                      ngf-select
                      ng-model="filesHolder"
-                     ngf-change="handleFiles($newFiles, $event)"
+                     ngf-change="handleFiles($files, $event, $invalidFiles)"
                      ngf-multiple="true"
                      ngf-pattern="{{ accept }}"
                      ngf-max-size="{{ maxFileSize }}">
@@ -43,7 +43,7 @@
         <ul class="file-list" ng-show="done.length > 0 || queue.length > 0 || rejected.length > 0 || filesHolder.length > 0">
 
             <!-- make list sort order the same as photo grid. The last uploaded photo in the top -->
-            <li class="file" ng-repeat="file in done">
+            <li class="file" ng-repeat="file in done track by file.key">
 
                 <!-- file name -->
                 <div class="file-description">{{ file.name }}</div>
@@ -68,13 +68,13 @@
             </li>
 
             <!-- make list sort order the same as photo grid. The last uploaded photo in the top -->
-            <li class="file" ng-repeat="queued in queue">
+            <li class="file" ng-repeat="queued in queue track by queued.key">
 
                 <!-- file name -->
                 <div class="file-name">{{queued.name}}</div>
             </li>
 
-            <li class="file" ng-repeat="file in rejected">
+            <li class="file" ng-repeat="file in rejected track by file.key">
 
                 <!-- file name -->
                 <div class="file-description">