Hook up file uploads

services/web/app/views/project/list.jade

@@ -7,6 +7,7 @@ block scripts
 			tags: !{tags}
 		};
 
+	script(src=jsPath+'libs/fineuploader.js')
 	script(src=jsPath+'project-list.js')
 
 block content
@@ -26,9 +27,12 @@ block content
 								a(
 									href="#",
 									ng-click="openCreateProjectModal('example')"
-								)  Example Project
+								) Example Project
 							li
-								a#uploadNewProject(href="#", data-csrf=csrfToken) Upload Project
+								a(
+									href="#",
+									ng-click="openUploadProjectModal()"
+								) Upload Project
 							li.divider
 							li.dropdown-header Templates
 							li
@@ -62,7 +66,10 @@ block content
 							)
 								a.menu-indent(href="#", ng-click="selectTag()")
 									i.icon.fa(
-										ng-class="{'fa-folder-open-o': tag.selected, 'fa-folder-o': !tag.selected}"
+										ng-class="{\
+											'fa-folder-open-o': tag.selected,\
+											'fa-folder-o': !tag.selected\
+										}"
 									)
 									|  {{tag.name}} 
 								span.small ({{tag.project_ids.length}})
@@ -247,3 +254,12 @@ block content
 				)
 					span(ng-hide="state.inflight") Create
 					span(ng-show="state.inflight") Creating...
+
+
+		script(type="text/ng-template", id="uploadProjectModalTemplate")
+			.modal-header
+				h3 Upload Zipped Project
+			.modal-body(ng-fine-upload)
+				span Upload a zipped project
+			.modal-footer
+				button.btn.btn-default.cancel Cancel

services/web/public/coffee/project-list.coffee

@@ -262,6 +262,12 @@ ProjectPageApp.controller "ProjectPageController", ($scope, $modal, $http, $q) -
 
 		$scope.updateVisibleProjects()
 
+	$scope.openUploadProjectModal = () ->
+		modalInstance = $modal.open(
+			templateUrl: "uploadProjectModalTemplate"
+			controller: "UploadProjectModalController"
+		)
+
 ProjectPageApp.controller "ProjectListItemController", ($scope) ->
 	$scope.onSelectedChange = () ->
 		$scope.$emit "selected:on-change"
@@ -356,4 +362,43 @@ ProjectPageApp.controller 'NewProjectModalController', ($scope, $modalInstance,
 				$modalInstance.close(project_id)
 
 	$scope.cancel = () ->
-		$modalInstance.dismiss('cancel')
+		$modalInstance.dismiss('cancel')
+
+ProjectPageApp.directive 'ngFineUpload', ($timeout) ->
+	return (scope, element, attrs) ->
+		console.log "Creating fine uploader"
+		new qq.FineUploader
+			element: element[0]
+			multiple: false
+			disabledCancelForFormUploads: true
+			validation:
+				allowedExtensions: ["zip"]
+			request:
+				endpoint: "/project/new/upload"
+				forceMultipart: true
+				params:
+					_csrf: window.csrfToken
+			callbacks:
+				onComplete: (error, name, response)->
+					if response.project_id?
+						window.location = '/project/'+response.project_id
+			text:
+				waitingForResponse: "Creating project..."
+				failUpload: "Upload failed. Is it a valid zip file?"
+				uploadButton: "Select a .zip file"
+			template: """
+				<div class="qq-uploader">
+					<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>
+					<div class="qq-upload-button btn btn-primary btn-lg">
+						<div>{uploadButtonText}</div>
+					</div>
+					<span class="or btn-lg"> or </span>
+					<span class="drag-here btn-lg">drag a .zip file</span>
+					<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>
+					<ul class="qq-upload-list"></ul>
+				</div>
+			"""
+
+ProjectPageApp.controller 'UploadProjectModalController', ($scope, $modalInstance, $timeout) ->
+	$scope.cancel = () ->
+		$modalInstance.dismiss('cancel')

services/web/public/stylesheets/style.less

@@ -39,6 +39,7 @@
 @import "components/panels.less";
 @import "components/wells.less";
 @import "components/close.less";
+@import "components/fineupload.less";
 
 // Components w/ JavaScript
 @import "components/modals.less";