Add the ability to drag and drop files directly onto the editor.

The file will then begin to upload and the media manager will open.

props kovshenin.
see #19845.


git-svn-id: https://develop.svn.wordpress.org/trunk@27343 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/edit.css

@@ -593,7 +593,52 @@ span.wp-media-buttons-icon:before {
 }
 
 .edit-form-section {
-	margin-bottom: 20px;
+ 	margin-bottom: 20px;
+	position: relative;
+}
+
+.uploader-editor {
+	background: rgba( 150, 150, 150, 0.9 );
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 250000;
+	display: none;
+	text-align: center;
+}
+
+.uploader-editor-content {
+	border: 1px dashed #fff;
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	right: 10px;
+	bottom: 10px;
+	pointer-events: none;
+}
+
+#poststuff .uploader-editor-content h3 {
+	margin: -0.5em 0 0;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	transform: translateY( -50% );
+	font-size: 40px;
+	color: #fff;
+	padding: 0;
+	display: none;
+	pointer-events: none;
+}
+
+.uploader-editor.droppable {
+	background: rgba( 0, 86, 132, 0.9 );
+}
+
+#poststuff .uploader-editor.droppable h3 {
+	display: block;
 }
 
 /* TinyMCE */

src/wp-includes/js/media-editor.js

@@ -1030,6 +1030,9 @@
 
 				wp.media.editor.open( editor, options );
 			});
+
+			// Initialize and render the Editor drag-and-drop uploader.
+			new wp.media.view.EditorUploader().render();
 		}
 	};
 

src/wp-includes/js/media-views.js

@@ -2781,6 +2781,12 @@
 			dropzone = this.uploader.dropzone;
 			dropzone.on( 'dropzone:enter', _.bind( this.show, this ) );
 			dropzone.on( 'dropzone:leave', _.bind( this.hide, this ) );
+
+			$( this.uploader ).on( 'uploader:ready', _.bind( this._ready, this ) );
+		},
+
+		_ready: function() {
+			this.controller.trigger( 'uploader:ready' );
 		},
 
 		show: function() {
@@ -2806,6 +2812,103 @@
 		}
 	});
 
+	/**
+	 * wp.media.view.EditorUploader
+	 *
+	 * @constructor
+	 * @augments wp.media.View
+	 * @augments wp.Backbone.View
+	 * @augments Backbone.View
+	 */
+	media.view.EditorUploader = media.View.extend({
+		tagName:   'div',
+		className: 'uploader-editor',
+		template:  media.template( 'uploader-editor' ),
+
+		events: {
+			'drop': 'drop',
+			'dragover': 'dropzoneDragover',
+			'dragleave': 'dropzoneDragleave',
+		},
+
+		initialize: function() {
+			this.files = [];
+			this.$document = $(document);
+			this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
+			this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
+			return this;
+		},
+
+		refresh: function() {
+			// Hide the dropzone only if dragging has left the screen.
+			return this.$el.toggle( this.overContainer || this.overDropzone );
+		},
+
+		render: function() {
+			media.View.prototype.render.apply( this, arguments );
+			$( '.edit-form-section' ).append( this.$el );
+			return this;
+		},
+
+		drop: function( event ) {
+			this.files = event.originalEvent.dataTransfer.files;
+			if ( this.files.length < 1 )
+				return;
+
+			this.containerDragleave();
+			this.dropzoneDragleave();
+
+			if ( ! this.workflow ) {
+				this.workflow = wp.media.editor.open( 'content', {
+					frame:    'post',
+					state:    'insert',
+					title:    wp.media.view.l10n.addMedia,
+					multiple: true
+				});
+				this.workflow.on( 'uploader:ready', this.addFiles, this );
+			} else {
+				this.workflow.state().reset();
+				this.addFiles.apply( this );
+				this.workflow.open();
+			}
+
+			return false;
+		},
+
+		addFiles: function() {
+			if ( this.files.length ) {
+				this.workflow.uploader.uploader.uploader.addFile( _.toArray( this.files ) );
+				this.files = [];
+			}
+			return this;
+		},
+
+		containerDragover: function() {
+			this.overContainer = true;
+			this.refresh();
+		},
+
+		containerDragleave: function() {
+			this.overContainer = false;
+
+			// Throttle dragleave because it's called when bouncing from some elements to others.
+			_.delay( _.bind( this.refresh, this ), 50 );
+		},
+
+		dropzoneDragover: function() {
+			this.$el.addClass( 'droppable' );
+			this.overDropzone = true;
+			_.defer( _.bind( this.refresh, this ) );
+			return false;
+		},
+
+		dropzoneDragleave: function() {
+			this.$el.removeClass( 'droppable' );
+			this.overDropzone = false;
+			this.refresh();
+		}
+	});
+
 	/**
 	 * wp.media.view.UploaderInline
 	 *

src/wp-includes/js/plupload/wp-plupload.js

@@ -149,6 +149,8 @@ window.wp = window.wp || {};
 					dropzone.trigger('dropzone:leave').removeClass('drag-over');
 				}, 0 );
 			});
+
+			$(self).trigger( 'uploader:ready' );
 		});
 
 		this.uploader.init();

src/wp-includes/media-template.php

@@ -41,6 +41,12 @@ function wp_print_media_templates() {
 		</div>
 	</script>
 
+	<script type="text/html" id="tmpl-uploader-editor">
+		<div class="uploader-editor-content">
+			<h3><?php _e( 'Drop files to upload' ); ?></h3>
+		</div>
+	</script>
+
 	<script type="text/html" id="tmpl-uploader-inline">
 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
 		<div class="uploader-inline-content {{ messageClass }}">