BUGFIX: Fixes #6943

Added classes to dropzone when dragging and dropping files. Added
styles to the dropzone when a file could be dropped. Added a clearfloat
mixin to the mixins file.

admin/scss/_mixins.scss

@@ -60,3 +60,14 @@
     -o-box-shadow: $shadow $outerColor;
     box-shadow: $shadow $outerColor;
 }
+
+@mixin clearfix{
+	&:after{
+		content: ".";
+		display: block;
+		height: 0;
+		clear: both;
+		visibility: hidden;
+	}
+	*:first-child &{ zoom:1;}
+}

javascript/UploadField.js

@@ -30,16 +30,47 @@
 			Config: null,
 
 			onmatch: function() {
+
 				if(this.is('.readonly,.disabled')) return;
 
 				var fileInput = this.find('input');
 				var dropZone = this.find('.ss-uploadfield-dropzone');
 				var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"'));
-
+
+
+				/* Attach classes to dropzone when element can be dropped*/
+				$(document).unbind('dragover');
+				$(document).bind('dragover', function (e) {
+				    timeout = window.dropZoneTimeout;
+					var $target = $(e.target);
+				    if (!timeout) {
+				        dropZone.addClass('active');
+				    } else {
+				        clearTimeout(timeout);
+				    }				
+				    if ($target.closest('.ss-uploadfield-dropzone').length > 0) {
+				        dropZone.addClass('hover');
+				    } else {
+				        dropZone.removeClass('hover');
+				    }
+				    window.dropZoneTimeout = setTimeout(function () {
+				        window.dropZoneTimeout = null;
+				        dropZone.removeClass('active hover');
+				    }, 100);
+				});
+
+				//disable default behaviour if file dropped in the wrong area
+				$(document).bind('drop dragover', function (e){					
+				    e.preventDefault(); 
+				});
+
+
+
 				this.setConfig(config);
 				this.fileupload($.extend(true, 
-					{
+					{					
 						formData: function(form) {
+
 							return [
 								{name: 'SecurityID', value: $(form).find(':input[name=SecurityID]').val()},
 								{name: 'ID', value: $(form).find(':input[name=ID]').val()}
@@ -90,6 +121,7 @@
 				if (this.data('fileupload')._isXHRUpload({multipart: true})) {
 					$('.ss-uploadfield-item-uploador').show();
 					dropZone.show(); // drag&drop avaliable
+
 				}
 				this._super();
 			},
@@ -147,11 +179,13 @@
 		});
 		$('div.ss-upload *').entwine({
 			getUploadField: function() {
+
 				return this.parents('div.ss-upload:first');
 			}
 		});
 		$('div.ss-upload .ss-uploadfield-files .ss-uploadfield-item').entwine({
 			onmatch: function() {
+
 				this.closest('.ss-upload').find('.ss-uploadfield-addfile').addClass('borderTop');
 			},
 			onunmatch: function() {

scss/AssetUploadField.scss

@@ -3,6 +3,8 @@
 // TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
 @import "../admin/scss/themes/default.scss";
 
+
+
 #AssetUploadField {
 	border-bottom: 0;
 	@include box-shadow(none);
@@ -203,17 +205,24 @@ body.cms.ss-uploadfield-edit-iframe {
 			height: 66px;
 			width: 300px;
 			float: left;
-
+			&.active{
+				&.hover{
+					@include box-shadow(rgba(#fff,0.6) 0 0 3px 3px inset);
+				}
+			}
 			div {
+				z-index:1;
 				padding: 15px 0 0;
 				line-height: 22px;
 				font-size: 20px;
 				font-weight: bold;
 				text-align: center;
-
+				display:block;
+				margin:0 auto;
 				span {
 					display: block;
 					font-size: 12px;
+					z-index:-1;
 				}
 			}
 		}