supporting photo upload

mc_modules/microcommunity-basic/client/templates/items/photo.html

@@ -2,5 +2,5 @@
 	<%= nl2br(content, false) %>
 </p>
 <p>
-	<img src='/photo.jpg' width='400px' />
+	<img src="<%= filePath %>" style="max-width:500px;" />
 </p>

mc_modules/microcommunity-basic/client/templates/publishers/photo.html

@@ -1,3 +1,9 @@
 <textarea class="span12" id="photo-content" placeholder="Write something..." rows="1"></textarea>
-<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
+<input id="file-upload" type="file" name="file" data-url="/api/fileupload/">
+<div style="width:200px">
+	<div class="progress progress-striped active">
+		<div class="bar" style="width: 0%;"></div>
+	</div>
+	<div class="preview"></div>
+</div>
 

mc_modules/microcommunity-basic/client/views/publishers/photo.js

@@ -1,27 +1,70 @@
 define([
 	'bb',
-	'text!templates/publishers/photo.html'
+	'text!templates/publishers/photo.html',
+	'jquery.fileupload'	
 ], function(Backbone, html){
 
 	var PhotoPublisher = Backbone.Marionette.ItemView.extend({
+		initialize : function(){
+			this.filePath = ''
+		},
 		template : html,						
 		ui : {
-			content : '#photo-content'
-		},						
+			content : '#photo-content',
+			file : '#file-upload',
+			progress : '.progress',
+			progressBar : '.progress .bar',			
+			preview : '.preview'
+		},
+		events : {
+			'click #post-content' : 'expand'
+		},									
 		exportData : function(){
 			return {
-				content : this.ui.content.val()
+				content : this.ui.content.val(),
+				filePath : this.filePath
 			}						
 		},	
 		reset : function(){
 			this.ui.content.val("")
+			this.ui.preview.html("")
+		  this.ui.progressBar.css('width', '0%');				
 		},		
 		disable : function(){
 			this.ui.content.prop("disabled", true)
 		},		
 		enable : function(){
 			this.ui.content.prop("disabled", false)			
-		}								
+		},
+		onRender : function(){
+			var self = this
+			this.ui.file.fileupload({
+				done : function(e, data){
+					data.result.files.forEach(function(file){
+						self.ui.preview.html("<img src='"+file.url+"' />")
+						self.filePath = file.url
+					})				
+				},
+				progressall : function(e, data){
+					var progress = parseInt(data.loaded / data.total * 100, 10);
+		      self.ui.progressBar.css('width', progress + '%');
+		      if (progress == 100){
+			      self.ui.progress.removeClass('active')
+		      }		      
+				},
+				add : function(e, data){
+					var isImage = /^image/
+					if (isImage.test(data.files[0].type)){
+						data.submit()
+					} else {
+						alert("You should select an image")
+					}					
+				}
+			})			
+		},		
+		expand : function(){
+			this.ui.content.attr("rows","3")			
+		}					
 
 	})		
 

mc_modules/microcommunity-basic/index.js

@@ -178,17 +178,17 @@ module.exports = function(){
 	})	
 
 	//api
-	app.post('/api/walls/user/photo', auth.ensureAuthenticated, function(req, res){
+	app.post('/api/walls/:wall/user/photo', auth.ensureAuthenticated, function(req, res){
 		var photo = new Photo({
 			content : req.body.content,
+			filePath : req.body.filePath,
 			author : req.body.author,
 			wall : req.body.wall,
 			streams : [req.user.stream]		
 		})
+
 		photo.save(function(err){
-			Photo.findById(photo.id, function(){
-				res.send(photo)						
-			})	
+			res.send(photo)
 		})	
 	})
 
@@ -230,6 +230,24 @@ module.exports = function(){
 	})	
 
 
+	app.post('/api/fileupload', function(req, res){
+		var isImage = /^image/
+		if (isImage.test(req.files.file.type)){
+			microcommunity.files.saveFile(req.files.file, '/photos/', function(filePath){
+				res.send({ files : [
+					{
+						url : filePath
+					}
+
+				]})
+			})		
+		} else {
+			res.send(500)
+		}	
+
+	})
+
+
 	return app
 }
 

mc_modules/microcommunity-basic/models/photo.js

@@ -4,7 +4,8 @@ var mongoose = require('mongoose')
 	, isItem = models.plugins.isItem
 
 var photoSchema = new mongoose.Schema({
-	content: String
+	content: String,
+	filePath : String,
 })
 
 photoSchema.plugin(isItem, { objectType : 'photo' })

mc_modules/microcommunity/can.js

@@ -7,10 +7,6 @@ var authorize = module.exports.authorize = function(object, objectType, action,
 
 var authorizeCollection = module.exports.authorizeCollection = 
 	function(collection, objectType, action, user, callback){
-
-		console.log(objectType)
-		console.log(action)
-
 		function authorizeForUser(user){
 			return function (object, callback){
 				authorize(object, objectType, action, user, callback)

mc_modules/microcommunity/client/common.js

@@ -1,5 +1,8 @@
 requirejs.config({
 	baseUrl: "/client",
+
+  urlArgs: "bust=" + (new Date()).getTime(),
+
 
   paths: {
 
@@ -17,12 +20,16 @@ requirejs.config({
     bootstrap: 'lib/bootstrap',
     bootbox: 'lib/bootbox.min',    
     'jquery.gravatar': 'lib/jquery.gravatar',
-    'jquery.spin': 'lib/jquery.spin',
+    'jquery.spin': 'lib/jquery.spin',  
     'spin': 'lib/spin.min',
     'md5' : 'lib/md5',
     'general' : 'lib/general',
     'moment' : 'lib/moment.min',
-    'diff' : 'lib/diff'
+    'diff' : 'lib/diff',
+
+		'jquery.ui.widget' : 'lib/jquery.ui.widget',
+		'jquery.iframe-transport' : 'lib/jquery.iframe-transport',
+		'jquery.fileupload' : 'lib/jquery.fileupload',	      
   },
 
   shim: {
@@ -46,7 +53,8 @@ requirejs.config({
   	'diff' : [],
   	'bootstrap-notify': ['jquery'],
   	'bootbox' : ['bootstrap'],
-  	'bootstrap' : ['jquery']	
+  	'bootstrap' : ['jquery'],
+  	'jquery.fileupload' : ['jquery', 'jquery.ui.widget', 'jquery.iframe-transport' ]
   }  
 })
 

mc_modules/microcommunity/models/user.js

@@ -22,7 +22,6 @@ userSchema.methods.follow = function(object){
 	//var f = _.find(this.follows, function(follow){ return ( follow.toString() === object.stream.toString() ) })
 	//if (!f){
 		this.follows.push(object.stream)
-		console.log(this.follows)
 	//}
 }
 
@@ -31,7 +30,6 @@ userSchema.methods.loadFeed = function(callback){
 		, Item = mc.model('Item')
 
 	var query = { streams : { $in : this.follows } }
-	console.log(query)
 	Item.fetchItems(query, callback)
 }