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.

Built from https://develop.svn.wordpress.org/trunk@27343


git-svn-id: http://core.svn.wordpress.org/trunk@27195 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/edit-rtl.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;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 250000;
+	display: none;
+	text-align: center;
+}
+
+.uploader-editor-content {
+	border: 1px dashed #fff;
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	left: 10px;
+	bottom: 10px;
+	pointer-events: none;
+}
+
+#poststuff .uploader-editor-content h3 {
+	margin: -0.5em 0 0;
+	position: absolute;
+	top: 50%;
+	right: 0;
+	left: 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 */

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 */

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();
 		}
 	};
 

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
 	 *

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();

wp-includes/js/plupload/wp-plupload.min.js

@@ -1 +1 @@
-window.wp=window.wp||{},function(a,b){var c;"undefined"!=typeof _wpPluploadSettings&&(c=function(a){var d,e,f=this,g={container:"container",browser:"browse_button",dropzone:"drop_element"};if(this.supports={upload:c.browser.supported},this.supported=this.supports.upload,this.supported){this.plupload=b.extend(!0,{multipart_params:{}},c.defaults),this.container=document.body,b.extend(!0,this,a);for(d in this)b.isFunction(this[d])&&(this[d]=b.proxy(this[d],this));for(d in g)this[d]&&(this[d]=b(this[d]).first(),this[d].length?(this[d].prop("id")||this[d].prop("id","__wp-uploader-id-"+c.uuid++),this.plupload[g[d]]=this[d].prop("id")):delete this[d]);(this.browser&&this.browser.length||this.dropzone&&this.dropzone.length)&&(this.uploader=new plupload.Uploader(this.plupload),delete this.plupload,this.param(this.params||{}),delete this.params,e=function(a,b,d){d.attachment&&d.attachment.destroy(),c.errors.unshift({message:a||pluploadL10n.default_error,data:b,file:d}),f.error(a,b,d)},this.uploader.bind("init",function(a){var b,d,e,g=f.dropzone;if(e=f.supports.dragdrop=a.features.dragdrop&&!c.browser.mobile,g){if(g.toggleClass("supports-drag-drop",!!e),!e)return g.unbind(".wp-uploader");g.bind("dragover.wp-uploader",function(){b&&clearTimeout(b),d||(g.trigger("dropzone:enter").addClass("drag-over"),d=!0)}),g.bind("dragleave.wp-uploader, drop.wp-uploader",function(){b=setTimeout(function(){d=!1,g.trigger("dropzone:leave").removeClass("drag-over")},0)})}}),this.uploader.init(),this.browser?this.browser.on("mouseenter",this.refresh):(this.uploader.disableBrowse(!0),b("#"+this.uploader.id+"_html5_container").hide()),this.uploader.bind("FilesAdded",function(a,b){_.each(b,function(a){var b,d;plupload.FAILED!==a.status&&(b=_.extend({file:a,uploading:!0,date:new Date,filename:a.name,menuOrder:0,uploadedTo:wp.media.model.settings.post.id},_.pick(a,"loaded","size","percent")),d=/(?:jpe?g|png|gif)$/i.exec(a.name),d&&(b.type="image",b.subtype="jpg"===d[0]?"jpeg":d[0]),a.attachment=wp.media.model.Attachment.create(b),c.queue.add(a.attachment),f.added(a.attachment))}),a.refresh(),a.start()}),this.uploader.bind("UploadProgress",function(a,b){b.attachment.set(_.pick(b,"loaded","percent")),f.progress(b.attachment)}),this.uploader.bind("FileUploaded",function(a,b,d){var g;try{d=JSON.parse(d.response)}catch(h){return e(pluploadL10n.default_error,h,b)}return!_.isObject(d)||_.isUndefined(d.success)?e(pluploadL10n.default_error,null,b):d.success?(_.each(["file","loaded","size","percent"],function(a){b.attachment.unset(a)}),b.attachment.set(_.extend(d.data,{uploading:!1})),wp.media.model.Attachment.get(d.data.id,b.attachment),g=c.queue.all(function(a){return!a.get("uploading")}),g&&c.queue.reset(),void f.success(b.attachment)):e(d.data&&d.data.message,d.data,b)}),this.uploader.bind("Error",function(a,b){var d,f=pluploadL10n.default_error;for(d in c.errorMap)if(b.code===plupload[d]){f=c.errorMap[d],_.isFunction(f)&&(f=f(b.file,b));break}e(f,b,b.file),a.refresh()}),this.init())}},b.extend(c,_wpPluploadSettings),c.uuid=0,c.errorMap={FAILED:pluploadL10n.upload_failed,FILE_EXTENSION_ERROR:pluploadL10n.invalid_filetype,IMAGE_FORMAT_ERROR:pluploadL10n.not_an_image,IMAGE_MEMORY_ERROR:pluploadL10n.image_memory_exceeded,IMAGE_DIMENSIONS_ERROR:pluploadL10n.image_dimensions_exceeded,GENERIC_ERROR:pluploadL10n.upload_failed,IO_ERROR:pluploadL10n.io_error,HTTP_ERROR:pluploadL10n.http_error,SECURITY_ERROR:pluploadL10n.security_error,FILE_SIZE_ERROR:function(a){return pluploadL10n.file_exceeds_size_limit.replace("%s",a.name)}},b.extend(c.prototype,{param:function(a,c){return 1===arguments.length&&"string"==typeof a?this.uploader.settings.multipart_params[a]:void(arguments.length>1?this.uploader.settings.multipart_params[a]=c:b.extend(this.uploader.settings.multipart_params,a))},init:function(){},error:function(){},success:function(){},added:function(){},progress:function(){},complete:function(){},refresh:function(){var a,c,d,e;if(this.browser){for(a=this.browser[0];a;){if(a===document.body){c=!0;break}a=a.parentNode}c||(e="wp-uploader-browser-"+this.uploader.id,d=b("#"+e),d.length||(d=b('<div class="wp-uploader-browser" />').css({position:"fixed",top:"-1000px",left:"-1000px",height:0,width:0}).attr("id","wp-uploader-browser-"+this.uploader.id).appendTo("body")),d.append(this.browser))}this.uploader.refresh()}}),c.queue=new wp.media.model.Attachments([],{query:!1}),c.errors=new Backbone.Collection,a.Uploader=c)}(wp,jQuery);
+window.wp=window.wp||{},function(a,b){var c;"undefined"!=typeof _wpPluploadSettings&&(c=function(a){var d,e,f=this,g={container:"container",browser:"browse_button",dropzone:"drop_element"};if(this.supports={upload:c.browser.supported},this.supported=this.supports.upload,this.supported){this.plupload=b.extend(!0,{multipart_params:{}},c.defaults),this.container=document.body,b.extend(!0,this,a);for(d in this)b.isFunction(this[d])&&(this[d]=b.proxy(this[d],this));for(d in g)this[d]&&(this[d]=b(this[d]).first(),this[d].length?(this[d].prop("id")||this[d].prop("id","__wp-uploader-id-"+c.uuid++),this.plupload[g[d]]=this[d].prop("id")):delete this[d]);(this.browser&&this.browser.length||this.dropzone&&this.dropzone.length)&&(this.uploader=new plupload.Uploader(this.plupload),delete this.plupload,this.param(this.params||{}),delete this.params,e=function(a,b,d){d.attachment&&d.attachment.destroy(),c.errors.unshift({message:a||pluploadL10n.default_error,data:b,file:d}),f.error(a,b,d)},this.uploader.bind("init",function(a){var d,e,g,h=f.dropzone;if(g=f.supports.dragdrop=a.features.dragdrop&&!c.browser.mobile,h){if(h.toggleClass("supports-drag-drop",!!g),!g)return h.unbind(".wp-uploader");h.bind("dragover.wp-uploader",function(){d&&clearTimeout(d),e||(h.trigger("dropzone:enter").addClass("drag-over"),e=!0)}),h.bind("dragleave.wp-uploader, drop.wp-uploader",function(){d=setTimeout(function(){e=!1,h.trigger("dropzone:leave").removeClass("drag-over")},0)}),b(f).trigger("uploader:ready")}}),this.uploader.init(),this.browser?this.browser.on("mouseenter",this.refresh):(this.uploader.disableBrowse(!0),b("#"+this.uploader.id+"_html5_container").hide()),this.uploader.bind("FilesAdded",function(a,b){_.each(b,function(a){var b,d;plupload.FAILED!==a.status&&(b=_.extend({file:a,uploading:!0,date:new Date,filename:a.name,menuOrder:0,uploadedTo:wp.media.model.settings.post.id},_.pick(a,"loaded","size","percent")),d=/(?:jpe?g|png|gif)$/i.exec(a.name),d&&(b.type="image",b.subtype="jpg"===d[0]?"jpeg":d[0]),a.attachment=wp.media.model.Attachment.create(b),c.queue.add(a.attachment),f.added(a.attachment))}),a.refresh(),a.start()}),this.uploader.bind("UploadProgress",function(a,b){b.attachment.set(_.pick(b,"loaded","percent")),f.progress(b.attachment)}),this.uploader.bind("FileUploaded",function(a,b,d){var g;try{d=JSON.parse(d.response)}catch(h){return e(pluploadL10n.default_error,h,b)}return!_.isObject(d)||_.isUndefined(d.success)?e(pluploadL10n.default_error,null,b):d.success?(_.each(["file","loaded","size","percent"],function(a){b.attachment.unset(a)}),b.attachment.set(_.extend(d.data,{uploading:!1})),wp.media.model.Attachment.get(d.data.id,b.attachment),g=c.queue.all(function(a){return!a.get("uploading")}),g&&c.queue.reset(),void f.success(b.attachment)):e(d.data&&d.data.message,d.data,b)}),this.uploader.bind("Error",function(a,b){var d,f=pluploadL10n.default_error;for(d in c.errorMap)if(b.code===plupload[d]){f=c.errorMap[d],_.isFunction(f)&&(f=f(b.file,b));break}e(f,b,b.file),a.refresh()}),this.init())}},b.extend(c,_wpPluploadSettings),c.uuid=0,c.errorMap={FAILED:pluploadL10n.upload_failed,FILE_EXTENSION_ERROR:pluploadL10n.invalid_filetype,IMAGE_FORMAT_ERROR:pluploadL10n.not_an_image,IMAGE_MEMORY_ERROR:pluploadL10n.image_memory_exceeded,IMAGE_DIMENSIONS_ERROR:pluploadL10n.image_dimensions_exceeded,GENERIC_ERROR:pluploadL10n.upload_failed,IO_ERROR:pluploadL10n.io_error,HTTP_ERROR:pluploadL10n.http_error,SECURITY_ERROR:pluploadL10n.security_error,FILE_SIZE_ERROR:function(a){return pluploadL10n.file_exceeds_size_limit.replace("%s",a.name)}},b.extend(c.prototype,{param:function(a,c){return 1===arguments.length&&"string"==typeof a?this.uploader.settings.multipart_params[a]:void(arguments.length>1?this.uploader.settings.multipart_params[a]=c:b.extend(this.uploader.settings.multipart_params,a))},init:function(){},error:function(){},success:function(){},added:function(){},progress:function(){},complete:function(){},refresh:function(){var a,c,d,e;if(this.browser){for(a=this.browser[0];a;){if(a===document.body){c=!0;break}a=a.parentNode}c||(e="wp-uploader-browser-"+this.uploader.id,d=b("#"+e),d.length||(d=b('<div class="wp-uploader-browser" />').css({position:"fixed",top:"-1000px",left:"-1000px",height:0,width:0}).attr("id","wp-uploader-browser-"+this.uploader.id).appendTo("body")),d.append(this.browser))}this.uploader.refresh()}}),c.queue=new wp.media.model.Attachments([],{query:!1}),c.errors=new Backbone.Collection,a.Uploader=c)}(wp,jQuery);

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 }}">