title: Why does angular-file-upload result in 400 Bad Request?
body: <p>I am trying to follow the <a href="https://www.npmjs.com/package/angular-file-upload" rel="nofollow">angular-file-upload</a> example from the NPM site but it is resulting in a 400 Bad Request error, although I am not sure why. Could it be an error on the server end? </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;input type="text" ng-model="myModelObj"&gt;
  &lt;input type="file" ng-file-select="onFileSelect($files)"&gt;
  &lt;button ng-click="upload.abort()"&gt;Cancel Upload&lt;/button&gt; 
  </code></pre>
  
  <p>My Module:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['kendo.directives', 'ui.router', 'angularFileUpload', 'data']);
  </code></pre>
  
  <p>My Controller:</p>
  
  <pre><code>myApp.controller('mainController',['$scope', 'dataService', '$upload', function($scope, dataService, $upload){
  
   $scope.onFileSelect = function($files) {
    for (var i = 0; i &lt; $files.length; i++) {
    var file = $files[i];
    $scope.upload = $upload.upload({
      url: myURL,
      method: 'POST', 
      headers: {
              'Authorization': 'bearer ' + token,
              'Accept': "application/json", 
              'Content-Type': undefined
            },
      data: {myObj: $scope.myModelObj},
      file: file 
  
     }).progress(function(evt) {
       console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
     }).success(function(data, status){
       console.log(data);
     }).error(function(data, status){
       console.log(status);
     });
   };
  }]);
  </code></pre>
  
  <p>I am just uploading a single file for now.</p>
  
  <p>Any help would be appreciated, I find debugging http requests pretty tricky.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>It was a matter of including the right fields in 'data'. The structure below solved the problem. May my stupidity be a lesson for all: always make sure you know what data the server-side is expecting.</p>
  
  <pre><code> url: myURL,
   method: 'POST', 
   headers: {
            'Authorization': 'bearer ' + token,
            'Accept': "application/json",
            'Content-Type': undefined
   },
   data: {
         'name': 'test',
         'files': file 
   }
  </code></pre>