title: File Upload API working with Postman but not with AngularJS
body: <p>I am going with file upload issue, in which I am using angular in front-end and Java at backend and uploading image on S3 bucket. I think there is no issue in java code because when I am using this upload URL on postman it is going well, I am Attaching Postman screenshot to showcase how it is working fine</p>
  
  <p><a href="https://i.stack.imgur.com/Ohe7V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ohe7V.png" alt="POSTMAN REQUEST SCREENSHOT"></a></p>
  
  <p>Here is My <strong><em>AngularJS Controller</em></strong> as follows :</p>
  
  <pre><code>contactUs.controller('contactController', ['$scope','$http', 
  function($scope,$http) {    $scope.uploadFile = function(){
  var file = $scope.myFile;
  
             console.log('file is ' );
             console.dir(file);
  
             var uploadUrl = "uploadURL";
  
             var fd = new FormData(file);
             fd.append('files', file);
  
             $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': 'multipart/form-data',
                          'Authorization': 'Basic QHN0cmlrZXIwNzoxMjM0NTY='}
             })
  
             .success(function(response){
              console.log(response);
             })
  
             .error(function(error){
              console.log(error);
             });
          };
    }]);
  </code></pre>
  
  <p>Here is My <strong><em>AngularJS Directive</em></strong> as follows :</p>
  
  <pre><code>contactUs.directive('fileModel', ['$parse', function ($parse) {
          return {
             restrict: 'A',
             link: function(scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;
                console.log(model);
                console.log(modelSetter);
                element.bind('change', function(){
                   scope.$apply(function(){
                      modelSetter(scope, element[0].files[0]);
                   });
                });
             }
          };
             }]);
  </code></pre>
  
  <p>The <strong><em>HTML</em></strong> is as follows :</p>
  
  <pre><code>&lt;input type = "file" name="files" file-model = "myFile"/&gt;
  &lt;button ng-click = "uploadFile()"&gt;upload me&lt;/button&gt;
  </code></pre>
  
  <p>The <strong>Java controller</strong> is as follows :</p>
  
  <pre><code>@Path("/upload")
  @POST
  @Consumes(MediaType.MULTIPART_FORM_DATA)
  @Produces("application/text")
  public Response uploadFile(@FormDataParam("files") List&lt;FormDataBodyPart&gt; bodyParts,@FormDataParam("files") FormDataContentDisposition fileDispositions) {
      /* Save multiple files */
      BodyPartEntity bodyPartEntity = null;
      String fileName = null;
      for (int i = 0; i &lt; bodyParts.size(); i++) {
          bodyPartEntity = (BodyPartEntity) bodyParts.get(i).getEntity();
          fileName = bodyParts.get(i).getContentDisposition().getFileName();
          s3Wrapper.upload(bodyPartEntity.getInputStream(), fileName);
      }
      String message= "File successfully uploaded !!";
      return Response.ok(message).build();
  }
  </code></pre>
  
  <p>The <strong><em>Error</em></strong> I am getting with the AngularJS is below :</p>
  
  <p><strong>400 - Bad Request</strong></p>