From 1bac3f30e369f0cdcf37dfcebd94903e8e27babb Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Thu, 10 May 2012 00:15:53 +0000
Subject: [PATCH] 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 |  1 +
 wp-includes/css/customize-controls.dev.css |  9 +++++++++
 wp-includes/js/customize-controls.dev.js   | 10 ++++++++--
 wp-includes/js/plupload/wp-plupload.dev.js | 17 +++++++++++++----
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php
index 6e1452174e..c74947bb44 100644
--- a/wp-includes/class-wp-customize-control.php
+++ b/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
 	}
 
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index be666f49de..634ae22c8a 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index 98b6081955..e6fa3bc5cd 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/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');
diff --git a/wp-includes/js/plupload/wp-plupload.dev.js b/wp-includes/js/plupload/wp-plupload.dev.js
index 98911b6d39..9f69220106 100644
--- a/wp-includes/js/plupload/wp-plupload.dev.js
+++ b/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 = {