3 files changed, 108 insertions, 3 deletions
diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js
index ab33bc0..17b748a 100644
--- a/public/assets/javascripts/ui/lib/FormView.js
+++ b/public/assets/javascripts/ui/lib/FormView.js
@@ -33,7 +33,7 @@ var FormView = View.extend({
 	},
 	
 	serialize: function(){
-		var fd = new FormData()
+		var fd = new FormData(), hasCSRF = false
 		
 		this.$("input[name], select[name], textarea[name]").each( function(){
 			if (this.type == "file") {
@@ -48,9 +48,14 @@ var FormView = View.extend({
 			}
 			else {
 				fd.append(this.name, this.value);
+				hasCSRF = hasCSRF || this.name == "_csrf"
 			}
 		});
 		
+		if (! hasCSRF) {
+      fd.append("_csrf", $("[name=_csrf]").val())
+    }
+		
 		return fd
 	},
 	
@@ -71,9 +76,12 @@ var FormView = View.extend({
 				return
 			}
 		}
+		
+		var action = typeof this.action == "function" ? this.action() : this.action
+		if (! action) return
 
 		var request = $.ajax({
-			url: this.action,
+			url: action,
 			type: this.method,
 			data: this.serialize(),
 			dataType: "json",
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index 937c1e9..d9b518a 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -10,9 +10,15 @@ var ModalView = View.extend({
 		}
 	},
 	
+	usesFileUpload: false,
+	
 	show: function(){
 		$(".mediaDrawer").removeClass("active")
-		$(".fileUpload").removeClass("active")
+		
+		if (! this.usesFileUpload) {
+		  $(".fileUpload").removeClass("active")
+		}
+		
 		this.$el.addClass("active")
     $("body").addClass("noOverflow")
 	},
@@ -32,4 +38,5 @@ var ModalView = View.extend({
 			this.hide()
 		}
 	}
+
 })
diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js
new file mode 100644
index 0000000..efaa8c9
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/UploadView.js
@@ -0,0 +1,90 @@
+
+var UploadView = View.extend({
+
+  // define uploadAction
+
+	events: {
+		"change .file": "handleFileSelect",
+		"submit form": "preventDefault",
+	},
+	
+	initialize: function(){
+		this.$file = this.$(".file")
+		this.$upload = this.$(".upload-icon")
+  },
+  
+  beforeUpload: function(){
+  },
+	
+  handleFileSelect: function(e) {
+		e.stopPropagation();
+		e.preventDefault();
+		
+		this.beforeUpload()
+
+		var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
+
+		for (var i = 0, f; f = files[i]; i++) {
+			if ( ! f.type.match('image.*')) {
+				continue;
+			}
+			
+			this.getImageDimensions(f)
+		}
+	},
+	
+	getImageDimensions: function(f){
+		var base = this
+		
+		this.$upload.addClass('uploading')
+
+		var reader = new FileReader();
+
+		reader.onload = function(e) {
+			var image = new Image()
+			image.onload = function(){
+				var width = image.naturalWidth,
+					height = image.naturalHeight
+				base.upload(f, width, height)
+			}
+			image.src = e.target.result
+		}
+		
+		reader.readAsDataURL(f);
+	},
+	
+	upload: function(f, width, height){
+		var fd = new FormData()
+		fd.append('image', f)
+		fd.append('width', width)
+		fd.append('height', height)
+		fd.append('_csrf', $("[name=_csrf]").val())
+		
+		if (this.mediaTag) {
+		  fd.append('tag', this.mediaTag)
+		}
+
+		var request = $.ajax({
+			url: this.uploadAction,
+			type: "post",
+			data: fd,
+			dataType: "json",
+			processData: false,
+			contentType: false,
+		})
+		request.done(this.success.bind(this))
+	},
+	
+	success: function(media){
+		if (media.error) {
+			return
+		}
+		this.$upload.removeClass('uploading')
+		this.add(media)
+	},
+	
+	add: function(media){
+	  console.log(media)
+	},
+
+})