title: Uploading a file with AngularJS and bluimp on success callback of another form
body: <p>I have followed the <a href="http://code-like-a-poem.blogspot.co.il/2013/05/angularjs-tutorial-4-file-upload-using.html" rel="noreferrer">following</a> tutorial in order to integrate the notorious bluimp jQuery file uploader in my AngularJS project.</p>
  
  <p>After some research I found that in the options array, witihn the jquery.fileuploader.js file, there is an option called autoUpload, which when set to true upload the file automatically.
  I tried to disable it(false, undefined), but quickly I learned out that this causes the upload not to function at all, not even on the form submit.</p>
  
  <p>I need to trigger the upload manually, say within another callback, or by a click event.
  can that be done?.</p>
  
  <p>code:</p>
  
  <pre><code>app.directive("fileupload", function() {
      return {
        restrict: "A",
        scope: {
          done: "&amp;",
          progress: "&amp;",
          fail: "&amp;",
          uploadurl: "=",
          customdata: "&amp;"
        },
        link: function(scope, elem, attrs) {
          var uploadOptions;
          uploadOptions = {
            url: scope.uploadurl,
            dataType: "json"
          };
          if (scope.done) {
            uploadOptions.done = function(e, data) {
              return scope.$apply(function() {
                return scope.done({
                  e: e,
                  data: data
                });
              });
            };
          }
          if (scope.fail) {
            uploadOptions.fail = function(e, data) {
              return scope.$apply(function() {
                return scope.fail({
                  e: e,
                  data: data
                });
              });
            };
          }
          if (scope.progress) {
            uploadOptions.progress = function(e, data) {
              return scope.$apply(function() {
                return scope.progress({
                  e: e,
                  data: data
                });
              });
            };
          }
          return elem.fileupload(uploadOptions).bind("fileuploadsubmit", function(e, data) {
            return data.formData = {
                  JSON.stringify(scope.customdata())
            };
          });
        }
      };
    });
  app.service('uploadService', function(authService) {
      var initializeFn, processFn;
      initializeFn = function(e, data, process) {
        var upload;
        return upload = {
          message: '',
          uploadurl: authService.getBaseUrl() + '/applications/',
          status: false
        };
      };
      processFn = function(e, data, process) {
        var file, upload;
        upload = {};
        upload.successData = [];
        upload.status = true;
        upload.error = false;
        if (process === 'done') {
          upload.message = data.result.result;
          console.log(data);
          file = data.result.resume;
          upload.successData = {
            // name: file.name,
            // fullUrl: file.url,
            // thumbUrl: file.thumbnail_url
          };
        } else if (process === 'progress') {
          upload.message = 'Uploading....!!!';
        } else {
          upload.error = true;
          upload.message = 'Please try again';
          console.log(e, data);
        }
        return upload;
      };
      return {
        process: processFn,
        initialize: initializeFn
      };
  
    });
  
  app.controller('applyCtrl', function($scope, $routeParams, uploadService){
          $scope.model.formData = {};
          $scope.model.formData.job = $routeParams.jobId;
          $scope.uploadLayer = function(e, data, process) {
            return $scope.uploadReturn = uploadService.process(e, data, process);
          };
          $scope.customData = function() {
              return $scope.model.formData;
          };
          return $scope.uploadReturn = uploadService.initialize();
  
  });
  </code></pre>
  
  <p>view:</p>
  
  <pre><code>    &lt;form class="applyForm" ng-submit="uploadLayer(e, data, 'progress')"&gt;
          &lt;fieldset&gt;
              &lt;div class="formLine"&gt;
                  &lt;div class="wideFieldContainer"&gt;
                      &lt;input id="testUpload" type="file" fileupload customdata="customData()" name="resume" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                      &lt;/fieldset&gt;
               &lt;/form&gt;
  </code></pre>
  
  <p>scripts loading order:</p>
  
  <pre><code>...
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/filters.js"&gt;&lt;/script&gt;
      &lt;script src="js/directives.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bluimp/js/vendor/jquery.ui.widget.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bluimp/js/jquery.piframe-transport.js"&gt;&lt;/script&gt;
       &lt;script src="lib/bluimp/js/jquery.fileupload.js"&gt;&lt;/script&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>