Accept zip as extension in local package installer (#11109)

* Update ngf-pattern and accept

* Restructure less

* Remove ng-invalid again

Author: bjarnef

src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less

@@ -9,44 +9,51 @@
     color: @gray-5;
 }
 
-.umb-upload-local__dropzone {
-    position: relative;
-    width: 500px;
-    height: 300px;
-    border: 2px dashed @ui-action-border;
-    border-radius: 3px;
-    background: @white;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 30px;
-    transition: 100ms box-shadow ease, 100ms border ease;
-
-    &.drag-over {
-        border-color: @ui-action-border-hover;
-        border-style: solid;
-        box-shadow: 0 3px 8px rgba(0,0,0, .1);
+.umb-upload-local {
+
+    &__dropzone {
+        position: relative;
+        width: 500px;
+        height: 300px;
+        border: 2px dashed @ui-action-border;
+        border-radius: 3px;
+        background: @white;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 30px;
         transition: 100ms box-shadow ease, 100ms border ease;
-    }
 
-    .umb-icon {
-        display: block;
-        color: @ui-action-type;
-        font-size: 6.75rem;
-        line-height: 1;
-        margin: 0 auto;
+        &.drag-over {
+            border-color: @ui-action-border-hover;
+            border-style: solid;
+            box-shadow: 0 3px 8px rgba(0,0,0, .1);
+            transition: 100ms box-shadow ease, 100ms border ease;
+        }
+
+        .umb-icon {
+            display: block;
+            color: @ui-action-type;
+            font-size: 6.75rem;
+            line-height: 1;
+            margin: 0 auto;
+        }
+
+        .umb-info-local-item {
+            margin: 20px;
+        }
     }
-}
 
-.umb-upload-local__select-file {
-    font-weight: bold;
-    color: @ui-action-type;
-    cursor: pointer;
+    &__select-file {
+        font-weight: bold;
+        color: @ui-action-type;
+        cursor: pointer;
 
-    &:hover {
-        text-decoration: underline;
-        color: @ui-action-type-hover;
+        &:hover {
+            text-decoration: underline;
+            color: @ui-action-type-hover;
+        }
     }
 }
 
@@ -117,7 +124,3 @@
 .umb-info-local-item {
     margin-bottom: 20px;
 }
-
-.umb-upload-local__dropzone .umb-info-local-item {
-    margin:20px;
-}

src/Umbraco.Web.UI.Client/src/views/packages/views/install-local.controller.js

@@ -19,7 +19,7 @@
             serverErrorMessage: null
         };
 
-        $scope.handleFiles = function (files, event) {
+        $scope.handleFiles = function (files, event, invalidFiles) {
             if (files) {
                 for (var i = 0; i < files.length; i++) {
                     upload(files[i]);

src/Umbraco.Web.UI.Client/src/views/packages/views/install-local.html

@@ -10,14 +10,15 @@
                 <div ngf-drop
                      ng-hide="hideDropzone"
                      ng-model="filesHolder"
-                     ngf-change="handleFiles($files, $event)"
+                     ngf-change="handleFiles($files, $event, $invalidFiles)"
                      class="umb-upload-local__dropzone"
                      ngf-drag-over-class="'drag-over'"
                      ngf-multiple="false"
                      ngf-allow-dir="false"
-                     ngf-pattern="*.zip"
-                     ngf-max-size="{{ maxFileSize }}"
-                     ng-class="{'is-small': compact!=='false' || (done.length+queue.length) > 0 }">
+                     ngf-max-size="{{maxFileSize}}"
+                     ngf-pattern="'.zip'"
+                     accept=".zip"
+                     ng-class="{ 'is-small': compact !== 'false' || (done.length + queue.length) > 0 }">
 
                     <div class="content" draggable="false">
 
@@ -31,10 +32,11 @@
                         <div class="umb-upload-local__select-file"
                              ngf-select
                              ng-model="filesHolder"
-                             ngf-change="handleFiles($files, $event)"
+                             ngf-change="handleFiles($files, $event, $invalidFiles)"
                              ngf-multiple="true"
-                             ngf-pattern="*.zip"
-                             ngf-max-size="{{ maxFileSize }}">
+                             ngf-max-size="{{maxFileSize}}"
+                             ngf-pattern="'.zip'"
+                             accept=".zip">
                             - <localize key="packager_orClickHereToUpload">or click here to choose files</localize>
                         </div>