title: File uploading with angular and angular-file-upload
body: <p>I'm using angular and this <a href="https://github.com/danialfarid/angular-file-upload" rel="nofollow">plugin</a> to upload files. It basically starts processing on file upload but I'm tying to start on form submission.</p>
  
  <p>I tried this : </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form&gt;
     &lt;input type="file" ng-file-select="onFileSelect($files)"&gt;
     &lt;input type="submit" ng-click="sendMail()" value="send"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>app.controller('mail', function ($scope, $http, $upload) {
  
      $scope.onFileSelect = function($files) {
          $scope.files = angular.copy($files);
          console.log($scope.files); // Returns my object (size, type, name...)
      }
  
      $scope.sendMail = function() {
      var file = myFile;
      console.log(file);             // Still returns my object
          $scope.upload = $upload.upload({
          url: 'server/mail.php',
          data: { 
              // stuff 
          },
          file: file,                // Returns : Error: does not implement Blob
          }).success(function(data, status, headers, config) {
              console.log(data);
          });
      }
  
  })
  </code></pre>
  
  <p>I tried to make a global variable like <code>myFile = $scope.files;</code> in the first function. Then calling it in the second like so : <code>var file = myFile;</code>. Console log returns the same object but I get the following error :</p>
  
  <blockquote>
    <p>Error: Argument 2 of FormData.append does not implement interface
    Blob.</p>
  </blockquote>
  
  <p>Thanks for any tip.</p>