From fc29a2ccd74b8c15d3271f3a799bf62a94d6e02e Mon Sep 17 00:00:00 2001
From: Elitsa Marinovska <elm@umbraco.dk>
Date: Wed, 15 Sep 2021 10:00:01 +0200
Subject: [PATCH] Cherry-picking the
 https://github.com/umbraco/Umbraco-CMS/pull/11061 UI fix

---
 .../upload/umbfiledropzone.directive.js          | 16 ++++++++++++----
 .../components/upload/umb-file-dropzone.html     | 10 +++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js
index e926ca23d7..8e2af44883 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js
@@ -65,7 +65,6 @@ angular.module("umbraco.directives")
                     function _filesQueued(files, event) {
                         //Push into the queue
                         Utilities.forEach(files, file => {
-
                                 if (_filterFile(file) === true) {
 
                                     if (file.$error) {
@@ -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);
                     };
                 }
             };
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
index e5466d1da0..ff0e8970a4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
+++ b/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">