diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js
index ec7df9999b..b9f0b6990d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagefolder.directive.js
@@ -14,9 +14,7 @@ function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHel
nodeId: '@',
onUploadComplete: '='
},
-
link: function (scope, element, attrs) {
-
//NOTE: Blueimp handlers are documented here: https://github.com/blueimp/jQuery-File-Upload/wiki/Options
//NOTE: We are using a Blueimp version specifically ~9.4.0 because any higher than that and we get crazy errors with jquery, also note
// that the jquery UI version 1.10.3 is required for this blueimp version! if we go higher to 1.10.4 it breaks! seriously!
@@ -25,7 +23,7 @@ function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHel
if (scope.onUploadComplete && !angular.isFunction(scope.onUploadComplete)) {
throw "onUploadComplete must be a function callback";
}
-
+
scope.uploading = false;
scope.files = [];
scope.progress = 0;
@@ -38,9 +36,9 @@ function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHel
.test(window.navigator.userAgent),
previewMaxWidth: 150,
previewMaxHeight: 150,
- previewCrop: true,
+ previewCrop: true,
dropZone: element.find(".drop-zone"),
- formData : {
+ formData: {
currentFolder: scope.nodeId
}
};
@@ -55,34 +53,28 @@ function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHel
});
}
- //tracks the total file progress
- scope.$on('fileuploadprogressall', function (e, data) {
- scope.$apply(function () {
- scope.progress = parseInt(data.loaded / data.total * 100, 10);
- });
- });
-
//when one is finished
- scope.$on('fileuploaddone', function (e, data) {
- scope.$apply(function () {
+ scope.$on('fileuploaddone', function(e, data) {
+ scope.$apply(function() {
//remove the amount of files complete
//NOTE: function is here instead of in the loop otherwise jshint blows up
- function findFile (file) { return file === data.files[i]; }
+ function findFile(file) { return file === data.files[i]; }
+
for (var i = 0; i < data.files.length; i++) {
-
+
var found = _.find(scope.files, findFile);
-
+
found.completed = true;
}
//when none are left resync everything
- var remaining = _.filter(scope.files, function (file) { return file.completed !== true; });
+ var remaining = _.filter(scope.files, function(file) { return file.completed !== true; });
if (remaining.length === 0) {
scope.progress = 100;
//just the ui transition isn't too abrupt, just wait a little here
- $timeout(function () {
+ $timeout(function() {
scope.progress = 0;
scope.files = [];
scope.uploading = false;
@@ -103,8 +95,8 @@ function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHel
//This handler gives us access to the file 'preview', this is the only handler that makes this available for whatever reason
// so we'll use this to also perform the adding of files to our collection
- scope.$on('fileuploadprocessalways', function (e, data) {
- scope.$apply(function () {
+ scope.$on('fileuploadprocessalways', function(e, data) {
+ scope.$apply(function() {
scope.uploading = true;
scope.files.push(data.files[data.index]);
});
@@ -112,22 +104,23 @@ function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHel
//This executes prior to the whole processing which we can use to get the UI going faster,
//this also gives us the start callback to invoke to kick of the whole thing
- scope.$on('fileuploadadd', function (e, data) {
- scope.$apply(function () {
+ scope.$on('fileuploadadd', function(e, data) {
+ scope.$apply(function() {
scope.uploading = true;
});
});
// All these sit-ups are to add dropzone area and make sure it gets removed if dragging is aborted!
- scope.$on('fileuploaddragover', function (e, data) {
+ scope.$on('fileuploaddragover', function(e, data) {
if (!scope.dragClearTimeout) {
- scope.$apply(function () {
+ scope.$apply(function() {
scope.dropping = true;
});
- } else {
+ }
+ else {
$timeout.cancel(scope.dragClearTimeout);
}
- scope.dragClearTimeout = $timeout(function () {
+ scope.dragClearTimeout = $timeout(function() {
scope.dropping = null;
scope.dragClearTimeout = null;
}, 300);
@@ -135,6 +128,7 @@ function umbImageFolder($rootScope, assetsService, $timeout, $log, umbRequestHel
//init load
loadChildren(scope.nodeId);
+
}
};
}
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimageupload.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimageupload.js
new file mode 100644
index 0000000000..be7336cbc0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimageupload.js
@@ -0,0 +1,39 @@
+/**
+* @ngdoc directive
+* @name umbraco.directives.directive:umbImageFileUpload
+* @restrict E
+* @function
+* @description
+* This is a wrapper around the blueimp angular file-upload directive so that we can expose a proper API to other directives, the blueimp
+* directive isn't actually made very well and only exposes an API/events on the $scope so we can't do things like require: "^fileUpload" and use
+* it's instance.
+**/
+function umbImageUpload($compile) {
+ return {
+ restrict: 'A',
+ scope: true,
+ link: function (scope, element, attrs) {
+ //set inner scope variable to assign to file-upload directive in the template
+ scope.innerOptions = scope.$eval(attrs.umbImageUpload);
+
+ //compile an inner blueimp file-upload with our scope
+
+ var x = angular.element('');
+ element.append(x);
+ $compile(x)(scope);
+ },
+
+ //Define a controller for this directive to expose APIs to other directives
+ controller: function ($scope, $element, $attrs) {
+
+
+ //create a method to allow binding to a blueimp event (which is based on it's directives scope)
+ this.bindEvent = function (e, callback) {
+ $scope.$on(e, callback);
+ };
+
+ }
+ };
+}
+
+angular.module("umbraco.directives").directive('umbImageUpload', umbImageUpload);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimageuploadprogress.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimageuploadprogress.directive.js
new file mode 100644
index 0000000000..c0c424e2dc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimageuploadprogress.directive.js
@@ -0,0 +1,23 @@
+/**
+* @ngdoc directive
+* @name umbraco.directives.directive:umbImageUploadProgress
+* @restrict E
+* @function
+**/
+function umbImageUploadProgress($rootScope, assetsService, $timeout, $log, umbRequestHelper, mediaResource, imageHelper) {
+ return {
+ require: '^umbImageUpload',
+ restrict: 'E',
+ replace: true,
+ template: '
',
+
+ link: function (scope, element, attrs, umbImgUploadCtrl) {
+
+ umbImgUploadCtrl.bindEvent('fileuploadprogressall', function (e, data) {
+ scope.uploadProgress = parseInt(data.loaded / data.total * 100, 10);
+ });
+ }
+ };
+}
+
+angular.module("umbraco.directives").directive('umbImageUploadProgress', umbImageUploadProgress);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html
index 636388541b..83ac817a41 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-folder.html
@@ -1,8 +1,5 @@
-