yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1572 from umbraco/temp-U4-4196-gkonings-html5-dropzone

Browse Source 
U4-4196 U7 - Umbraco HTML5 Drop Zone should honor media types
This commit is contained in:
Claus
2016-11-14 09:59:22 +01:00
committed by GitHub
parent df59596775 2115367353
commit f2c406f168
18 changed files with 521 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbfiledropzone.directive.js
View File

@@ -10,212 +10,223 @@
/*
TODO
.directive("umbFileDrop", function ($timeout, $upload, localizationService, umbRequestHelper){
return{
restrict: "A",
link: function(scope, element, attrs){
//load in the options model
}
}
return{
restrict: "A",
link: function(scope, element, attrs){
//load in the options model
}
}
})
*/
angular.module("umbraco.directives")
.directive('umbFileDropzone',
function($timeout, Upload, localizationService, umbRequestHelper) {
return {
restrict: 'E',
replace: true,
templateUrl: 'views/components/upload/umb-file-dropzone.html',
scope: {
parentId: '@',
contentTypeAlias: '@',
propertyAlias: '@',
accept: '@',
maxFileSize: '@',
.directive('umbFileDropzone', function ($timeout, Upload, localizationService, umbRequestHelper) {
return {
compact: '@',
hideDropzone: '@',
acceptedMediatypes: '=',
restrict: 'E',
replace: true,
filesQueued: '=',
handleFile: '=',
filesUploaded: '='
},
link: function(scope, element, attrs) {
scope.queue = [];
scope.done = [];
scope.rejected = [];
scope.currentFile = undefined;
templateUrl: 'views/components/upload/umb-file-dropzone.html',
function _filterFile(file) {
var ignoreFileNames = ['Thumbs.db'];
var ignoreFileTypes = ['directory'];
scope: {
parentId: '@',
contentTypeAlias: '@',
propertyAlias: '@',
accept: '@',
maxFileSize: '@',
// 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;
}
}
compact: '@',
hideDropzone: '@',
function _filesQueued(files, event) {
//Push into the queue
angular.forEach(files,
function(file) {
filesQueued: '=',
handleFile: '=',
filesUploaded: '='
},
if (_filterFile(file) === true) {
link: function(scope, element, attrs) {
if (file.$error) {
scope.rejected.push(file);
} else {
scope.queue.push(file);
}
}
});
scope.queue = [];
scope.done = [];
scope.rejected = [];
scope.currentFile = undefined;
//when queue is done, kick the uploader
if (!scope.working) {
// Upload not allowed
if (!scope.acceptedMediatypes || !scope.acceptedMediatypes.length) {
files.map(function(file) {
file.uploadStatus = "error";
file.serverErrorMessage = "File type is not allowed here";
scope.rejected.push(file);
});
scope.queue = [];
}
// One allowed type
if (scope.acceptedMediatypes && scope.acceptedMediatypes.length === 1) {
// Standard setup - set alias to auto select to let the server best decide which media type to use
if (scope.acceptedMediatypes[0].alias === 'Image') {
scope.contentTypeAlias = "umbracoAutoSelect";
} else {
scope.contentTypeAlias = scope.acceptedMediatypes[0].alias;
}
function _filterFile(file) {
_processQueueItem();
}
// More than one, open dialog
if (scope.acceptedMediatypes && scope.acceptedMediatypes.length > 1) {
_chooseMediaType();
}
}
}
var ignoreFileNames = ['Thumbs.db'];
var ignoreFileTypes = ['directory'];
function _processQueueItem() {
if (scope.queue.length > 0) {
scope.currentFile = scope.queue.shift();
_upload(scope.currentFile);
} else if (scope.done.length > 0) {
if (scope.filesUploaded) {
//queue is empty, trigger the done action
scope.filesUploaded(scope.done);
}
// 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;
}
//auto-clear the done queue after 3 secs
var currentLength = scope.done.length;
$timeout(function() {
scope.done.splice(0, currentLength);
},
3000);
}
}
}
function _upload(file) {
function _filesQueued(files, event){
scope.propertyAlias = scope.propertyAlias ? scope.propertyAlias : "umbracoFile";
scope.contentTypeAlias = scope.contentTypeAlias ? scope.contentTypeAlias : "Image";
//Push into the queue
angular.forEach(files, function(file){
Upload.upload({
url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
fields: {
'currentFolder': scope.parentId,
'contentTypeAlias': scope.contentTypeAlias,
'propertyAlias': scope.propertyAlias,
'path': file.path
},
file: file
})
.progress(function(evt) {
// calculate progress in percentage
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total, 10);
// set percentage property on file
file.uploadProgress = progressPercentage;
// set uploading status on file
file.uploadStatus = "uploading";
})
.success(function(data, status, headers, config) {
if (data.notifications && data.notifications.length > 0) {
// set error status on file
file.uploadStatus = "error";
// Throw message back to user with the cause of the error
file.serverErrorMessage = data.notifications[0].message;
// Put the file in the rejected pool
scope.rejected.push(file);
} else {
// set done status on file
file.uploadStatus = "done";
// set date/time for when done - used for sorting
file.doneDate = new Date();
// Put the file in the done pool
scope.done.push(file);
}
scope.currentFile = undefined;
//after processing, test if everthing is done
_processQueueItem();
})
.error(function(evt, status, headers, config) {
// set status done
file.uploadStatus = "error";
//if the service returns a detailed error
if (evt.InnerException) {
file.serverErrorMessage = evt.InnerException.ExceptionMessage;
//Check if its the common "too large file" exception
if (evt.InnerException.StackTrace &&
evt.InnerException.StackTrace.indexOf("ValidateRequestEntityLength") > 0) {
file.serverErrorMessage = "File too large to upload";
}
} else if (evt.Message) {
file.serverErrorMessage = evt.Message;
}
// If file not found, server will return a 404 and display this message
if (status === 404) {
file.serverErrorMessage = "File not found";
}
//after processing, test if everthing is done
scope.rejected.push(file);
scope.currentFile = undefined;
_processQueueItem();
});
}
if(_filterFile(file) === true) {
function _chooseMediaType() {
scope.mediatypepickerOverlay = {
view: "mediatypepicker",
title: "Choose media type",
acceptedMediatypes: scope.acceptedMediatypes,
hideSubmitButton: true,
show: true,
submit: function(model) {
scope.contentTypeAlias = model.selectedType.alias;
scope.mediatypepickerOverlay.show = false;
scope.mediatypepickerOverlay = null;
_processQueueItem();
},
close: function(oldModel) {
if(file.$error) {
scope.rejected.push(file);
} else {
scope.queue.push(file);
}
scope.queue.map(function(file) {
file.uploadStatus = "error";
file.serverErrorMessage = "Cannot upload this file, no mediatype selected";
scope.rejected.push(file);
});
scope.queue = [];
scope.mediatypepickerOverlay.show = false;
scope.mediatypepickerOverlay = null;
}
};
}
}
});
//when queue is done, kick the uploader
if(!scope.working){
_processQueueItem();
}
}
function _processQueueItem(){
if(scope.queue.length > 0){
scope.currentFile = scope.queue.shift();
_upload(scope.currentFile);
}else if(scope.done.length > 0){
if(scope.filesUploaded){
//queue is empty, trigger the done action
scope.filesUploaded(scope.done);
}
//auto-clear the done queue after 3 secs
var currentLength = scope.done.length;
$timeout(function(){
scope.done.splice(0, currentLength);
}, 3000);
}
}
function _upload(file) {
scope.propertyAlias = scope.propertyAlias ? scope.propertyAlias : "umbracoFile";
scope.contentTypeAlias = scope.contentTypeAlias ? scope.contentTypeAlias : "Image";
Upload.upload({
url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
fields: {
'currentFolder': scope.parentId,
'contentTypeAlias': scope.contentTypeAlias,
'propertyAlias': scope.propertyAlias,
'path': file.path
},
file: file
}).progress(function (evt) {
// calculate progress in percentage
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total, 10);
// set percentage property on file
file.uploadProgress = progressPercentage;
// set uploading status on file
file.uploadStatus = "uploading";
}).success(function (data, status, headers, config) {
if(data.notifications && data.notifications.length > 0) {
// set error status on file
file.uploadStatus = "error";
// Throw message back to user with the cause of the error
file.serverErrorMessage = data.notifications[0].message;
// Put the file in the rejected pool
scope.rejected.push(file);
} else {
// set done status on file
file.uploadStatus = "done";
// set date/time for when done - used for sorting
file.doneDate = new Date();
// Put the file in the done pool
scope.done.push(file);
}
scope.currentFile = undefined;
//after processing, test if everthing is done
_processQueueItem();
}).error( function (evt, status, headers, config) {
// set status done
file.uploadStatus = "error";
//if the service returns a detailed error
if (evt.InnerException) {
file.serverErrorMessage = evt.InnerException.ExceptionMessage;
//Check if its the common "too large file" exception
if (evt.InnerException.StackTrace && evt.InnerException.StackTrace.indexOf("ValidateRequestEntityLength") > 0) {
file.serverErrorMessage = "File too large to upload";
}
} else if (evt.Message) {
file.serverErrorMessage = evt.Message;
}
// If file not found, server will return a 404 and display this message
if(status === 404 ) {
file.serverErrorMessage = "File not found";
}
//after processing, test if everthing is done
scope.rejected.push(file);
scope.currentFile = undefined;
_processQueueItem();
});
}
scope.handleFiles = function(files, event){
if(scope.filesQueued){
scope.filesQueued(files, event);
}
_filesQueued(files, event);
};
}
};
});
scope.handleFiles = function(files, event) {
if (scope.filesQueued) {
scope.filesQueued(files, event);
}
_filesQueued(files, event);
};
}
};
});

58
src/Umbraco.Web.UI.Client/src/common/services/mediatypehelper.service.js Normal file
View File

@@ -0,0 +1,58 @@
/**
* @ngdoc service
* @name umbraco.services.mediaTypeHelper
* @description A helper service for the media types
**/
function mediaTypeHelper(mediaTypeResource, $q) {
var mediaTypeHelperService = {
getAllowedImagetypes: function (mediaId){
// Get All allowedTypes
return mediaTypeResource.getAllowedTypes(mediaId)
.then(function(types){
var allowedQ = types.map(function(type){
return mediaTypeResource.getById(type.id);
});
// Get full list
return $q.all(allowedQ).then(function(fullTypes){
// Find all the media types with an Image Cropper property editor
var filteredTypes = mediaTypeHelperService.getTypeWithEditor(fullTypes, ['Umbraco.ImageCropper']);
// If there is only one media type with an Image Cropper we will return this one
if(filteredTypes.length === 1) {
return filteredTypes;
// If there is more than one Image cropper, custom media types have been added, and we return all media types with and Image cropper or UploadField
} else {
return mediaTypeHelperService.getTypeWithEditor(fullTypes, ['Umbraco.ImageCropper', 'Umbraco.UploadField']);
}
});
});
},
getTypeWithEditor: function (types, editors) {
return types.filter(function (mediatype) {
for (var i = 0; i < mediatype.groups.length; i++) {
var group = mediatype.groups[i];
for (var j = 0; j < group.properties.length; j++) {
var property = group.properties[j];
if( editors.indexOf(property.editor) !== -1 ) {
return mediatype;
}
}
}
});
}
};
return mediaTypeHelperService;
}
angular.module('umbraco.services').factory('mediaTypeHelper', mediaTypeHelper);

71
src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js
View File

@@ -1,7 +1,7 @@
//used for the media picker dialog
angular.module("umbraco")
.controller("Umbraco.Dialogs.MediaPickerController",
function ($scope, mediaResource, umbRequestHelper, entityResource, $log, mediaHelper, eventsService, treeService, $cookies, $element, $timeout) {
function($scope, mediaResource, umbRequestHelper, entityResource, $log, mediaHelper, mediaTypeHelper, eventsService, treeService) {
var dialogOptions = $scope.dialogOptions;
@@ -11,29 +11,34 @@ angular.module("umbraco")
$scope.startNodeId = dialogOptions.startNodeId ? dialogOptions.startNodeId : -1;
$scope.cropSize = dialogOptions.cropSize;
//preload selected item
$scope.target = undefined;
if(dialogOptions.currentTarget){
if (dialogOptions.currentTarget) {
$scope.target = dialogOptions.currentTarget;
}
$scope.upload = function(v){
angular.element(".umb-file-dropzone-directive .file-select").click();
$scope.acceptedMediatypes = [];
mediaTypeHelper.getAllowedImagetypes($scope.startNodeId)
.then(function(types) {
$scope.acceptedMediatypes = types;
});
$scope.upload = function(v) {
angular.element(".umb-file-dropzone-directive .file-select").click();
};
$scope.dragLeave = function(el, event){
$scope.dragLeave = function(el, event) {
$scope.activeDrag = false;
};
$scope.dragEnter = function(el, event){
$scope.dragEnter = function(el, event) {
$scope.activeDrag = true;
};
$scope.submitFolder = function(e) {
if (e.keyCode === 13) {
e.preventDefault();
mediaResource
.addFolder($scope.newFolderName, $scope.currentFolder.id)
.then(function(data) {
@@ -52,21 +57,25 @@ angular.module("umbraco")
};
$scope.gotoFolder = function(folder) {
if(!folder){
folder = {id: -1, name: "Media", icon: "icon-folder"};
if (!folder) {
folder = { id: -1, name: "Media", icon: "icon-folder" };
}
if (folder.id > 0) {
entityResource.getAncestors(folder.id, "media")
.then(function(anc) {
// anc.splice(0,1);
$scope.path = _.filter(anc, function (f) {
return f.path.indexOf($scope.startNodeId) !== -1;
});
$scope.path = _.filter(anc,
function(f) {
return f.path.indexOf($scope.startNodeId) !== -1;
});
});
}
else {
mediaTypeHelper.getAllowedImagetypes(folder.id)
.then(function(types) {
$scope.acceptedMediatypes = types;
});
} else {
$scope.path = [];
}
@@ -77,49 +86,49 @@ angular.module("umbraco")
$scope.images = data.items ? data.items : [];
});
$scope.currentFolder = folder;
$scope.currentFolder = folder;
};
$scope.clickHandler = function(image, ev, select) {
ev.preventDefault();
if (image.isFolder && !select) {
$scope.gotoFolder(image);
}else{
} else {
eventsService.emit("dialogs.mediaPicker.select", image);
//we have 3 options add to collection (if multi) show details, or submit it right back to the callback
if ($scope.multiPicker) {
$scope.select(image);
image.cssclass = ($scope.dialogData.selection.indexOf(image) > -1) ? "selected" : "";
}else if($scope.showDetails) {
$scope.target= image;
} else if ($scope.showDetails) {
$scope.target = image;
$scope.target.url = mediaHelper.resolveFile(image);
}else{
} else {
$scope.submit(image);
}
}
};
$scope.exitDetails = function(){
if(!$scope.currentFolder){
$scope.exitDetails = function() {
if (!$scope.currentFolder) {
$scope.gotoFolder();
}
$scope.target = undefined;
};
$scope.onUploadComplete = function () {
$scope.onUploadComplete = function() {
$scope.gotoFolder($scope.currentFolder);
};
$scope.onFilesQueue = function(){
$scope.onFilesQueue = function() {
$scope.activeDrag = false;
};
//default root item
if(!$scope.target){
$scope.gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
if (!$scope.target) {
$scope.gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
}
});

4
src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html
View File

@@ -116,8 +116,10 @@
<div class="umb-panel-body with-footer">
<umb-file-dropzone
ng-if="acceptedMediatypes.length > 0"
accepted-mediatypes="acceptedMediatypes"
hide-dropzone="{{!activeDrag && images.length > 0}}"
parent-id="{{currentFolder.id}}"
files-uploaded="onUploadComplete"

231
src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
View File

@@ -1,9 +1,9 @@
//used for the media picker dialog
angular.module("umbraco")
.controller("Umbraco.Overlays.MediaPickerController",
function ($scope, mediaResource, umbRequestHelper, entityResource, $log, mediaHelper, eventsService, treeService, $element, $timeout, $cookies, $cookieStore, localizationService) {
function($scope, mediaResource, umbRequestHelper, entityResource, $log, mediaHelper, mediaTypeHelper, eventsService, treeService, $element, $timeout, $cookies, $cookieStore, localizationService) {
if(!$scope.model.title) {
if (!$scope.model.title) {
$scope.model.title = localizationService.localize("defaultdialogs_selectMedia");
}
@@ -16,60 +16,59 @@ angular.module("umbraco")
$scope.startNodeId = dialogOptions.startNodeId ? dialogOptions.startNodeId : -1;
$scope.cropSize = dialogOptions.cropSize;
$scope.lastOpenedNode = $cookieStore.get("umbLastOpenedMediaNodeId");
if($scope.onlyImages){
$scope.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
}
else {
$scope.acceptedFileTypes = !mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.disallowedUploadFiles);
if ($scope.onlyImages) {
$scope.acceptedFileTypes = mediaHelper
.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
} else {
$scope.acceptedFileTypes = !mediaHelper
.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.disallowedUploadFiles);
}
$scope.maxFileSize = Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB";
$scope.model.selectedImages = [];
$scope.acceptedMediatypes = [];
mediaTypeHelper.getAllowedImagetypes($scope.startNodeId)
.then(function(types) {
$scope.acceptedMediatypes = types;
});
//preload selected item
$scope.target = undefined;
if(dialogOptions.currentTarget){
if (dialogOptions.currentTarget) {
$scope.target = dialogOptions.currentTarget;
}
$scope.upload = function(v){
angular.element(".umb-file-dropzone-directive .file-select").click();
$scope.upload = function(v) {
angular.element(".umb-file-dropzone-directive .file-select").click();
};
$scope.dragLeave = function(el, event){
$scope.dragLeave = function(el, event) {
$scope.activeDrag = false;
};
$scope.dragEnter = function(el, event){
$scope.dragEnter = function(el, event) {
$scope.activeDrag = true;
};
$scope.submitFolder = function() {
if ($scope.newFolderName) {
mediaResource
.addFolder($scope.newFolderName, $scope.currentFolder.id)
.then(function(data) {
//we've added a new folder so lets clear the tree cache for that specific item
treeService.clearCache({
cacheKey: "__media", //this is the main media tree cache key
childrenOf: data.parentId //clear the children of the parent
});
if ($scope.newFolderName) {
mediaResource
.addFolder($scope.newFolderName, $scope.currentFolder.id)
.then(function(data) {
//we've added a new folder so lets clear the tree cache for that specific item
treeService.clearCache({
cacheKey: "__media", //this is the main media tree cache key
childrenOf: data.parentId //clear the children of the parent
$scope.gotoFolder(data);
$scope.showFolderInput = false;
$scope.newFolderName = "";
});
$scope.gotoFolder(data);
$scope.showFolderInput = false;
$scope.newFolderName = "";
});
} else {
$scope.showFolderInput = false;
}
} else {
$scope.showFolderInput = false;
}
};
$scope.enterSubmitFolder = function(event) {
@@ -81,58 +80,61 @@ angular.module("umbraco")
$scope.gotoFolder = function(folder) {
if(!$scope.multiPicker) {
if (!$scope.multiPicker) {
deselectAllImages($scope.model.selectedImages);
}
if(!folder){
folder = {id: -1, name: "Media", icon: "icon-folder"};
if (!folder) {
folder = { id: -1, name: "Media", icon: "icon-folder" };
}
if (folder.id > 0) {
entityResource.getAncestors(folder.id, "media")
.then(function(anc) {
// anc.splice(0,1);
$scope.path = _.filter(anc, function (f) {
return f.path.indexOf($scope.startNodeId) !== -1;
});
$scope.path = _.filter(anc,
function(f) {
return f.path.indexOf($scope.startNodeId) !== -1;
});
});
}
else {
mediaTypeHelper.getAllowedImagetypes(folder.id)
.then(function(types) {
$scope.acceptedMediatypes = types;
});
} else {
$scope.path = [];
}
//mediaResource.rootMedia()
mediaResource.getChildren(folder.id)
.then(function(data) {
$scope.searchTerm = "";
$scope.images = data.items ? data.items : [];
.then(function(data) {
$scope.searchTerm = "";
$scope.images = data.items ? data.items : [];
// set already selected images to selected
for (var folderImageIndex = 0; folderImageIndex < $scope.images.length; folderImageIndex++) {
// set already selected images to selected
for (var folderImageIndex = 0; folderImageIndex < $scope.images.length; folderImageIndex++) {
var folderImage = $scope.images[folderImageIndex];
var imageIsSelected = false;
var folderImage = $scope.images[folderImageIndex];
var imageIsSelected = false;
for (var selectedImageIndex = 0;
selectedImageIndex < $scope.model.selectedImages.length;
selectedImageIndex++) {
var selectedImage = $scope.model.selectedImages[selectedImageIndex];
for (var selectedImageIndex = 0; selectedImageIndex < $scope.model.selectedImages.length; selectedImageIndex++) {
var selectedImage = $scope.model.selectedImages[selectedImageIndex];
if(folderImage.key === selectedImage.key) {
imageIsSelected = true;
if (folderImage.key === selectedImage.key) {
imageIsSelected = true;
}
}
}
if(imageIsSelected) {
folderImage.selected = true;
}
}
});
if (imageIsSelected) {
folderImage.selected = true;
}
}
});
$scope.currentFolder = folder;
// for some reason i cannot set cookies with cookieStore
document.cookie="umbLastOpenedMediaNodeId=" + folder.id;
document.cookie = "umbLastOpenedMediaNodeId=" + folder.id;
};
@@ -144,52 +146,40 @@ angular.module("umbraco")
eventsService.emit("dialogs.mediaPicker.select", image);
selectImage(image);
}
} else {
eventsService.emit("dialogs.mediaPicker.select", image);
if($scope.showDetails) {
if ($scope.showDetails) {
$scope.target = image;
$scope.target.url = mediaHelper.resolveFile(image);
$scope.openDetailsDialog();
} else {
selectImage(image);
}
}
};
$scope.clickItemName = function(item) {
if(item.isFolder) {
if (item.isFolder) {
$scope.gotoFolder(item);
}
};
function selectImage(image) {
if(image.selected) {
for(var i = 0; $scope.model.selectedImages.length > i; i++) {
if (image.selected) {
for (var i = 0; $scope.model.selectedImages.length > i; i++) {
var imageInSelection = $scope.model.selectedImages[i];
if(image.key === imageInSelection.key) {
if (image.key === imageInSelection.key) {
image.selected = false;
$scope.model.selectedImages.splice(i, 1);
}
}
} else {
if(!$scope.multiPicker) {
if (!$scope.multiPicker) {
deselectAllImages($scope.model.selectedImages);
}
image.selected = true;
$scope.model.selectedImages.push(image);
}
}
function deselectAllImages(images) {
@@ -200,64 +190,53 @@ angular.module("umbraco")
images.length = 0;
}
$scope.onUploadComplete = function () {
$scope.onUploadComplete = function() {
$scope.gotoFolder($scope.currentFolder);
};
$scope.onFilesQueue = function(){
$scope.onFilesQueue = function() {
$scope.activeDrag = false;
};
//default root item
if (!$scope.target) {
if ($scope.lastOpenedNode && $scope.lastOpenedNode !== -1) {
entityResource.getById($scope.lastOpenedNode, "media")
.then(function(node) {
// make sure that las opened node is on the same path as start node
var nodePath = node.path.split(",");
if($scope.lastOpenedNode && $scope.lastOpenedNode !== -1) {
entityResource.getById($scope.lastOpenedNode, "media")
.then(function(node){
// make sure that las opened node is on the same path as start node
var nodePath = node.path.split(",");
if(nodePath.indexOf($scope.startNodeId.toString()) !== -1) {
$scope.gotoFolder({id: $scope.lastOpenedNode, name: "Media", icon: "icon-folder"});
} else {
$scope.gotoFolder({id: $scope.startNodeId, name: "Media", icon: "icon-folder"});
}
}, function (err) {
$scope.gotoFolder({id: $scope.startNodeId, name: "Media", icon: "icon-folder"});
});
} else {
$scope.gotoFolder({id: $scope.startNodeId, name: "Media", icon: "icon-folder"});
}
if (nodePath.indexOf($scope.startNodeId.toString()) !== -1) {
$scope
.gotoFolder({ id: $scope.lastOpenedNode, name: "Media", icon: "icon-folder" });
} else {
$scope.gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
}
},
function(err) {
$scope.gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
});
} else {
$scope.gotoFolder({ id: $scope.startNodeId, name: "Media", icon: "icon-folder" });
}
}
$scope.openDetailsDialog = function() {
$scope.mediaPickerDetailsOverlay = {};
$scope.mediaPickerDetailsOverlay.show = true;
$scope.mediaPickerDetailsOverlay = {};
$scope.mediaPickerDetailsOverlay.show = true;
$scope.mediaPickerDetailsOverlay.submit = function(model) {
$scope.mediaPickerDetailsOverlay.submit = function(model) {
$scope.model.selectedImages.push($scope.target);
$scope.model.submit($scope.model);
$scope.model.selectedImages.push($scope.target);
$scope.model.submit($scope.model);
$scope.mediaPickerDetailsOverlay.show = false;
$scope.mediaPickerDetailsOverlay = null;
};
$scope.mediaPickerDetailsOverlay.close = function(oldModel) {
$scope.mediaPickerDetailsOverlay.show = false;
$scope.mediaPickerDetailsOverlay = null;
};
$scope.mediaPickerDetailsOverlay.show = false;
$scope.mediaPickerDetailsOverlay = null;
};
$scope.mediaPickerDetailsOverlay.close = function(oldModel) {
$scope.mediaPickerDetailsOverlay.show = false;
$scope.mediaPickerDetailsOverlay = null;
};
};
});

2
src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
View File

@@ -63,6 +63,8 @@
</div>
<umb-file-dropzone
ng-if="acceptedMediatypes.length > 0"
accepted-mediatypes="acceptedMediatypes"
parent-id="{{currentFolder.id}}"
files-uploaded="onUploadComplete"
files-queued="onFilesQueue"

10
src/Umbraco.Web.UI.Client/src/views/common/overlays/mediatypepicker/mediapicktypepicker.controller.js Normal file
View File

@@ -0,0 +1,10 @@
angular.module("umbraco").controller("Umbraco.Overlays.MediaTypePickerController",
function ($scope) {
$scope.select = function(mediatype){
$scope.model.selectedType = mediatype;
$scope.model.submit($scope.model);
$scope.model.show = false;
}
});

15
src/Umbraco.Web.UI.Client/src/views/common/overlays/mediatypepicker/mediatypepicker.html Normal file
View File

@@ -0,0 +1,15 @@
<div ng-controller="Umbraco.Overlays.MediaTypePickerController">
<ul class="umb-card-grid">
<li
ng-repeat="mediatype in model.acceptedMediatypes | orderBy:'name'"
ng-click="select(mediatype)"
class="-three-in-row">
<a class="umb-card-grid-item" href="" title="{{mediatype.name}}">
<i class="{{ mediatype.icon }}"></i>
{{ mediatype.name }}
</a>
</li>
</ul>
</div>

7
src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
View File

@@ -98,4 +98,11 @@
</ng-form>
<umb-overlay
ng-if="mediatypepickerOverlay.show"
model="mediatypepickerOverlay"
view="mediatypepickerOverlay.view"
position="right">
</umb-overlay>
</div>

3
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
View File

@@ -39,7 +39,8 @@
on-drag-enter="vm.dragEnter()">
<umb-file-dropzone
ng-if="!vm.isRecycleBin"
ng-if="!vm.isRecycleBin && vm.acceptedMediatypes.length > 0"
accepted-mediatypes="vm.acceptedMediatypes"
parent-id="{{vm.nodeId}}"
files-uploaded="vm.onUploadComplete"
accept="{{vm.acceptedFileTypes}}"

10
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
View File

@@ -9,7 +9,7 @@
(function() {
"use strict";
function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location, listViewHelper) {
function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location, listViewHelper, mediaTypeHelper) {
var vm = this;
@@ -21,6 +21,7 @@
vm.mediaDetailsTooltip = {};
vm.itemsWithoutFolders = [];
vm.isRecycleBin = $scope.contentId === '-21' || $scope.contentId === '-20';
vm.acceptedMediatypes = [];
vm.dragEnter = dragEnter;
vm.dragLeave = dragLeave;
@@ -35,6 +36,13 @@
function activate() {
vm.itemsWithoutFolders = filterOutFolders($scope.items);
if($scope.entityType === 'media') {
mediaTypeHelper.getAllowedImagetypes(vm.nodeId).then(function (types) {
vm.acceptedMediatypes = types;
});
}
}
function filterOutFolders(items) {

3
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.html
View File

@@ -9,7 +9,8 @@
on-drag-enter="vm.dragEnter()">
<umb-file-dropzone
ng-if="!vm.isRecycleBin"
ng-if="!vm.isRecycleBin && vm.acceptedMediatypes.length > 0"
accepted-mediatypes="vm.acceptedMediatypes"
parent-id="{{vm.nodeId}}"
files-uploaded="vm.onUploadComplete"
accept="{{vm.acceptedFileTypes}}"

37
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/list/list.listviewlayout.controller.js
View File

@@ -1,7 +1,7 @@
(function () {
"use strict";
function ListViewListLayoutController($scope, listViewHelper, $location, mediaHelper) {
function ListViewListLayoutController($scope, listViewHelper, $location, mediaHelper, mediaTypeHelper) {
var vm = this;
@@ -11,6 +11,7 @@
vm.maxFileSize = Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB";
vm.activeDrag = false;
vm.isRecycleBin = $scope.contentId === '-21' || $scope.contentId === '-20';
vm.acceptedMediatypes = [];
vm.selectItem = selectItem;
vm.clickItem = clickItem;
@@ -23,39 +24,49 @@
vm.onFilesQueue = onFilesQueue;
vm.onUploadComplete = onUploadComplete;
function activate() {
if ($scope.entityType === 'media') {
mediaTypeHelper.getAllowedImagetypes(vm.nodeId).then(function (types) {
vm.acceptedMediatypes = types;
});
}
}
function selectAll($event) {
listViewHelper.selectAllItems($scope.items, $scope.selection, $event);
}
}
function isSelectedAll() {
return listViewHelper.isSelectedAll($scope.items, $scope.selection);
}
}
function selectItem(selectedItem, $index, $event) {
listViewHelper.selectHandler(selectedItem, $index, $scope.items, $scope.selection, $event);
}
}
function clickItem(item) {
// if item.id is 2147483647 (int.MaxValue) use item.key
$location.path($scope.entityType + '/' +$scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id));
}
}
function isSortDirection(col, direction) {
return listViewHelper.setSortingDirection(col, direction, $scope.options);
}
}
function sort(field, allow, isSystem) {
if (allow) {
$scope.options.orderBySystemField = isSystem;
listViewHelper.setSorting(field, allow, $scope.options);
$scope.getContent($scope.contentId);
}
}
}
}
// Dropzone upload functions
// Dropzone upload functions
function dragEnter(el, event) {
vm.activeDrag = true;
}
}
function dragLeave(el, event) {
vm.activeDrag = false;
@@ -63,11 +74,13 @@
function onFilesQueue() {
vm.activeDrag = false;
}
}
function onUploadComplete() {
$scope.getContent($scope.contentId);
}
}
activate();
}