From e1f3e82fbf72a7886356d68a145b8460c97be5da Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 28 Sep 2015 11:55:12 +0200 Subject: [PATCH] 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 | 4 +- src/Umbraco.Web.UI.Client/gruntFile.js | 2 +- src/Umbraco.Web.UI.Client/src/app.js | 4 +- .../components/umbfiledropzone.directive.js | 44 ++++++++++-- .../less/components/umb-file-dropzone.less | 26 ++----- .../views/components/umb-file-dropzone.html | 71 ++++++++++++------- .../dashboard/dashboard.tabs.controller.js | 20 ++++++ .../dashboard/media/mediafolderbrowser.html | 15 ++-- src/Umbraco.Web/UI/JavaScript/JsInitialize.js | 4 +- 9 files changed, 126 insertions(+), 64 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/bower.json b/src/Umbraco.Web.UI.Client/bower.json index 40e1428510..01dcc2999e 100644 --- a/src/Umbraco.Web.UI.Client/bower.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index fcf6bd44c1..880c1e5685 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/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: [ diff --git a/src/Umbraco.Web.UI.Client/src/app.js b/src/Umbraco.Web.UI.Client/src/app.js index 95763f4bc5..711bde8583 100644 --- a/src/Umbraco.Web.UI.Client/src/app.js +++ b/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]); -} \ No newline at end of file +} diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfiledropzone.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfiledropzone.directive.js index 2f1e71bd7b..23edf2f576 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfiledropzone.directive.js +++ b/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") }; - }); \ No newline at end of file + }); diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less index 18847dc292..0aa6ae6a8e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less +++ b/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 @@ } } -} \ No newline at end of file +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-file-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-file-dropzone.html index 4620c5d322..64f00f85d8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-file-dropzone.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-file-dropzone.html @@ -1,17 +1,20 @@
- + + + -
- +
@@ -40,34 +43,31 @@
+ ngf-change="handleFiles($files, $event)" + ngf-multiple="true" + ngf-pattern="{{ accept }}" + ngf-max-size="{{ maxFileSize }}"> - or click here to choose files
- + -
    - +
      +
    • -
      {{ file.name }}
      +
      {{ file.name }}
      -
      +
      - -
      - {{file.errorMessage}} - -
    • @@ -76,7 +76,7 @@
      -
      • @@ -85,7 +85,30 @@
    • {{ queued.name }}
      -
      • + + +
    • + + +
      + + {{ file.name }} + + + ( Only allowed file types are: "{{ accept }}" ) + ( Max file size is " {{ maxFileSize }} " ) + + +
      + + +
      + +
      + +
    -
\ No newline at end of file + + + diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js index 4bb29cc6f8..da3a5e5f7f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js +++ b/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) diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html index 4297fee23c..f1189f3499 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/media/mediafolderbrowser.html @@ -1,10 +1,13 @@
- + + + -
+ diff --git a/src/Umbraco.Web/UI/JavaScript/JsInitialize.js b/src/Umbraco.Web/UI/JavaScript/JsInitialize.js index 4ef8d03214..a5bf2ef16a 100644 --- a/src/Umbraco.Web/UI/JavaScript/JsInitialize.js +++ b/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' -] \ No newline at end of file +]