media upload working

5 files changed, 59 insertions, 33 deletions

diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 76bf6f0..a66f2e8 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -2,16 +2,18 @@
 var MediaUpload = View.extend({
 	el: ".fileUpload",
 
-	createAction: "/api/media/url",
+	createAction: "/api/media/new",
 	uploadAction: "/api/media/upload",
 	
 	events: {
 		"keydown .url": "enterSubmit",
 		"change .file": "handleFileSelect",
+		"submit form": "preventDefault",
 	},
 	
 	initialize: function(opt){
 		this.parent = opt.parent
+		this.$csrf = this.$("[name=_csrf]")
 		this.$url = this.$(".url")
 		this.$file = this.$(".file")
 		this.$upload = this.$(".upload-icon")
@@ -43,14 +45,15 @@ var MediaUpload = View.extend({
 				return
 			}
 			
+			media._csrf = this.$csrf.val()
 			console.log(media)
 			
-			$.ajax({
+			var request = $.ajax({
 				type: "post",
 				url: this.createAction,
-				data: rec,
-				success: $.proxy(this.add, this)
+				data: media,
 			})
+			request.done($.proxy(this.add, this))
 		}, this))
 	},
 	
@@ -67,28 +70,29 @@ var MediaUpload = View.extend({
 
 			this.$upload.addClass('uploading')
 
-			var xhr = new XMLHttpRequest(),
-			fd = new FormData();
+			var fd = new FormData();
+			fd.append( 'image', f )
+			fd.append( '_csrf', this.$csrf.val() )
 
-			fd.append( 'file', f );
-
-			xhr.addEventListener("error", $.proxy(function(){
-				console.log("error uploading file..")
-				this.$upload.removeClass('uploading')
-			}, this), false);
-			
-			xhr.onreadystatechange = $.proxy(function() {
-				if (xhr.readyState == 4 && xhr.status == 200) {
-					this.$upload.removeClass('uploading')
-				}
-			}, this)
-			
-			xhr.open("POST", '/api/media/upload', true);
-			xhr.send( fd );
+			var request = $.ajax({
+				url: this.uploadAction,
+				type: "post",
+				data: fd,
+				dataType: "json",
+				processData: false,
+				contentType: false,
+			})
+			request.done($.proxy(this.add, this))
 		}
 	},
 	
 	add: function(media){
+		console.log(media)
+		if (media.error) {
+			return
+		}
+		this.$upload.removeClass('uploading')
+		this.parent.mediaViewer.add(media)
 	}
 
 })
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index cd58231..96d7cf7 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -10,7 +10,7 @@ var MediaViewer = ModalView.extend({
 			this.load()
 		}
 		else {
-			this.__super__.show()
+			this.__super__.show.call(this)
 		}
 	},
 
@@ -19,14 +19,30 @@ var MediaViewer = ModalView.extend({
 	},
 
 	populate: function(data){
-		data.forEach($.proxy(function(room){
-			var $span = $("<span>")
-			$span.data("slug", room.slug)
-			$span.css("background-image", "url(" + room.photo + ")")
-			
-			this.$templates.append($span)
-		}, this))
-		this.__super__.show()
+		data.forEach($.proxy(this.add, this))
+
+		this.__super__.show.call(this)
+	},
+	
+	add: function(media){
+		var image = new Image ()
+		var $span = $("<span>")
+		$span.addClass("mediaContainer")
+		switch (media.type) {
+			case 'image':
+				image.src = media.url
+				break
+
+			case 'youtube':
+			case 'vimeo':
+				image.src = media.thumbnail
+				break
+		}
+		
+		$span.data("media", media)
+		$span.append(image)
+
+		this.$(".myMedia").prepend($span)		
 	},
 
 	destroy: function(name, cb){
diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index 545ed41..46fe09c 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -77,7 +77,7 @@ var Parser = {
 	],
 
 	parse: function (url, cb) {
-		Parser.integrations.some(function(integration){
+		var matched = Parser.integrations.some(function(integration){
 			if (integration.regex.test(url)) {
 				integration.fetch(url, function(token, thumbnail){
 					cb({
@@ -91,6 +91,8 @@ var Parser = {
 			}
 			return false
 		})
-		cb(null)
+		if (! matched) {
+			cb(null)
+		}
 	}
 }
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/lib/view.js b/public/assets/javascripts/ui/lib/view.js
index 823a75b..5fc6736 100644
--- a/public/assets/javascripts/ui/lib/view.js
+++ b/public/assets/javascripts/ui/lib/view.js
@@ -80,6 +80,10 @@ var View = (function($, _){
 		// an element from the `id`, `className` and `tagName` properties.
 		_ensureElement: function() {
 			this.setElement(_.result(this, 'el'), false);
+		},
+		
+		preventDefault: function(e){
+			e && e.preventDefault()
 		}
 
 	});
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 0604245..47fa193 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -40,7 +40,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 			app.router.newProject()
 		}
 		else {
-			this.__super__.populate(data)
+			this.__super__.populate.call(this, data)
 		}
 	},