Update plupload to 1.5b and add "drop area" for drag and drop uploading, see #18206

git-svn-id: http://svn.automattic.com/wordpress/trunk@18701 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/media.dev.css

@@ -137,13 +137,6 @@ abbr.required {
 	border-style: solid;
 }
 
-.hidden {
-	height: 0;
-	width: 0;
-	overflow: hidden;
-	border: none;
-}
-
 /* Specific to Uploader */
 
 #media-upload p.ml-submit {
@@ -370,3 +363,24 @@ h4.media-sub-title {
 #sort-buttons span {
 	margin-right: 25px;
 }
+
+.drag-drop #drag-drop-area {
+	border: 4px dashed #DDDDDD;
+    height: 300px;
+}
+
+.drag-drop .drag-drop-inside {
+	padding-top: 100px;
+}
+
+.drag-drop .drag-drop-inside p {
+	text-align: center;
+}
+
+.dragdrop-info {
+	display: none;
+}
+
+.drag-drop .dragdrop-info {
+	display: block;
+}

wp-admin/includes/media.php

@@ -1485,7 +1485,7 @@ $plupload_init = array(
 	'runtimes' => 'html5,silverlight,flash,html4',
 	'browse_button' => 'plupload-browse-button',
 	'container' => 'plupload-upload-ui',
-	'drop_element' => 'wpwrap',
+	'drop_element' => 'drag-drop-area',
 	'file_data_name' => 'async-upload',
 	'multiple_queues' => true,
 	'max_file_size' => round( (int) $max_upload_size / 1024 ) . 'kb',
@@ -1508,15 +1508,15 @@ resize_width = <?php echo get_option('large_size_w', 1024); ?>,
 wpUploaderInit = <?php echo json_encode($plupload_init); ?>;
 </script>
 
-<div id="plupload-upload-ui" class="hide-if-no-js">
+<div id="plupload-upload-ui" class="hide-if-no-js drag-drop">
 <?php do_action('pre-plupload-upload-ui'); // hook change, old name: 'pre-flash-upload-ui' ?>
-
-	<p>
-	<?php _e( 'Choose files to upload' ); ?>
-	<input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" />
-	<input id="cancel-upload" disabled="disabled" onclick="cancelUpload()" type="button" value="<?php esc_attr_e('Cancel Upload'); ?>" class="button" />
-	</p>
-	<p class="dragdrop-info"><?php _e('Or you can drop the files into this window.'); ?></p>
+<div id="drag-drop-area">
+	<div class="drag-drop-inside">
+	<p class="dragdrop-info"><?php _e('Drop files here or'); ?></p>
+	<p><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" />
+	<input id="cancel-upload" disabled="true" onclick="cancelUpload()" type="button" value="<?php esc_attr_e('Cancel Upload'); ?>" class="button" /></p>
+	</div>
+</div>
 <?php do_action('post-plupload-upload-ui'); // hook change, old name: 'post-flash-upload-ui' ?>
 </div>
 
@@ -1532,8 +1532,8 @@ wpUploaderInit = <?php echo json_encode($plupload_init); ?>;
 <?php do_action('post-html-upload-ui'); ?>
 </div>
 
-<p class="media-upload-size"><?php printf( __( 'Maximum upload file size: %d%s' ), esc_html($upload_size_unit), esc_html($sizes[$u]) ); ?></p>
-<p class="howto"><?php _e('After a file has been uploaded, you can add titles and descriptions.'); ?></p>
+<p><?php printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($sizes[$u]) ); ?> 
+<?php _e('After a file has been uploaded, you can add titles and descriptions.'); ?></p>
 
 <?php
 	do_action('post-upload-ui');

wp-includes/js/plupload/changelog.txt

@@ -1,3 +1,23 @@
+Version 1.5b (2011-09-11)
+	UI Widget: Fix sortable logic.
+	UI Widget: Fix bug, when message was displayed simultaneously across all Plupload UI instances on the page.
+	UI Widget: notify() method is now public - users can throw their own messages into the widget header.
+	HTML4/HTML5: Revise input[type=file] placement logic to support cursor styling on Geko 2+.
+	HTML5: Revise Drag'n'Drop detection logic.
+	HTML5: Make Exif and GPS information available to user, introduce two new events: ExifData and GpsData.
+	HTML5: Add support for File.prototype.slice() method (mozSlice/webkitSlice) in order to be able to upload files in chunks without preloading.
+	HTML5: Remove any JPEG headers before restoring them, 'cause user agent (like Chrome), might be inserting it's own.
+	Flash: Remove a limit on the depth of image header check, since it still fails in some cases and performance gain is negligible.
+	Flash: Fix regression, when runtime hanged when not images where passed in as images.	
+	SilverLight: Fix bug, when JSON serializer was failing on null.
+	SilverLight: Remove cast to integer for chunk boundary, which resulted in a wrong size for last chunks on huge files.
+	SilverLight: Increase read buffer, add disposal of ImageStream and FileStream, optimize for performance.
+	Updated build.xml to include language packs in release package under js/ folder.
+	Gears/BrowserPlus: Add support for * file filter.
+	BeforeUpload now can cancel upload if required.
+	Additional MIME types: text/csv, image/photoshop, video/x-ms-wmv, video/avi, video/webm support
+	Additional language packs: Japanese
+	Cleaned examples.
 Version 1.4.3.2 (2011-04-13)
 	Fixed bug in HTML5 runtime, when was reduced by a factor of 100 after every upload.
 Version 1.4.3.1 (2011-04-12)

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

@@ -398,13 +398,8 @@ jQuery(document).ready(function($){
 		uploader.bind('Init', function(up) {
 			setResize( getUserSetting('upload_resize', false) );
 
-			if ( up.features.dragdrop ) {
-				$('.dragdrop-info').show();
-				
-				if ( $('#media-upload').length )
-					up.settings.drop_element = 'media-upload';
-			}
-				
+			if ( !up.features.dragdrop )
+				$('#plupload-upload-ui').removeClass('drag-drop');
 		});
 
 		uploader.init();

wp-includes/js/plupload/plupload.html4.js

@@ -1 +1 @@
-(function(d,a,b,c){function e(f){return a.getElementById(f)}b.runtimes.Html4=b.addRuntime("html4",{getFeatures:function(){return{multipart:true,canOpenDialog:navigator.userAgent.indexOf("WebKit")!==-1}},init:function(f,g){f.bind("Init",function(p){var j=a.body,n,h="javascript",k,x,q,z=[],r=/MSIE/.test(navigator.userAgent),t=[],m=p.settings.filters,o,l,s,w;no_type_restriction:for(o=0;o<m.length;o++){l=m[o].extensions.split(/,/);for(w=0;w<l.length;w++){if(l[w]==="*"){t=[];break no_type_restriction}s=b.mimeTypes[l[w]];if(s){t.push(s)}}}t=t.join(",");function v(){var B,y,i,A;q=b.guid();z.push(q);B=a.createElement("form");B.setAttribute("id","form_"+q);B.setAttribute("method","post");B.setAttribute("enctype","multipart/form-data");B.setAttribute("encoding","multipart/form-data");B.setAttribute("target",p.id+"_iframe");B.style.position="absolute";y=a.createElement("input");y.setAttribute("id","input_"+q);y.setAttribute("type","file");y.setAttribute("accept",t);y.setAttribute("size",1);A=e(p.settings.browse_button);if(p.features.canOpenDialog&&A){b.addEvent(e(p.settings.browse_button),"click",function(C){y.click();C.preventDefault()},p.id)}b.extend(y.style,{width:"100%",height:"100%",opacity:0,fontSize:"99px"});b.extend(B.style,{overflow:"hidden"});i=p.settings.shim_bgcolor;if(i){B.style.background=i}if(r){b.extend(y.style,{filter:"alpha(opacity=0)"})}b.addEvent(y,"change",function(F){var D=F.target,C,E=[],G;if(D.value){e("form_"+q).style.top=-1048575+"px";C=D.value.replace(/\\/g,"/");C=C.substring(C.length,C.lastIndexOf("/")+1);E.push(new b.File(q,C));if(!p.features.canOpenDialog){b.removeAllEvents(B,p.id)}else{b.removeEvent(A,"click",p.id)}b.removeEvent(y,"change",p.id);v();if(E.length){f.trigger("FilesAdded",E)}}},p.id);B.appendChild(y);j.appendChild(B);p.refresh()}function u(){var i=a.createElement("div");i.innerHTML='<iframe id="'+p.id+'_iframe" name="'+p.id+'_iframe" src="'+h+':&quot;&quot;" style="display:none"></iframe>';n=i.firstChild;j.appendChild(n);b.addEvent(n,"load",function(C){var D=C.target,B,y;if(!k){return}try{B=D.contentWindow.document||D.contentDocument||d.frames[D.id].document}catch(A){p.trigger("Error",{code:b.SECURITY_ERROR,message:b.translate("Security error."),file:k});return}y=B.documentElement.innerText||B.documentElement.textContent;if(y){k.status=b.DONE;k.loaded=1025;k.percent=100;p.trigger("UploadProgress",k);p.trigger("FileUploaded",k,{response:y})}},p.id)}if(p.settings.container){j=e(p.settings.container);if(b.getStyle(j,"position")==="static"){j.style.position="relative"}}p.bind("UploadFile",function(i,A){var B,y;if(A.status==b.DONE||A.status==b.FAILED||i.state==b.STOPPED){return}B=e("form_"+A.id);y=e("input_"+A.id);y.setAttribute("name",i.settings.file_data_name);B.setAttribute("action",i.settings.url);b.each(b.extend({name:A.target_name||A.name},i.settings.multipart_params),function(E,C){var D=a.createElement("input");b.extend(D,{type:"hidden",name:C,value:E});B.insertBefore(D,B.firstChild)});k=A;e("form_"+q).style.top=-1048575+"px";B.submit();B.parentNode.removeChild(B)});p.bind("FileUploaded",function(i){i.refresh()});p.bind("StateChanged",function(i){if(i.state==b.STARTED){u()}if(i.state==b.STOPPED){d.setTimeout(function(){b.removeEvent(n,"load",i.id);n.parentNode.removeChild(n)},0)}});p.bind("Refresh",function(A){var F,B,C,D,i,G,H,E,y;F=e(A.settings.browse_button);if(F){i=b.getPos(F,e(A.settings.container));G=b.getSize(F);H=e("form_"+q);E=e("input_"+q);b.extend(H.style,{top:i.y+"px",left:i.x+"px",width:G.w+"px",height:G.h+"px"});if(A.features.canOpenDialog){y=parseInt(F.parentNode.style.zIndex,10);if(isNaN(y)){y=0}b.extend(F.style,{zIndex:y});if(b.getStyle(F,"position")==="static"){b.extend(F.style,{position:"relative"})}b.extend(H.style,{zIndex:y-1})}C=A.settings.browse_button_hover;D=A.settings.browse_button_active;B=A.features.canOpenDialog?F:H;if(C){b.addEvent(B,"mouseover",function(){b.addClass(F,C)},A.id);b.addEvent(B,"mouseout",function(){b.removeClass(F,C)},A.id)}if(D){b.addEvent(B,"mousedown",function(){b.addClass(F,D)},A.id);b.addEvent(a.body,"mouseup",function(){b.removeClass(F,D)},A.id)}}});f.bind("FilesRemoved",function(y,B){var A,C;for(A=0;A<B.length;A++){C=e("form_"+B[A].id);if(C){C.parentNode.removeChild(C)}}});f.bind("Destroy",function(i){var y,A,B,C={inputContainer:"form_"+q,inputFile:"input_"+q,browseButton:i.settings.browse_button};for(y in C){A=e(C[y]);if(A){b.removeAllEvents(A,i.id)}}b.removeAllEvents(a.body,i.id);b.each(z,function(E,D){B=e("form_"+E);if(B){j.removeChild(B)}})});v()});g({success:true})}})})(window,document,plupload);
+(function(d,a,b,c){function e(f){return a.getElementById(f)}b.runtimes.Html4=b.addRuntime("html4",{getFeatures:function(){var f=(function(){var k=navigator,j=k.userAgent,l=k.vendor,h,g,i;h=/WebKit/.test(j);i=h&&l.indexOf("Apple")!==-1;g=d.opera&&d.opera.buildNumber;return{ie:!h&&!g&&(/MSIE/gi).test(j)&&(/Explorer/gi).test(k.appName),webkit:h,gecko:!h&&/Gecko/.test(j),safari:i,safariwin:i&&navigator.platform.indexOf("Win")!==-1,opera:!!g}}());return{multipart:true,triggerDialog:(f.gecko&&d.FormData||f.webkit)}},init:function(f,g){f.bind("Init",function(p){var j=a.body,n,h="javascript",k,x,q,z=[],r=/MSIE/.test(navigator.userAgent),t=[],m=p.settings.filters,o,l,s,w;no_type_restriction:for(o=0;o<m.length;o++){l=m[o].extensions.split(/,/);for(w=0;w<l.length;w++){if(l[w]==="*"){t=[];break no_type_restriction}s=b.mimeTypes[l[w]];if(s){t.push(s)}}}t=t.join(",");function v(){var B,y,i,A;q=b.guid();z.push(q);B=a.createElement("form");B.setAttribute("id","form_"+q);B.setAttribute("method","post");B.setAttribute("enctype","multipart/form-data");B.setAttribute("encoding","multipart/form-data");B.setAttribute("target",p.id+"_iframe");B.style.position="absolute";y=a.createElement("input");y.setAttribute("id","input_"+q);y.setAttribute("type","file");y.setAttribute("accept",t);y.setAttribute("size",1);A=e(p.settings.browse_button);if(p.features.triggerDialog&&A){b.addEvent(e(p.settings.browse_button),"click",function(C){y.click();C.preventDefault()},p.id)}b.extend(y.style,{width:"100%",height:"100%",opacity:0,fontSize:"999px"});b.extend(B.style,{overflow:"hidden"});i=p.settings.shim_bgcolor;if(i){B.style.background=i}if(r){b.extend(y.style,{filter:"alpha(opacity=0)"})}b.addEvent(y,"change",function(F){var D=F.target,C,E=[],G;if(D.value){e("form_"+q).style.top=-1048575+"px";C=D.value.replace(/\\/g,"/");C=C.substring(C.length,C.lastIndexOf("/")+1);E.push(new b.File(q,C));if(!p.features.triggerDialog){b.removeAllEvents(B,p.id)}else{b.removeEvent(A,"click",p.id)}b.removeEvent(y,"change",p.id);v();if(E.length){f.trigger("FilesAdded",E)}}},p.id);B.appendChild(y);j.appendChild(B);p.refresh()}function u(){var i=a.createElement("div");i.innerHTML='<iframe id="'+p.id+'_iframe" name="'+p.id+'_iframe" src="'+h+':&quot;&quot;" style="display:none"></iframe>';n=i.firstChild;j.appendChild(n);b.addEvent(n,"load",function(C){var D=C.target,B,y;if(!k){return}try{B=D.contentWindow.document||D.contentDocument||d.frames[D.id].document}catch(A){p.trigger("Error",{code:b.SECURITY_ERROR,message:b.translate("Security error."),file:k});return}y=B.documentElement.innerText||B.documentElement.textContent;if(y){k.status=b.DONE;k.loaded=1025;k.percent=100;p.trigger("UploadProgress",k);p.trigger("FileUploaded",k,{response:y})}},p.id)}if(p.settings.container){j=e(p.settings.container);if(b.getStyle(j,"position")==="static"){j.style.position="relative"}}p.bind("UploadFile",function(i,A){var B,y;if(A.status==b.DONE||A.status==b.FAILED||i.state==b.STOPPED){return}B=e("form_"+A.id);y=e("input_"+A.id);y.setAttribute("name",i.settings.file_data_name);B.setAttribute("action",i.settings.url);b.each(b.extend({name:A.target_name||A.name},i.settings.multipart_params),function(E,C){var D=a.createElement("input");b.extend(D,{type:"hidden",name:C,value:E});B.insertBefore(D,B.firstChild)});k=A;e("form_"+q).style.top=-1048575+"px";B.submit();B.parentNode.removeChild(B)});p.bind("FileUploaded",function(i){i.refresh()});p.bind("StateChanged",function(i){if(i.state==b.STARTED){u()}if(i.state==b.STOPPED){d.setTimeout(function(){b.removeEvent(n,"load",i.id);n.parentNode.removeChild(n)},0)}});p.bind("Refresh",function(y){var F,A,B,C,i,G,H,E,D;F=e(y.settings.browse_button);if(F){i=b.getPos(F,e(y.settings.container));G=b.getSize(F);H=e("form_"+q);E=e("input_"+q);b.extend(H.style,{top:i.y+"px",left:i.x+"px",width:G.w+"px",height:G.h+"px"});if(y.features.triggerDialog){if(b.getStyle(F,"position")==="static"){b.extend(F.style,{position:"relative"})}D=parseInt(F.style.zIndex,10);if(isNaN(D)){D=0}b.extend(F.style,{zIndex:D});b.extend(H.style,{zIndex:D-1})}B=y.settings.browse_button_hover;C=y.settings.browse_button_active;A=y.features.triggerDialog?F:H;if(B){b.addEvent(A,"mouseover",function(){b.addClass(F,B)},y.id);b.addEvent(A,"mouseout",function(){b.removeClass(F,B)},y.id)}if(C){b.addEvent(A,"mousedown",function(){b.addClass(F,C)},y.id);b.addEvent(a.body,"mouseup",function(){b.removeClass(F,C)},y.id)}}});f.bind("FilesRemoved",function(y,B){var A,C;for(A=0;A<B.length;A++){C=e("form_"+B[A].id);if(C){C.parentNode.removeChild(C)}}});f.bind("Destroy",function(i){var y,A,B,C={inputContainer:"form_"+q,inputFile:"input_"+q,browseButton:i.settings.browse_button};for(y in C){A=e(C[y]);if(A){b.removeAllEvents(A,i.id)}}b.removeAllEvents(a.body,i.id);b.each(z,function(E,D){B=e("form_"+E);if(B){j.removeChild(B)}})});v()});g({success:true})}})})(window,document,plupload);

wp-includes/script-loader.php

@@ -183,17 +183,16 @@ function wp_default_scripts( &$scripts ) {
 		'error_uploading' => __('“%s” has failed to upload due to an error')
 	);
 
-	$scripts->add( 'plupload', '/wp-includes/js/plupload/plupload.js', false, '1.4.3.2');
-	$scripts->add( 'plupload-html5', '/wp-includes/js/plupload/plupload.html5.js', array('plupload'), '1.4.3.2');
-	$scripts->add( 'plupload-flash', '/wp-includes/js/plupload/plupload.flash.js', array('plupload'), '1.4.3.2');
-	$scripts->add( 'plupload-silverlight', '/wp-includes/js/plupload/plupload.silverlight.js', array('plupload'), '1.4.3.2');
-	$scripts->add( 'plupload-gears', '/wp-includes/js/plupload/plupload.gears.js', array('plupload'), '1.4.3.2');
-	$scripts->add( 'plupload-html4', '/wp-includes/js/plupload/plupload.html4.js', array('plupload'), '1.4.3.2');
+	$scripts->add( 'plupload', '/wp-includes/js/plupload/plupload.js', false, '1.5b');
+	$scripts->add( 'plupload-html5', '/wp-includes/js/plupload/plupload.html5.js', array('plupload'), '1.5b');
+	$scripts->add( 'plupload-flash', '/wp-includes/js/plupload/plupload.flash.js', array('plupload'), '1.5b');
+	$scripts->add( 'plupload-silverlight', '/wp-includes/js/plupload/plupload.silverlight.js', array('plupload'), '1.5b');
+	$scripts->add( 'plupload-html4', '/wp-includes/js/plupload/plupload.html4.js', array('plupload'), '1.5b');
 
 	// cannot use the plupload.full.js, as it loads browserplus init JS from Yahoo
-	$scripts->add( 'plupload-full', false, array('plupload', 'plupload-html5', 'plupload-flash', 'plupload-silverlight', 'plupload-html4'), '1.4.3.2');
+	$scripts->add( 'plupload-full', false, array('plupload', 'plupload-html5', 'plupload-flash', 'plupload-silverlight', 'plupload-html4'), '1.5b');
 
-	$scripts->add( 'plupload-handlers', "/wp-includes/js/plupload/handlers$suffix.js", array('plupload-full', 'jquery'), '20110914');
+	$scripts->add( 'plupload-handlers', "/wp-includes/js/plupload/handlers$suffix.js", array('plupload-full', 'jquery'), '20110917');
 	$scripts->add_script_data( 'plupload-handlers', 'pluploadL10n', $uploader_l10n );
 
 	// keep 'swfupload' for back-compat.