ng_flow_as_directive.diff

diff --git a/app/assets/javascripts/angular/c-edit-steps.js b/app/assets/javascripts/angular/c-edit-steps.js
index 91cccca..a39fd95 100644
--- a/app/assets/javascripts/angular/c-edit-steps.js
+++ b/app/assets/javascripts/angular/c-edit-steps.js
@@ -1,8 +1,8 @@
 'use strict';
 // view posts (steps) controller
 // for editing and deleting posts:
-makerSpaceApp.controller('EditStepsCtrl', ['$scope', '$http', 'flowFactory',
-  function ($scope, $http, flowFactory) {
+makerSpaceApp.controller('EditStepsCtrl', ['$scope', '$http',
+  function ($scope, $http) {
     $scope.editPost = {};
     var xhrUrl;
     $scope.editPost.init = function(stepId, title, body, postUrl, projUrl){
@@ -12,15 +12,8 @@ makerSpaceApp.controller('EditStepsCtrl', ['$scope', '$http', 'flowFactory',
       $scope.editPost.projUrl = projUrl;
       $scope.editPost.sending = false;
       $scope.editPost.hasFile = false;
-      $scope.flowUploader = flowFactory.create({
-        target: postUrl + "/images",
-        singleFile: true
-      });
       xhrUrl = postUrl;
     };
-    $scope.uploadImage = function(flow) {
-      flow.upload();
-    }
     $scope.editPost.submit = function() {
       $http({
         method: 'PUT',
@@ -45,8 +38,5 @@ makerSpaceApp.controller('EditStepsCtrl', ['$scope', '$http', 'flowFactory',
         $scope.editPost.sending = false;
       });
     };
-    $scope.editPost.imgUploaded = function() {
-      $scope.globalVars.alert('success', 'Your image has been changed.');
-    }
   }
 ]);
\ No newline at end of file
diff --git a/app/assets/javascripts/angular/d-flow-uploader.js b/app/assets/javascripts/angular/d-flow-uploader.js
new file mode 100644
index 0000000..f5bfd80
--- /dev/null
+++ b/app/assets/javascripts/angular/d-flow-uploader.js
@@ -0,0 +1,29 @@
+'use strict';
+
+// image file uploader Angular directive:
+makerSpaceApp.directive('flowUploader', ['flowFactory', function(flowFactory) {
+  return {
+    restrict:'EA',
+    templateUrl: "flow-uploader.html",
+    scope: {
+      parentPath: "@",
+      existingImage: '='
+    },
+    link: function($scope, elem, attrs) {
+
+      $scope.flowUploader = flowFactory.create({
+        target: $scope.parentPath + "/images",
+        singleFile: true
+      });
+
+      $scope.imgUploaded = function() {
+        $scope.globalVars.alert('success', 'Your image has been changed.');
+      }
+
+      $scope.uploadImage = function(flow) {
+        flow.upload();
+      }
+
+    }
+  }
+}]);
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 7015bbe..2b5d1f1 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -68,6 +68,38 @@
       <label class="error" ng-message="compareTo">Your passwords do not match.</label>
     </script>
 
+    <script type="text/ng-template" id="flow-uploader.html">
+      <div flow-init flow-object="flowUploader" flow-files-submitted="uploadImage($flow)" flow-file-success="imgUploaded($flow)">
+        <!-- Initial img: -->
+        <img ng-show="existingImage"
+          ng-src="{{existingImage}}"
+          alt="Post main image"
+          ng-hide="$flow.files.length > 0">
+        <!-- New img: -->
+        <div ng-repeat="file in $flow.files"
+          class="transfer-box upload-img-preview">
+          <img flow-img="file" />
+          <div class="progress">
+            <div class="progress-bar" role="progressbar"
+              aria-valuenow="{{file.progress() * 100}}"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              ng-style="{width: (file.progress() * 100) + '%'}">
+              <span class="sr-only">{{file.progress()}}% Complete</span>
+            </div>
+            Uploading...
+          </div>
+        </div>
+        <div class="file-drop-area"
+          flow-drop=""
+          ng-class="">
+          <div flow-btn class="file-upload-bttn">
+            Select a new image
+          </div>
+          Or Drag &amp; Drop Here
+        </div>
+      </div>
+    </script>
     <!-- Console makey -->
     <%=render "shared/makey" %>
     <!-- Noscript message -->
diff --git a/app/views/steps/edit.html.erb b/app/views/steps/edit.html.erb
index 346c97b..0c01168 100644
--- a/app/views/steps/edit.html.erb
+++ b/app/views/steps/edit.html.erb
@@ -9,40 +9,15 @@
       '<%= escape_javascript user_project_url(@step.user, @step.project) %>');">
     <!-- Image uploader: -->
     <h3>Photo:</h3>
+
     <% if !@step.images.empty? && @step.images.first.data.exists? %>
-      <span ng-init="editPost.image =
-        '<%= @step.images.first.data.url(:full) %>'"></span>
+      <span ng-init="editPost.image ='<%= @step.images.first.data.url(:full) %>'"></span>
     <% end %>
-    <div flow-init flow-object="flowUploader" flow-files-submitted="$flow.upload()" flow-file-success="editPost.imgUploaded()">
-      <!-- Initial img: -->
-      <img ng-show="!editPost.hasFile"
-        ng-src="{{editPost.image}}"
-        alt="Post main image"
-        ng-hide="$flow.files.length > 0">
-      <!-- New img: -->
-      <div ng-repeat="file in $flow.files"
-        class="transfer-box upload-img-preview">
-        <img flow-img="file" />
-        <div class="progress">
-          <div class="progress-bar" role="progressbar"
-            aria-valuenow="{{file.progress() * 100}}"
-            aria-valuemin="0"
-            aria-valuemax="100"
-            ng-style="{width: (file.progress() * 100) + '%'}">
-            <span class="sr-only">{{file.progress()}}% Complete</span>
-          </div>
-          Uploading...
-        </div>
-      </div>
-      <div class="file-drop-area"
-        flow-drop=""
-        ng-class="">
-        <div flow-btn class="file-upload-bttn">
-          Select a new image
-        </div>
-        Or Drag &amp; Drop Here
-      </div>
-    </div>
+    <flow-uploader 
+      parent-path='<%= escape_javascript api_v1_step_url(@step) %>'
+      existing-image='editPost.image'
+    ></flow-uploader>
+
     <hr>
     <!-- Change title -->
     <h3>Title:</h3>
diff --git a/config/unicorn.rb b/config/unicorn.rb
index 384149f..41047ea 100644
--- a/config/unicorn.rb
+++ b/config/unicorn.rb
@@ -2,7 +2,7 @@ worker_processes Integer(ENV["WEB_CONCURRENCY"] || 3)
 timeout 15
 preload_app true
 
-listen ENV['PORT'], :backlog => Integer(ENV['UNICORN_BACKLOG'] || 200)
+# listen ENV['PORT'], :backlog => Integer(ENV['UNICORN_BACKLOG'] || 200)
 
 before_fork do |server, worker|
   Signal.trap 'TERM' do