media upload files

jonniespratley · Dec 16, 2014 · afdd226 · afdd226
1 parent c4afa64
commit afdd226
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 53 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -18,6 +18,7 @@ var proxyConfig = {
 		forward: {
 			'/socket.io/*': serverEndpoint,
 			'/socket.io': serverEndpoint,
+			'/cms-content': serverEndpoint,
 			'/api': serverEndpoint
 		}
 	}

diff --git a/app/scripts/config.coffee b/app/scripts/config.coffee
@@ -6,13 +6,19 @@ window.Config =
 	sitecopy: "2014 "
 	version: '0.1'
 	email: "[email protected]"
+	"staticDir": "www/cms-content"
+	"publicDir": "www"
+	"uploadsTmpDir": ".tmp"
+	"uploadsDestDir": "www/cms-content/uploads"
+	"uploadsUrl": ":8181/cms-content/"
+	"logFormat": "[:date] - [:method] - :url - :status - :response-time ms"
 	debug: true
 
 	#I hold the home page feature content
-	feature: 
+	feature:
 	  title: 'angular-cms'
 	  body: 'A content management system of some sort.'
-	
+
 	features: [
 		id: 1
 		title: "HTML5"
@@ -44,12 +50,12 @@ window.Config =
 		body: "The database of choice is Mongo, its fast and scalable."
 		image: "/images/feature-mongodb.png"
 	]
-	
-	session: 
+
+	session:
 		authorized: false
 		user: null
-	
-	layout: 
+
+	layout:
     	header: "views/_header.html"
     	sidebar: "views/_sidebar.html"
     	content:"views/_content.html"
@@ -125,13 +131,13 @@ window.Config =
 		currentdate: new Date()
 		dateformats: ["medium", "short", "fullDate", "longDate", "mediumDate", "shortDate"]
 		timeformats: ["mediumTime", "shortTime"]
-		
+
 		#Default date format
 		dateformat: "medium"
-		
+
 		#Default time format
 		timeformat: "shortTime"
-		
+
 		#Default timezone
 		timezone: null
 		servers: [
@@ -145,26 +151,26 @@ window.Config =
 			port: 3000
 			body: "This is the v2 api server"
 		]
-		
+
 		#SocketIO configuration
 		socketio:
 			host: "127.1.0.1"
 			port: 8081
 
-		
+
 		#Network configuration
 		network:
 			online: true
 			cache: true
 
-		
+
 		#Database configuration
 		database:
 			host: "127.1.0.1"
 			port: 27017
 			name: "angular-cms"
 
-		
+
 		#API configuration.
 		api:
 			url: ""
@@ -220,4 +226,4 @@ window.Config =
 		user:
 			username: ''
 			password: ''
-		message: "Welcome {{user.username}}"
+		message: "Welcome {{user.username}}"
diff --git a/app/scripts/controllers/media.coffee b/app/scripts/controllers/media.coffee
@@ -1,32 +1,13 @@
 'use strict'
 angular.module('angularCmsApp').controller 'MediaCtrl', ($scope, $http, DataService) ->
-	$scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS','Karma']
+	$scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma']
 
 	$scope.uploads = []
 	$scope.getUploads = () ->
 		DataService.fetch('uploads').then((res)->
 			$scope.uploads = res.data
 		)
-
-	$ ->
-		$("#fileupload").fileupload(
-			dataType: 'json'
-			dropZone: $('.dropzone')
-			add: (e, data) ->
-				console.log(e, data)
-
-				data.url = '/api/upload'
-				data.context = $('<p/>').text('Uploading...').appendTo(document.body)
-				data.submit()
-			progressall: (e, data) ->
-				progress = parseInt(data.loaded / data.total * 100, 10)
-				$("#progress .bar").css "width", progress + "%"
-			done: (e, data) ->
-				$.each data.result.files, (index, file) ->
-					$("<p/>").text(file.name).appendTo document.body
-		)
-
 		$scope.uploader = {
 			files: []
 		};
-
+	$scope.getUploads()
diff --git a/app/scripts/directives/cmsuploader.coffee b/app/scripts/directives/cmsuploader.coffee
@@ -53,9 +53,28 @@ angular.module('angularCmsApp').directive 'cmsUploader', ->
 				form.append('files[]', file)
 
 				xhr = new XMLHttpRequest()
+
+				# progress on transfers from the server to the client (downloads)
+				updateProgress = (oEvent) ->
+					console.log(oEvent.loaded, oEvent.total)
+					if oEvent.lengthComputable
+						percentComplete = oEvent.loaded / oEvent.total
+						console.log(percentComplete)
+					else
+						console.log(event)
+				# Unable to compute progress information since the total size is unknown
+				transferComplete = (evt) ->
+					console.warn "The transfer is complete."
+				transferFailed = (evt) ->
+					console.error "An error occurred while transferring the file."
+				transferCanceled = (evt) ->
+					console.warn "The transfer has been canceled by the user."
+				xhr.addEventListener "progress", updateProgress, false
+				xhr.addEventListener "load", transferComplete, false
+				xhr.addEventListener "error", transferFailed, false
+				xhr.addEventListener "abort", transferCanceled, false
 				xhr.onload = () ->
 					console.log('Upload complete')
-
 				xhr.open('POST', $attrs.action, true)
 				xhr.send(form)
 
@@ -68,4 +87,4 @@ angular.module('angularCmsApp').directive 'cmsUploader', ->
 
 
 		#Initialize Uploader
-		new Uploader()
+		new Uploader()
diff --git a/app/styles/main.css b/app/styles/main.css
@@ -8,6 +8,27 @@
   height: 20px;
 }
 
+.uploads img{
+
+}
+.thumbnail a{
+		cursor: pointer;
+}
+.thumbnail:hover{
+	opacity: 1;
+}
+.thumbnail img{
+	width: 100%;
+}
+.thumbnail {
+	margin: 5px;
+	padding: 2px;
+	cursor: pointer;
+	opacity: .9;
+	height: 100px;
+	overflow: hidden;
+}
+
 html {
 	overflow-y: scroll;
 }

diff --git a/app/views/media.html b/app/views/media.html
@@ -13,20 +13,75 @@ <h1><i class="fa fa-1x fa-upload"></i> Media</h1>
     btncrop="Crop" cropper="true" collection="imageCollection" showthumbs="true" litmpl="#liTmpl" showtable="true"
     showlist="true" filelimit="10" sizelimit="5000" action="/api/v2/upload"></cms-uploader>
 
-    <legend>Media</legend>
-    <ul class="list-unstyled">
+
+    <ul class="list-unstyled uploads hidden">
       <li ng-repeat="upload in uploads">
-        <cms-upload ng-model="upload"></cms-upload>
+        <cms-upload ng-model="upload">
+          <div class="media">
+            <a class="pull-left" href="#">
+              <img class="media-object img-polaroid"
+                ng-src="/cms-content/uploads/{{upload.filename}}"
+                src="http://placehold.it/100">
+            </a>
+            <div class="media-body">
+              <h4 class="media-heading">{{upload.filename}}</h4>
+              <p>This is the content for your media.</p>
+              <div class="progress active progress-striped progress-info">
+                <div class="progress-bar"></div>
+              </div>
+            </div>
+          </div>
+        </cms-upload>
       </li>
 
     </ul>
+    <div class="col-sm-12">
+      <div class="btn-toolbar clearfix">
+        <div class="pull-left btn-group">
+          <button class="btn-default">
+            <i class="fa fa-list"></i>
+          </button>
+          <button class="btn-default">
+            <i class="fa fa-th-large"></i>
+          </button>
+        </div>
+        <div class="pull-right">
+          <input type="text" class="input-sm" placeholder="Search">
+        </div>
+      </div>
+
+      <table class="table table-striped table-hover table-bordered table-condensed">
+        <thead>
+          <tr>
+            <th class="td-checkbox"><input type="checkbox"></th>
+            <th>File</th>
+            <th>Type</th>
+            <th>Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="file in uploads">
+            <td>
+              <input type="checkbox" ng-model="file._id">
+            </td>
+            <td>{{file.filename}}</td>
+            <td>{{file.type}}</td>
+            <td>{{file.created}}</td>
+          </tr>
+        </tbody>
+      </table>
 
-  <pre>$scope.uploads: {{uploads | json }}</pre>
+      <ul class="list-inline thumbnails">
 
+        <div class="col-sm-3" ng-repeat="file in uploads">
+          <div class="thumbnail">
 
-<div id="uploads-list">
-    <legend>Media List</legend>
-    <pre>{{uploads | json}}</pre>
-    <button ng-click="getUploads()">Get Uploads</button>
-</div>
+            <img src="http://placehold.it/300x300"
+              ng-src="/cms-content/uploads/{{file.filename}}"
+              alt="...">
+          </div>
+        </div>
+      </ul>
 
+    </div>
+  </div><br>
diff --git a/routes/cms-server.js b/routes/cms-server.js
@@ -10,8 +10,8 @@ module.exports = function (config, app) {
 	var options = {
 		dotfiles: 'ignore',
 		etag: false,
-		extensions: ['htm', 'html'],
-		index: false,
+		extensions: ['png', 'html', 'jpeg', 'jpg', 'gif', 'css'],
+		index: true,
 		maxAge: '1d',
 		redirect: false,
 		setHeaders: function (res, path) {
@@ -20,7 +20,7 @@ module.exports = function (config, app) {
 	};
 
 	router.use(express.static(config.staticDir, options));
-	router.use(express.static(config.publicDir, options));
+
 	router.use('/', function(res, req, next){
 		req.send(config.publicDir + path.sep + 'index.html');
 		next();

diff --git a/routes/cms-upload.js b/routes/cms-upload.js
@@ -3,7 +3,7 @@ var upload = require( 'jquery-file-upload-middleware' );
 var fs = require( 'fs-extra' );
 var path = require('path');
 var busboy = require( 'connect-busboy' ); //middleware for form/file upload
-
+var Upload = require('./models/upload');
 module.exports = function (config, app) {
 
 	console.log('cms-upload intialized');
@@ -107,10 +107,8 @@ module.exports = function (config, app) {
 
 	};
 	app.use( busboy( {immediate: true} ) );
-	app.use( function (req, res) {
-
-
 
+	app.use( function (req, res) {
 		if (req.busboy) {
 			req.busboy.on( 'file', function (fieldname, file, filename, encoding, mimetype) {
 				var filePath = path.normalize(config.uploadsDestDir + path.sep + filename);
@@ -123,6 +121,20 @@ module.exports = function (config, app) {
 							res.status(400 ).send(err);
 						}
 
+						var newFilename = filename.replace(/\W/, '-');
+
+						//Save upload
+						var u = new Upload({
+							filename: path.basename(newFilename),
+							type: mimetype,
+							name: newFilename,
+							created: new Date(),
+							updated: new Date(),
+							extension: path.extname(newFilename)
+						});
+						u.save();
+
+
 						res.status(200).json({
 							filename: filename,
 							path: filePath

diff --git a/routes/models/upload.js b/routes/models/upload.js
@@ -0,0 +1,14 @@
+var mongoose = require( 'mongoose' );
+
+
+module.exports = mongoose.model( 'Upload', mongoose.Schema( {
+  name: String,
+  filename: String,
+  size: Number,
+  url: String,
+  type: String,
+  path: String,
+  meta: Object,
+  created: Date,
+  updated: Date
+} ) );