Theme Customizer: Add a fallback UI for browsers that do not support drag and drop upload. see #19910, #20452, #20582.

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

wp-includes/class-wp-customize-control.php

@@ -389,6 +389,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
 		<div class="upload-dropzone">
 			<?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
 		</div>
+		<a class="button-secondary upload-fallback"><?php _e('Select File'); ?></a>
 		<?php
 	}
 

wp-includes/css/customize-controls.dev.css

@@ -473,3 +473,12 @@ body {
 	color: #777;
 	position: relative;
 }
+
+.customize-control-image .upload-dropzone,
+.uploader-drag-drop .customize-control-image .upload-fallback {
+	display: none;
+}
+
+.uploader-drag-drop .customize-control-image .upload-dropzone {
+	display: block;
+}

wp-includes/js/customize-controls.dev.js

@@ -137,12 +137,14 @@
 
 			this.success = $.proxy( this.success, this );
 
-			this.uploader = new wp.Uploader({
+			this.uploader = $.extend({
 				container: this.container,
 				browser:   this.container.find('.upload'),
 				dropzone:  this.container.find('.upload-dropzone'),
 				success:   this.success
-			});
+			}, this.uploader || {} );
+
+			this.uploader = new wp.Uploader( this.uploader );
 
 			this.remover = this.container.find('.remove');
 			this.remover.click( function( event ) {
@@ -170,6 +172,10 @@
 			var control = this,
 				panels;
 
+			this.uploader = {};
+			if ( ! wp.Uploader.dragdrop )
+				this.uploader.browser = this.container.find( '.upload-fallback' );
+
 			api.UploadControl.prototype.ready.call( this );
 
 			this.thumbnail    = this.container.find('.preview-thumbnail img');

wp-includes/js/plupload/wp-plupload.dev.js

@@ -2,9 +2,7 @@ if ( typeof wp === 'undefined' )
 	var wp = {};
 
 (function( exports, $ ) {
-	var Uploader, body;
-
-	body = $( document.body );
+	var Uploader;
 
 	/*
 	 * An object that helps create a WordPress uploader using plupload.
@@ -75,7 +73,6 @@ if ( typeof wp === 'undefined' )
 		this.uploader.init();
 
 		this.browser.on( 'mouseenter', this.refresh );
-		body.toggleClass( 'uploader-drag-drop', this.uploader.features.dragdrop );
 
 		this.uploader.bind( 'UploadProgress', this.progress );
 
@@ -123,6 +120,18 @@ if ( typeof wp === 'undefined' )
 		});
 	};
 
+	Uploader.dragdrop = (function() {
+		// Thank you, Modernizr!
+		// http://modernizr.com/
+		var div = document.createElement('div');
+		return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
+	}());
+
+	$( function() {
+		if ( Uploader.dragdrop )
+			$( document.body ).addClass('uploader-drag-drop');
+	});
+
 	Uploader.uuid = 0;
 
 	Uploader.errorMap = {