application/js/field/image.js in spontaneous-0.2.0.beta4 vs application/js/field/image.js in spontaneous-0.2.0.beta5

@@ -22,11 +22,11 @@
 				this.useValue(this.values.local_edited);
 				edited.add(original).removeClass('selected');
 				edited.addClass('selected');
 			}.bind(this));
 			labels.append(local_label, server_label);
-			image_outer.append(original, edited)
+			image_outer.append(original, edited);
 			outer.append(labels, image_outer);
 			return outer;
 		}
 	});
 
@@ -62,11 +62,11 @@
 			var pending, v = this.get('value');
 			if ((pending = v['__pending__'])) {
 				pending['path'] = pending['src'];
 				return pending['value'];
 			}
-			return v['__ui__'] || v['original'];
+			return v['__ui__'] || v['original'] || {};
 		},
 
 		currentEditValue: function() {
 			var value, pending, ui, v = this.get('value');
 			if ((pending = v['__pending__'])) {
@@ -79,12 +79,12 @@
 			}
 			return value;
 		},
 
 		currentFilename: function() {
-			var v = this.currentValue();
-			return v['filename'];
+			var v = this.get('value');
+			return (v['__pending__'] || v['original'])['filename'];
 		},
 		/*
 		* HACK: The async nature of image updates means that the version setting
 		* may be out of date not because of the actions of another, but because
 		* the field version has been updated in the background.
@@ -104,28 +104,28 @@
 				return pending["version"];
 			}
 			return this.data.version;
 		},
 
-		preview: function(container) {
+		preview: function() {
 			Spontaneous.UploadManager.register(this);
 			var self = this
 			, value = this.currentValue()
 			, src = value.src
 			, img = null
-			, dim = 45
-			, container = container.parent('li');
+			, dim = 45;
+			// , container = container.parent('li');
 
 			if (src === "") {
-				img = dom.img('.missing-image', {'src':'/@spontaneous/static/px.gif'});
+				img = dom.img('.missing-image', {'src':''});
 			} else {
 				img = dom.img();
 				img.load(function() {
 					var r = this.width/this.height, $this = $(this), h = $this.height(), dh = 0;
 					if (r >= 1) { // landscape -- fit image vertically
 						// tag for extra css styles applicable to landscape images
-						container.addClass('landscape');
+						// container.addClass('landscape');
 						if (h <= dim) {
 							dh = (dim - h)/2;
 						}
 					}
 					$this.css('top', dom.px(dh));
@@ -169,13 +169,13 @@
 							image.__start_upload = false;
 							S.Ajax.test_field_versions(this.content, [this], this.upload_values.bind(this), this.upload_conflict.bind(this));
 						}
 						var img = image[0], w = img.width, h = img.height, r = w/h;
 						if (r > 1) {
-							container.addClass('landscape');
+							// container.addClass('landscape');
 						} else {
-							container.removeClass('landscape');
+							// container.removeClass('landscape');
 						}
 					}.bind(this))
 					image.attr('src', url)
 					// see http://www.htmlfivewow.com/slide25
 					window.URL.revokeObjectURL(url);
@@ -261,11 +261,12 @@
 				return this.currentValue().height;
 			}
 			return 0;
 		},
 		edit: function() {
-			var wrap = dom.div({'style':'position:relative;'}),
+			var wrap = dom.div(),
+			drop_wrap = dom.div({'style':'position:relative;'}),
 				value = this.currentEditValue(),
 				src = value.src,
 				img = dom.img({'src':src}),
 				info, sizes, filename_info, filesize_info, dimensions_info;
 
@@ -294,24 +295,27 @@
 
 			var set_info = function(filename, filesize, width, height) {
 				filename_info.text(filename);
 				if (filesize) {
 					filesize_info.text(parseFloat(filesize, 10).to_filesize());
+				} else if (filesize === 0 || filesize === "0") {
+					filesize_info.text('');
 				}
+
 				set_dimensions(width, height);
 			};
 
 			var files_selected = function(files) {
 				if (files.length > 0) {
 					var file = files[0], url = window.URL.createObjectURL(file);
 					img.attr('src', url).removeClass('empty');
 					this.select_files(files);
-					img.attr('src', url)
+					img.attr('src', url);
 					this._edited_value = url;
-					this.image.attr('src', url)
+					this.image.attr('src', url);
 					window.URL.revokeObjectURL(url);
-					set_info(File.filename(file), file.fileSize, null, null)
+					set_info(File.filename(file), file.fileSize, null, null);
 				}
 			}.bind(this);
 
 			var onchange = function() {
 				var files = this.input[0].files;
@@ -322,18 +326,22 @@
 			var onclick = function() {
 				input.trigger('click');
 				return false;
 			};
 
-			if (src == '') { img.addClass('empty'); }
+			if (src === '') { img.addClass('empty'); }
 
 			var dropper = dom.div('.image-drop').click(onclick);
 
 			var actions = dom.div('.actions');
-			// var clear = dom.a('.button.clear').text('Clear');
-			actions.append(input)//.append(clear);
-			wrap.append(dropper);
+			var clear = dom.a('.button.clear').text('Clear').click(function() {
+				img.css({width: dom.px(img.width()), height: dom.px(img.height())}).attr('src', '/@spontaneous/static/px.gif');
+				set_info('', 0, null, null);
+				this.clear_file();
+			}.bind(this));
+			actions.append(input, clear);
+			drop_wrap.append(dropper);
 
 
 			var drop = function(event) {
 				event.stopPropagation();
 				event.preventDefault();
@@ -364,11 +372,12 @@
 			}.bind(dropper);
 
 			dropper.get(0).addEventListener('drop', drop, true);
 			dropper.bind('dragenter', drag_enter).bind('dragover', drag_over).bind('dragleave', drag_leave);
 
-			wrap.append(img, actions, info);
+			drop_wrap.append(img, info);
+			wrap.append(drop_wrap, actions);
 
 			if (value) {
 				// var s = value.path.split('/'), filename = s[s.length - 1];
 				set_info(this.currentFilename(), value.filesize, value.width, value.height);
 			}
@@ -400,10 +409,10 @@
 		},
 		set_edited_value: function(value) {
 			this.preview_img.attr('src', value);
 			this.callSuper(value);
 		},
-		accept_mimetype: "image/*",
+		accept_mimetype: "image/*"
 	});
 
 	ImageField.ConflictView = ImageFieldConflictView;
 
 	return ImageField;