Ember.js Image Upload Component

image-upload.hbs

<label><span>{{label}}:</span></label>
{{#if imageData}}
	<div class="image-preview">
		<img class="thumb" {{bind-attr src="imageData"}} />
		<span><div id="removeButton"><i class="fi-x" {{action "remove" this}}></i></div></span>
	</div>
{{/if}}
{{#if progress}}
	<progress min="0" max="100" value="0"></progress>
{{/if}}
<input class="file-input" type="file" />
<div class="drop-zone">Drag and Drop Here</div>

ImageUploadComponent.js

App.ImageUploadComponent = Ember.Component.extend({
	layoutName: "components/image-upload",
	label: "",
	progress: "",
	classNames: ["fieldLabel"],
	file: function(key, value, previousValue){
		//Setter
		if (arguments.length > 1){
			return value;
		}
	}.property(),
	imageData: function(key, value, previousValue){
		if (arguments.length > 1){
			return value;
		}
		if (this.get("file")){
			var that = this;
			var Reader = new FileReader();
			Reader.onload = function(event){
				that.set("imageData", Reader.result);
			};
			Reader.readAsDataURL(this.get("file"));
		}
	}.property("file"),

	didInsertElement: function(){
		var that = this;
		this.$(".file-input").change(function(){
			var file = that.$(".file-input").prop("files")[0];
			that.set("file", file);
		});
	},
	dragEnter: function(event) {
		event.preventDefault();
	},
	dragOver: function(event) {
		event.preventDefault();
		event.dataTransfer.dropEffect = "copy";
	},
	drop: function(event) {
		event.preventDefault();

		var file = event.dataTransfer.files[0];
		if (!file.type.match('image.*')) {
			return false;
		}
		this.set("file", file);
	},
	actions: {
		remove: function(component){
			this.set("file", "");
			this.set("imageData", "");
			this.$(".file-input").val("");
		}
	}
});