Header images: Handle cropping failures.

props ehg.
see #21785.


git-svn-id: https://develop.svn.wordpress.org/trunk@27946 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/media-views.js

@@ -1344,6 +1344,8 @@
 							this.controller.state().doCrop( selection ).done( function( croppedImage ) {
 								self.controller.trigger('cropped', croppedImage );
 								self.controller.close();
+							}).fail( function() {
+								self.controller.trigger('content:error:crop');
 							});
 						}
 					}
@@ -6202,14 +6204,15 @@
 	 * @augments Backbone.View
 	 */
 	media.view.Cropper = media.View.extend({
-		tagName: 'img',
 		className: 'crop-content',
+		template: media.template('crop-content'),
 		initialize: function() {
 			_.bindAll(this, 'onImageLoad');
-			this.$el.attr('src', this.options.attachment.get('url'));
 		},
 		ready: function() {
-			this.$el.on('load', this.onImageLoad);
+			this.controller.frame.on('content:error:crop', this.onError, this);
+			this.$image = this.$el.find('.crop-image');
+			this.$image.on('load', this.onImageLoad);
 			$(window).on('resize.cropper', _.debounce(this.onImageLoad, 250));
 		},
 		remove: function() {
@@ -6229,10 +6232,19 @@
 			if (typeof imgOptions === 'function') {
 				imgOptions = imgOptions(this.options.attachment, this.controller);
 			}
-			this.trigger('image-loaded');
-			this.controller.imgSelect = this.$el.imgAreaSelect(imgOptions);
-		}
 
+			imgOptions = _.extend(imgOptions, {parent: this.$el});
+			this.trigger('image-loaded');
+			this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
+		},
+		onError: function() {
+			var filename = this.options.attachment.get('filename');
+
+			this.views.add( '.upload-errors', new media.view.UploaderStatusError({
+				filename: media.view.UploaderStatus.prototype.filename(filename),
+				message: _wpMediaViewsL10n.cropError
+			}), { at: 0 });
+		}
 	});
 
 	media.view.EditImage = media.View.extend({