title: AngularJS Uploading An Image With ng-upload
body: <p>I am trying to upload a file in AngularJS using ng-upload but I am running into issues. My html looks like this:</p>
  
  <pre><code>&lt;div class="create-article" ng-controller="PostCreateCtrl"&gt;
          &lt;form ng-upload method="post" enctype="multipart/form-data" action="/write" &gt;
              &lt;fieldset&gt;
                  &lt;label&gt;Category&lt;/label&gt;
                  &lt;select name="category_id" class=""&gt;
                      &lt;option value="0"&gt;Select A Category&lt;/option&gt;
                      &lt;?php foreach($categories as $category): ?&gt;
                          &lt;option value="&lt;?= $category -&gt; category_id; ?&gt;"&gt;&lt;?= $category -&gt; category_name; ?&gt;&lt;/option&gt;
                      &lt;?php endforeach; ?&gt;
                  &lt;/select&gt;
  
                  &lt;label&gt;Title&lt;/label&gt;
                  &lt;input type="text" class="title span5" name="post_title"
                         placeholder="A catchy title here..."
                         value="&lt;?= $post -&gt; post_title; ?&gt;" /&gt;
  
                  &lt;label&gt;Attach Image&lt;/label&gt;
                  &lt;input type="file" name="post_image" /&gt;
  
                   &lt;a href='javascript:void(0)'  class="upload-submit: uploadPostImage(contents, completed)" &gt;Crop Image&lt;/a&gt;
  
                  &lt;label&gt;Body&lt;/label&gt;
                  &lt;div id="container"&gt;
                  &lt;textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."&gt;&lt;?= $post -&gt; post_content; ?&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div style='clear:both;'&gt;&lt;/div&gt;
                  &lt;label&gt;Preview&lt;/label&gt;
                  &lt;div id='textarea-preview'&gt;&lt;/div&gt;
  
              &lt;/fieldset&gt;
              &lt;div class="span7" style="margin: 0;"&gt;
                  &lt;input type="submit" class="btn btn-success" value="Create Post" /&gt;
              &lt;input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" /&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And my js controller looks like this:</p>
  
  <pre><code>ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel',
  function($scope, PostModel) {
  
      $scope.uploadPostImage = function(contents, completed) {
          console.log(completed);
          alert(contents);
      }
  
  }]);
  </code></pre>
  
  <p>The problem I am facing is when the crop image is hit and it executes uploadPostImage, it uploads the entire form. Not desired behavior but I can make it work. The big problem is in the js the function uploadPostImage 'contents' parameters is always undefined, even when the 'completed' parameter comes back as true.</p>
  
  <p>The goal is to only upload an image for cropping. What am I doing wrong in this process?</p>