media upload working

10 files changed, 98 insertions, 53 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)
 		}
 	},
 	
diff --git a/server/index.js b/server/index.js
index 005b0cd..d55d182 100644
--- a/server/index.js
+++ b/server/index.js
@@ -124,6 +124,11 @@ site.route = function () {
 	app.post('/api/projects/new', middleware.ensureAuthenticated, api.projects.create)
 	app.post('/api/projects/edit', middleware.ensureAuthenticated, api.projects.update)
 	app.delete('/api/projects/destroy', middleware.ensureAuthenticated, api.projects.destroy)
+
+	app.get('/api/media/user', middleware.ensureAuthenticated, api.media.user)
+	app.post('/api/media/new', middleware.ensureAuthenticated, api.media.create)
+	app.post('/api/media/upload', middleware.ensureAuthenticated, api.media.upload)
+
 }
 
 
diff --git a/server/lib/api/media.js b/server/lib/api/media.js
index 089e327..9898727 100644
--- a/server/lib/api/media.js
+++ b/server/lib/api/media.js
@@ -14,30 +14,38 @@ var media = {
 		})
 	},
 	
+	create: function(req, res){
+		var data = util.cleanQuery(req.body)
+		data.user_id = req.user._id
+		data.created_at = new Date ()
+
+		new Media(data).save(function(err, rec){
+			if (err || ! rec) { return res.json({ error: err }) }
+			return res.json(rec) 
+		})
+	},
+	
 	upload: function(req, res){
 		var data = util.cleanQuery(req.body)
-		data.updated_at = new Date ()
+		data.user_id = req.user._id
+		data.created_at = new Date ()
+		data.type = "image"
 		
-		if (req.files.avatar) {
-			upload.put("avatars", req.files.avatar, {
-				unacceptable: function(err){
-					res.json({ error: { errors: { avatar: { message: "Problem saving avatar: " + err } } } })
-				},
-				success: function(url){
-					data.photo = url
-					done()
-				}
-			})
-		}
-		else {
-			done()
-		}
+		upload.put("media", req.files.image, {
+			unacceptable: function(err){
+				res.json({ error: { errors: { avatar: { message: "Problem saving image: " + err } } } })
+			},
+			success: function(url){
+				data.url = url
+				done()
+			}
+		})
 		
 		function done () {
-			_.extend( req.user, data )
-			req.user.save(function(err, msg) {
-				err ? res.json({ status: "FAIL", error: err })
-					: res.json({ status: "OK", payload: req.user })
+			console.log(data)
+			new Media(data).save(function(err, rec) {
+				if (err || ! rec) { return res.json({ error: err }) }
+				res.json(rec)
 			})
 		}
 	}
diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js
index a5d0c78..127b222 100644
--- a/server/lib/schemas/Media.js
+++ b/server/lib/schemas/Media.js
@@ -13,13 +13,16 @@ var MediaSchema = new mongoose.Schema({
 		type: String,
 		required: true,
 	},
+	token: {
+		type: String,
+		default: ""
+	},
 	thumbnail: {
 		type: String,
 		default: ""
 	},
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
-	updated_at: { type: Date },
 });
 
 module.exports = exports = mongoose.model('media', MediaSchema)
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index 4d8b596..9667178 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -1,4 +1,5 @@
 <span class="fileUpload">
+	<input type="hidden" name="_csrf" value="[[- token ]]">
 	<form>
 		<span class="icon-ios7-upload-outline upload-icon"></span><br>
 		Upload File
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index f92d1c7..e21672c 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -1,4 +1,6 @@
 <div class="vvbox settings">
+	<input type="hidden" name="_csrf" value="[[- token ]]">
+	<input type="hidden" name="_id" value="new">
 
 	<div class="setting">
 		<a href="#" id="startpoint">