U4-6924 Updated ng-file-upload bower dependency to latest version, added support for accepted file types and max file size in directive. Get file types from config. Still missing max file size.

src/Umbraco.Web.UI.Client/bower.json

@@ -24,8 +24,8 @@
         "jquery": "2.0.3",
         "jquery-ui": "1.10.3",
         "angular-dynamic-locale": "~0.1.27",
-        "ng-file-upload": "~3.0.2",
+        "ng-file-upload": "~7.3.8",
         "tinymce": "~4.1.10",
     "codemirror": "~5.3.0"
     }
-}
+}

src/Umbraco.Web.UI.Client/gruntFile.js

@@ -476,7 +476,7 @@ module.exports = function (grunt) {
                         },                        
                         'ng-file-upload': {
                             keepExpandedHierarchy: false,
-                            files: ['angular-file-upload.min.js']
+                            files: ['ng-file-upload.min.js']
                         },
                         'codemirror': {
                             files: [

src/Umbraco.Web.UI.Client/src/app.js

@@ -8,7 +8,7 @@ var app = angular.module('umbraco', [
     'ngSanitize',
     'ngMobile',
     'tmh.dynamicLocale',
-    'angularFileUpload'
+    'ngFileUpload'
 ]);
 
 var packages = angular.module("umbraco.packages", []);
@@ -19,4 +19,4 @@ var packages = angular.module("umbraco.packages", []);
 // to follow through to the js initialization stuff
 if (angular.isFunction(document.angularReady)) {
     document.angularReady.apply(this, [app]);
-}
+}

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

@@ -25,7 +25,7 @@ TODO
 
 angular.module("umbraco.directives")
 
-.directive('umbFileDropzone', function ($timeout, $upload, localizationService, umbRequestHelper) {
+.directive('umbFileDropzone', function ($timeout, Upload, localizationService, umbRequestHelper) {
 	return {
 
 		restrict: 'E',
@@ -38,6 +38,7 @@ angular.module("umbraco.directives")
 			contentTypeAlias: '@',
 			propertyAlias: '@',
 			accept: '@',
+			maxFileSize: '@',
 
 			compact: '@',
 			hideDropzone: '@',
@@ -51,14 +52,42 @@ angular.module("umbraco.directives")
 
 			scope.queue = [];
 			scope.done = [];
+			scope.rejected = [];
 			scope.currentFile = undefined;
 
+			function _filterFile(file) {
+
+				var ignoreFileNames = ['Thumbs.db'];
+				var ignoreFileTypes = ['directory'];
+
+				// ignore files with names from the list
+				// ignore files with types from the list
+				// ignore files which starts with "."
+				if(ignoreFileNames.indexOf(file.name) === -1 &&
+					ignoreFileTypes.indexOf(file.type) === -1 &&
+					file.name.indexOf(".") !== 0) {
+					return true;
+				} else {
+					return false;
+				}
+
+			}
 
 			function _filesQueued(files, event){
 				
 				//Push into the queue
 				angular.forEach(files, function(file){
-					scope.queue.push(file);
+
+					if(_filterFile(file) === true) {
+
+						if(file.$error) {
+							scope.rejected.push(file);
+						} else {
+							scope.queue.push(file);
+						}
+
+					}
+
 				});
 
 				//when queue is done, kick the uploader
@@ -93,12 +122,13 @@ angular.module("umbraco.directives")
 				scope.propertyAlias = scope.propertyAlias ? scope.propertyAlias : "umbracoFile";
 				scope.contentTypeAlias = scope.contentTypeAlias ? scope.contentTypeAlias : "Image"; 
 
-				$upload.upload({
+				Upload.upload({
 					url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
 					fields: {
-						'currentFolder': scope.parentId, 
-						'contentTypeAlias': scope.contentTypeAlias, 
-						'propertyAlias': scope.propertyAlias
+						'currentFolder': scope.parentId,
+						'contentTypeAlias': scope.contentTypeAlias,
+						'propertyAlias': scope.propertyAlias,
+						'path': file.path
 					},
 					file: file
 				}).progress(function (evt) {
@@ -161,4 +191,4 @@ angular.module("umbraco.directives")
 
 
 		};
-	});
+	});

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

@@ -66,22 +66,16 @@
       &:first-child {
         border-top: none;
       }
-      
+
       &.ng-enter {
-        -webkit-animation: fadeIn 0.5s;
-        -moz-animation: fadeIn 0.5s;
-        -ms-animation: fadeIn 0.5s;
         animation: fadeIn 0.5s;
       }
       &.ng-leave {
-        -webkit-animation: fadeOut 2s;
-        -moz-animation: fadeOut 2s;
-        -ms-animation: fadeOut 2s;
         animation: fadeOut 2s;
       }
-      .file-name {
+      .file-description {
         color: @grayDarker;
-        font-size: 10px;
+        font-size: 12px;
         width: 100%;
         display: block;
       }
@@ -91,25 +85,17 @@
         width: 100%;
       }
 
-      .file-upload-done {
+      .file-icon {
         position: absolute;
         right: 0;
         bottom: 0;
-        text-align: right;
-        font-size: 10px;
-        
+
         .icon {
           font-size: 20px;
           &.ng-enter {
-            -webkit-animation: fadeIn 0.5s;
-            -moz-animation: fadeIn 0.5s;
-            -ms-animation: fadeIn 0.5s;
             animation: fadeIn 0.5s;
           }
           &.ng-leave {
-            -webkit-animation: fadeIn 0.5s;
-            -moz-animation: fadeIn 0.5s;
-            -ms-animation: fadeIn 0.5s;
             animation: fadeIn 0.5s;
           }
         }
@@ -136,4 +122,4 @@
     }
   }
 
-}
+}

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

@@ -1,17 +1,20 @@
 <div class="umb-file-dropzone-directive">
-    
+
+<ng-form name="uploadForm">
+
 <!-- Drag and drop files area -->
-    <div ng-file-drop
+    <div ngf-drop
         ng-hide="hideDropzone"
         ng-model="filesHolder"
-        ng-file-change="handleFiles($files, $event)"
+        ngf-change="handleFiles($files, $event)"
         class="dropzone"
-        drag-over-class="drag-over"
-        ng-multiple="true"
-        allow-dir="true"
-        accept="{{accept}}"
+        ngf-drag-over-class="drag-over"
+        ngf-multiple="true"
+        ngf-allow-dir="true"
+        ngf-pattern="{{ accept }}"
+        ngf-max-size="{{ maxFileSize }}"
         ng-class="{'is-small': compact!=='false' || (done.length+queue.length) > 0 }">
-        
+
 
         <div class="content" >
             <!-- Drag and drop illustration -->
@@ -40,34 +43,31 @@
 
             <!-- Select files -->
             <div class="file-select"
-                 ng-file-select
+                 ngf-select
                  ng-model="filesHolder"
-                 ng-file-change="handleFiles($files, $event)"
-                 ng-multiple="true">
+                 ngf-change="handleFiles($files, $event)"
+                 ngf-multiple="true"
+                 ngf-pattern="{{ accept }}"
+                 ngf-max-size="{{ maxFileSize }}">
                 - or click here to choose files
             </div>
         </div>
     </div>
-    
+
     <!-- List of uploading/uploaded files  -->
-    <ul class="file-list" ng-show="done.length > 0 || queue.length > 0">
-        
+    <ul class="file-list" ng-show="done.length > 0 || queue.length > 0 || rejected.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">
 
             <!-- file name -->
-            <div class="file-name">{{ file.name }}</div>
+            <div class="file-description">{{ file.name }}</div>
 
             <!-- upload success -->
-            <div class="file-upload-done" ng-if="file.uploadStatus == 'done'">
+            <div class="file-icon" ng-if="file.uploadStatus == 'done'">
                 <i class="icon icon-check color-green"></i>
             </div>
 
-            <!-- 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">
@@ -76,7 +76,7 @@
 
             <!-- upload progress bar -->
             <div class="file-progress">
-                <span class="file-progress-indicator" 
+                <span class="file-progress-indicator"
                 ng-style="{'width': currentFile.uploadProgress + '%'}"></span>
             </div>
         </li>
@@ -85,7 +85,30 @@
         <li class="file" ng-repeat="queued in queue">
             <!-- file name -->
             <div class="file-name">{{ queued.name }}</div>
-        </li>   
+        </li>
+
+        <li class="file" ng-repeat="file in rejected">
+
+            <!-- file name -->
+            <div class="file-description">
+
+               {{ file.name }}
+
+               <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>
+
+            </div>
+
+            <!-- upload error -->
+            <div class="file-icon">
+               <i class="icon icon-delete color-red"></i>
+            </div>
+
+        </li>
     </ul>
 
-</div>
+</ng-form>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js

@@ -191,6 +191,26 @@ function MediaFolderBrowserDashboardController($rootScope, $scope, assetsService
 
         $scope.filesUploading = [];
         $scope.nodeId = -1;
+        $scope.acceptedFileTypes = formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
+
+        function formatFileTypes(fileTypes) {
+
+           var fileTypesArray = fileTypes.split(',');
+           var newFileTypesArray = [];
+
+           for (var i = 0; i < fileTypesArray.length; i++) {
+              var fileType = fileTypesArray[i];
+
+              if (fileType.indexOf(".") !== 0) {
+                 fileType = ".".concat(fileType);
+              }
+
+              newFileTypesArray.push(fileType);
+           }
+
+           return newFileTypesArray.join(",");
+
+        }
 
         function loadChildren() {
                 mediaResource.getChildren($scope.nodeId)

src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html

@@ -1,10 +1,13 @@
 <div ng-controller="Umbraco.Dashboard.MediaFolderBrowserDashboardController">
 
-	<umb-file-dropzone 
-			ng-if="creating == null"
-			parent-id="{{nodeId}}"
-			compact="[images.length > 0}" 
-			files-uploaded="onUploadComplete"></umb-file-dropzone>
+	<umb-file-dropzone
+		ng-if="creating == null"
+		parent-id="{{nodeId}}"
+		compact="[images.length > 0}"
+		files-uploaded="onUploadComplete"
+		accept="{{ acceptedFileTypes }}">
+	</umb-file-dropzone>
+
 
 	<umb-photo-folder ng-show="images.length > 0"
                       min-height="105"
@@ -12,5 +15,5 @@
                       on-click="clickHandler"
                       ng-model="images" />
 
-</div>
 
+</div>

src/Umbraco.Web/UI/JavaScript/JsInitialize.js

@@ -12,7 +12,7 @@
     'lib/angular/angular-ui-sortable.js',
 
     'lib/angular-dynamic-locale/tmhDynamicLocale.min.js',
-    'lib/ng-file-upload/angular-file-upload.min.js',
+    'lib/ng-file-upload/ng-file-upload.min.js',
 
     'lib/bootstrap/js/bootstrap.2.3.2.min.js',
     'lib/bootstrap-tabdrop/bootstrap-tabdrop.js',
@@ -32,4 +32,4 @@
     'js/umbraco.controllers.js',
     'js/routes.js',
     'js/init.js'
-]
+]