Add error message when a big file fails to upload, expose the XHR request in plipload and abort() it, see #19228

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

wp-admin/css/wp-admin.dev.css

@@ -3632,7 +3632,6 @@ abbr.required {
 	padding: 0 0 0 5px;
 }
 
-.media-item .error-div a.dismiss,
 .describe-toggle-on,
 .describe-toggle-off {
 	display: block;
@@ -3761,12 +3760,17 @@ abbr.required {
 	padding: 0;
 }
 
-.media-upload-form .media-item.error p {
+.media-upload-form .media-item.error p,
+.media-item .error-div {
 	line-height: 16px;
+	font-size: 12px;
 	margin: 10px;
 	padding: 0;
 }
 
+.media-item .error-div a.dismiss {
+	float: right;
+}
 
 /*------------------------------------------------------------------------------
   14.1 - Media Library

wp-admin/includes/media.php

@@ -1340,23 +1340,6 @@ $plupload_init = apply_filters( 'plupload_init', $plupload_init );
 <script type="text/javascript">
 var resize_height = <?php echo get_option('large_size_h', 1024); ?>, resize_width = <?php echo get_option('large_size_w', 1024); ?>,
 wpUploaderInit = <?php echo json_encode($plupload_init); ?>;
-
-jQuery(document).ready(function($){
-	function _switch(m) {
-		if ( m ) {
-			deleteUserSetting('uploader');
-			$('.media-upload-form').removeClass('html-uploader');
-
-			if ( typeof(uploader) == 'object' )
-				uploader.refresh();
-		} else {
-			setUserSetting('uploader', '1'); // 1 == html uploader
-			$('.media-upload-form').addClass('html-uploader');
-		}
-	}
-	$('.upload-flash-bypass a').click(function(){_switch(0);return false;});
-	$('.upload-html-bypass a').click(function(){_switch(1);return false;});
-});
 </script>
 
 <div id="plupload-upload-ui" class="hide-if-no-js">

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

@@ -27,12 +27,43 @@ function fileQueued(fileObj) {
 function uploadStart() {
 	try {
 		if ( typeof topWin.tb_remove != 'undefined' )
-			topWin.jQuery('#TB_overlay').unbind('click', topWin.tb_remove); 
+			topWin.jQuery('#TB_overlay').unbind('click', topWin.tb_remove);
 	} catch(e){}
 
 	return true;
 }
 
+function uploadProgress(up, file) {
+	var item = jQuery('#media-item-' + file.id);
+
+	jQuery('.bar', item).width( (200 * file.percent) / 100 );
+	jQuery('.percent', item).html( file.percent + '%' );
+
+	if ( file.percent == 100 ) {
+		setTimeout( function(){
+			jQuery('.percent', item).html( pluploadL10n.crunching );
+		}, 200 );
+	}
+}
+
+// check to see if a large file failed to upload
+function fileUploading(up, file) {
+	var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);
+
+	if ( max > hundredmb && file.size > hundredmb ) {
+		setTimeout(function(){
+			if ( file.status == 2 && file.loaded == 0 ) { // not uploading
+				wpFileError(file, pluploadL10n.big_upload_failed.replace('%1$s', '<a class="uploader-html" href="#">').replace('%2$s', '</a>'));
+
+				if ( up.current && up.current.file.id == file.id && up.current.xhr.abort )
+					up.current.xhr.abort();
+
+				up.removeFile(file);
+			}
+		}, 5000); // 20 sec.
+	}
+}
+
 function updateMediaForm() {
 	var items = jQuery('#media-items').children();
 
@@ -118,13 +149,13 @@ function prepareMediaItemInit(fileObj) {
 			var w = jQuery(window).height(), t = jQuery(this).offset().top, h = jQuery(this).height(), b;
 
 			if ( w && t && h ) {
-                b = t + h;
+				b = t + h;
 
-                if ( b > w && (h + 48) < w )
+				if ( b > w && (h + 48) < w )
-                    window.scrollBy(0, b - w + 13);
+					window.scrollBy(0, b - w + 13);
-                else if ( b > w )
+				else if ( b > w )
-                    window.scrollTo(0, t - 36);
+					window.scrollTo(0, t - 36);
-            }
+			}
 		});
 
 		if ( jQuery(this).is('.describe-toggle-on') )
@@ -195,25 +226,17 @@ function wpQueueError(message) {
 
 // file-specific error messages
 function wpFileError(fileObj, message) {
-	var item = jQuery('#media-item-' + fileObj.id), filename = jQuery('.filename', item).text();
+	itemAjaxError(fileObj.id, message);
-
-	item.html('<div class="error-div">'
-				+ '<a class="dismiss" href="#">' + pluploadL10n.dismiss + '</a>'
-				+ '<strong>' + pluploadL10n.error_uploading.replace('%s', filename) + '</strong><br />'
-				+ message
-				+ '</div>');
-	item.find('a.dismiss').click(function(){jQuery(this).parents('.media-item').slideUp(200, function(){jQuery(this).remove();})});
 }
 
-function itemAjaxError(id, html) {
+function itemAjaxError(id, message) {
-	var item = jQuery('#media-item-' + id), filename = jQuery('.filename', item).text();
+	var item = jQuery('#media-item-' + id), filename = item.find('.filename').text();
 
 	item.html('<div class="error-div">'
 				+ '<a class="dismiss" href="#">' + pluploadL10n.dismiss + '</a>'
-				+ '<strong>' + pluploadL10n.error_uploading.replace('%s', filename) + '</strong><br />'
+				+ '<strong>' + pluploadL10n.error_uploading.replace('%s', jQuery.trim(filename)) + '</strong> '
-				+ html
+				+ message
 				+ '</div>');
-	item.find('a.dismiss').click(function(){jQuery(this).parents('.media-item').slideUp(200, function(){jQuery(this).remove();})});
 }
 
 function deleteSuccess(data, textStatus) {
@@ -258,14 +281,15 @@ function uploadComplete() {
 }
 
 function switchUploader(s) {
-	var p = document.getElementById('flash-upload-ui'), h = document.getElementById('html-upload-ui');
-
 	if ( s ) {
-		p.style.display = 'block';
+		deleteUserSetting('uploader');
-		h.style.display = 'none';
+		jQuery('.media-upload-form').removeClass('html-uploader');
+
+		if ( typeof(uploader) == 'object' )
+			uploader.refresh();
 	} else {
-		p.style.display = 'none';
+		setUserSetting('uploader', '1'); // 1 == html uploader
-		h.style.display = 'block';
+		jQuery('.media-upload-form').addClass('html-uploader');
 	}
 }
 
@@ -332,22 +356,35 @@ function uploadSizeError( up, error ) {
 }
 
 jQuery(document).ready(function($){
-	// remember the last used image size, alignment and url
+	$('.media-upload-form').bind('click.uploader', function(e) {
-	$('#media-items input[type="radio"]').live('click', function(){
+		var target = $(e.target), tr, c;
-		var tr = $(this).closest('tr');
 
-		if ( $(tr).hasClass('align') )
+		if ( target.is('input[type="radio"]') ) { // remember the last used image size and alignment
-			setUserSetting('align', $(this).val());
+			tr = target.closest('tr');
-		else if ( $(tr).hasClass('image-size') )
-			setUserSetting('imgsize', $(this).val());
-	});
 
-	$('#media-items button.button').live('click', function(){
+			if ( $(tr).hasClass('align') )
-		var c = this.className || '';
+				setUserSetting('align', target.val());
-		c = c.match(/url([^ '"]+)/);
+			else if ( $(tr).hasClass('image-size') )
-		if ( c && c[1] ) {
+				setUserSetting('imgsize', target.val());
-			setUserSetting('urlbutton', c[1]);
+
-			$(this).siblings('.urlfield').val( $(this).attr('title') );
+		} else if ( target.is('button.button') ) { // remember the last used image link url
+			c = e.target.className || '';
+			c = c.match(/url([^ '"]+)/);
+
+			if ( c && c[1] ) {
+				setUserSetting('urlbutton', c[1]);
+				target.siblings('.urlfield').val( target.attr('title') );
+			}
+		} else if ( target.is('a.dismiss') ) {
+			target.parents('.media-item').fadeOut(200, function(){
+				$(this).remove();
+			});
+		} else if ( target.is('.upload-flash-bypass a') || target.is('a.uploader-html') ) { // switch uploader to html4
+			switchUploader(0);
+			return false;
+		} else if ( target.is('.upload-html-bypass a') ) { // switch uploader to multi-file
+			switchUploader(1);
+			return false;
 		}
 	});
 
@@ -395,17 +432,12 @@ jQuery(document).ready(function($){
 			fileQueued(file);
 		});
 
-		uploader.bind('UploadProgress', function(up, file) {
+		uploader.bind('UploadFile', function(up, file) {
-			var item = $('#media-item-' + file.id);
+			fileUploading(up, file);
+		});
 
-			$('.bar', item).width( (200 * file.percent) / 100 );
+		uploader.bind('UploadProgress', function(up, file) {
-			$('.percent', item).html( file.percent + '%' );
+			uploadProgress(up, file);
-		
-			if ( file.percent == 100 ) {
-				setTimeout( function(){
-					$('.percent', item).html( pluploadL10n.crunching );
-				}, 200 );
-			}
 		});
 
 		uploader.bind('Error', function(up, err) {

wp-includes/script-loader.php

@@ -201,6 +201,7 @@ function wp_default_scripts( &$scripts ) {
 		'upload_limit_exceeded' => __('You may only upload 1 file.'),
 		'http_error' => __('HTTP error.'),
 		'upload_failed' => __('Upload failed.'),
+		'big_upload_failed' => __('Please try uploading this file with the %1$sbrowser uploader%2$s.'),
 		'io_error' => __('IO error.'),
 		'security_error' => __('Security error.'),
 		'file_cancelled' => __('File canceled.'),
@@ -208,19 +209,19 @@ function wp_default_scripts( &$scripts ) {
 		'dismiss' => __('Dismiss'),
 		'crunching' => __('Crunching…'),
 		'deleted' => __('moved to the trash.'),
-		'error_uploading' => __('“%s” has failed to upload due to an error')
+		'error_uploading' => __('“%s” has failed to upload.')
 	);
 
-	$scripts->add( 'plupload', '/wp-includes/js/plupload/plupload.js', false, '1511');
+	$scripts->add( 'plupload', '/wp-includes/js/plupload/plupload.js', false, '1511-20111112');
-	$scripts->add( 'plupload-html5', '/wp-includes/js/plupload/plupload.html5.js', array('plupload'), '1511');
+	$scripts->add( 'plupload-html5', '/wp-includes/js/plupload/plupload.html5.js', array('plupload'), '1511-20111112');
-	$scripts->add( 'plupload-flash', '/wp-includes/js/plupload/plupload.flash.js', array('plupload'), '1511');
+	$scripts->add( 'plupload-flash', '/wp-includes/js/plupload/plupload.flash.js', array('plupload'), '1511-20111112');
-	$scripts->add( 'plupload-silverlight', '/wp-includes/js/plupload/plupload.silverlight.js', array('plupload'), '1511');
+	$scripts->add( 'plupload-silverlight', '/wp-includes/js/plupload/plupload.silverlight.js', array('plupload'), '1511-20111112');
-	$scripts->add( 'plupload-html4', '/wp-includes/js/plupload/plupload.html4.js', array('plupload'), '1511');
+	$scripts->add( 'plupload-html4', '/wp-includes/js/plupload/plupload.html4.js', array('plupload'), '1511-20111112');
 
 	// cannot use the plupload.full.js, as it loads browserplus init JS from Yahoo
-	$scripts->add( 'plupload-all', false, array('plupload', 'plupload-html5', 'plupload-flash', 'plupload-silverlight', 'plupload-html4'), '1511');
+	$scripts->add( 'plupload-all', false, array('plupload', 'plupload-html5', 'plupload-flash', 'plupload-silverlight', 'plupload-html4'), '1511-20111112');
 
-	$scripts->add( 'plupload-handlers', "/wp-includes/js/plupload/handlers$suffix.js", array('plupload-all', 'jquery'), '20111111');
+	$scripts->add( 'plupload-handlers', "/wp-includes/js/plupload/handlers$suffix.js", array('plupload-all', 'jquery'), '20111112');
 	$scripts->localize( 'plupload-handlers', 'pluploadL10n', $uploader_l10n );
 
 	// keep 'swfupload' for back-compat.
@@ -431,7 +432,7 @@ function wp_default_styles( &$styles ) {
 	// Any rtl stylesheets that don't have a .dev version for ltr
 	$no_suffix = array( 'farbtastic' );
 
-	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111111' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111112' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20111015' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );