title: the request was rejected because no multipart boundary was found with angularjs and spring mvc
body: <p>I was trying to upload multiple input type file with multiple="true" using angular js and spring mvc but i got exception from server is "the request was rejected because no multipart boundary was found"</p>
  
  <p>here i will put my code below</p>
  
  <p>my jsp is</p>
  
  <pre><code> &lt;html ng-app="myApp"&gt;
   &lt;body&gt;
         &lt;div ng-controller="controller"&gt;
              &lt;input type="submit" name="submit" value="add"  ng-click="add();" /&gt;
            &lt;form name="form" id="form"   ng-submit="submitRecord(blog)" enctype="multipart/form-data" &gt;
                     &lt;div id="outerdiv" name="outerdiv"&gt;
                     &lt;/div&gt;
            &lt;/form&gt;
         &lt;/div&gt;
   &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>here i was generate input elements from angular controller after clicking add and input controls are generate in "".</p>
  
  <p>my angular controller is</p>
  
  <pre><code>'use strict';
  
  var App = angular.module('TechnoBlogs', ['ngRoute','ui.router']);
  var $injector = angular.injector(['ng']);
  App.config(['$httpProvider', function ($httpProvider) {    
  
      /*$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';*/
  }],['$routeProvider',function($routeProvider){
      $routeProvider.
      when('/create', {
         templateUrl: '/',
         controller: 'controller'
  });
  
   }]);
  var currentg1=0;
  
  var controller = function($scope,$http,fileService){
  
  $scope.blog = [];
  /*var currentg1=0;*/
  $scope.blog.desc=[];
  $scope.blog.desccode=[];
  $scope.blog.descimg=[];
  
  $scope.add=function(){
  
  
  
  var $div = angular.element("&lt;br&gt;&lt;div&gt;&lt;label id='desc["+currentg1+"]'   for='desc["+currentg1+"]'&gt;Description"+currentg1+"&lt;span style='color: red;''&gt;*&lt;/span&gt;&lt;/label&gt;&lt;textarea rows='3' cols='6' id='desc["+currentg1+"]' name='desc["+currentg1+"]' ng-model='blog.desc["+currentg1+"]' required='required'&gt;&lt;/textarea&gt; &lt;/div&gt;&lt;br&gt;&lt;div&gt;&lt;label id='desccodeL["+currentg1+"]' for='desccodeL["+currentg1+"]''&gt;Code "+currentg1+"&lt;/label&gt;&lt;textarea rows='3' cols='6' id='desccode["+currentg1+"]' name='desccode["+currentg1+"]' ng-model='blog.desccode["+currentg1+"]''&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;div&gt;&lt;label id='descimgL["+currentg1+"]' for='descimgL["+currentg1+"]'&gt;Image "+currentg1+"&lt;/label&gt;&lt;input type='file' id='descimg["+currentg1+"]' class='file' name='descimg["+currentg1+"]' my-file-upload='descimg["+currentg1+"]'  multiple/&gt;&lt;/div&gt;");
  var e=document.getElementById("outerdiv");
  
  
  angular.element(e).append($div).injector().invoke(function($compile) {
        var scope = angular.element($div).scope();
        $compile($div)(scope);        
      });
  
      currentg1++;
  };
  
  $scope.submitRecord=function(blog){
  
  
  var fd = new FormData();
  var files=[];
  for(var i=0;i&lt;currentg1;i++)
  {
  
      files[i] = fileService.getFile("descimg["+i+"]");
      console.log("files["+i+"] ---&gt; "+files[i]);
  }
  
  
  fd.append("files",files);
  
  alert(fd);
  console.log("---&gt;&gt;&gt; "+files);
  
  
  $http.post("saveblog",fd, {
      transformRequest: angular.identity,
      headers: {'Content-Type': undefined}
  }).success(function(){
      alert("success");
  
  })
  
  };
  
  };
  
  
  App.service('fileService', function () {
   var file = {};
   var fileService = {};
  
   fileService.getFile = function (name) {
       return file[name];
  };
  
   fileService.setFile = function (newFile, index, name) {
      if (index === 0 &amp;&amp; file[name] === undefined)
      file[name] = [];
     file[name][index] = newFile;
  
   };
  
   return fileService;
  })
  
   App.directive('myFileUpload', function (fileService) {
   return function (scope, element, attrs) {
       element.bind('change', function () {
        var index;
  
         var index_file = 0;
         for (index = 0; index &lt; element[0].files.length; index++) {
         fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
          index_file++;
      }
      index_file = 0;
  
    });
    }
   });
  </code></pre>
  
  <p>My spring controller is </p>
  
  <pre><code>@RequestMapping(value="/saveblog", method=RequestMethod.POST, headers = "'Content-Type': 'multipart/form-data'")
  public void saveblog(MultipartHttpServletRequest request, HttpServletResponse response)
  {
  
      System.out.println("in multipart ");
      Iterator&lt;String&gt; itr=request.getFileNames();
  
      MultipartFile file=request.getFile(itr.next());
  
      String fileName=file.getOriginalFilename();
      System.out.println(fileName);
  
  }
  </code></pre>
  
  <p>i also create a bean for multipart</p>
  
  <pre><code>  &lt;bean id="multipartResolver"                class="org.springframework.web.multipart.commons.CommonsMultipartResolver"&gt;
  &lt;property name="maxUploadSize" value="2097152" /&gt;
  &lt;/bean&gt;
  </code></pre>
  
  <p>after that still got exception   
  
  <p>my response header is</p>
  
  <pre><code>HTTP/1.1 404 Not Found
  Server: Apache-Coyote/1.1
  Content-Type: text/html;charset=utf-8
  Content-Language: en
  Content-Length: 949
  </code></pre>
  
  <p>my request header is </p>
  
  <pre><code>POST /technoblogs/blog/saveblog HTTP/1.1
  Host: localhost:8080
  Connection: keep-alive
  Content-Length: 209
  Accept: application/json, text/plain, */*
  Origin: http://localhost:8080
  User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36    (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
  Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7uIEu9ax8IY8nCde
  Referer: http://localhost:8080/technoblogs/blog/
  Accept-Encoding: gzip, deflate
  Accept-Language: en-US,en;q=0.8
  Cookie: JSESSIONID=61816E4AB7F6905F688755CF22BC16FF
  </code></pre>