Adds drag drop to media dashboard

This commit is contained in:
perploug
2013-09-27 11:22:26 +02:00
parent 812ed78cd9
commit 10b58fbd29
2 changed files with 73 additions and 5 deletions

View File

@@ -21,8 +21,61 @@ function startupLatestEditsController($scope) {
}
angular.module("umbraco").controller("Umbraco.Dashboard.StartupLatestEditsController", startupLatestEditsController);
function MediaFolderBrowserDashboardController($scope) {
function MediaFolderBrowserDashboardController($rootScope, $scope, assetsService, $routeParams, $timeout, $element, $location, umbRequestHelper, mediaResource, imageHelper) {
var dialogOptions = $scope.$parent.dialogOptions;
$scope.filesUploading = [];
$scope.options = {
url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"),
autoUpload: true,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 200,
previewMaxHeight: 200,
previewCrop: true,
formData:{
currentFolder: -1
}
};
$scope.loadChildren = function(){
mediaResource.getChildren(-1)
.then(function(data) {
$scope.images = data.items;
});
};
$scope.$on('fileuploadstop', function(event, files){
$scope.loadChildren($scope.options.formData.currentFolder);
$scope.queue = [];
$scope.filesUploading = [];
});
$scope.$on('fileuploadprocessalways', function(e,data) {
var i;
$scope.$apply(function() {
$scope.filesUploading.push(data.files[data.index]);
});
});
// All these sit-ups are to add dropzone area and make sure it gets removed if dragging is aborted!
$scope.$on('fileuploaddragover', function(event, files) {
if (!$scope.dragClearTimeout) {
$scope.$apply(function() {
$scope.dropping = true;
});
} else {
$timeout.cancel($scope.dragClearTimeout);
}
$scope.dragClearTimeout = $timeout(function () {
$scope.dropping = null;
$scope.dragClearTimeout = null;
}, 300);
});
//init load
$scope.loadChildren();
}
angular.module("umbraco").controller("Umbraco.Dashboard.MediaFolderBrowserDashboardController", MediaFolderBrowserDashboardController);

View File

@@ -1,3 +1,18 @@
<div class="" ng-controller="Umbraco.Dashboard.MediaFolderBrowserDashboardController">
</div>
<form ng-controller="Umbraco.Dashboard.MediaFolderBrowserDashboardController" id="fileupload"
style="width: 100%"
method="POST" enctype="multipart/form-data"
class="umb-editor umb-folderbrowser"
data-file-upload="options"
data-file-upload-progress=""
data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<umb-upload-dropzone dropping="dropping" files="filesUploading">
</umb-upload-dropzone>
<umb-photo-folder
min-height="220"
min-width="220"
on-click="clickHandler"
ng-model="images"
/>
</form>