title: Using Multipart without Form in Spring MVC
body: <p>I had gone through many articles in stackoverflow on this specific topic, after a detailed analysis I have finally dared to post another question on the same topic.</p>
  
  <p>I think this would be obvious that what I wanted to do here,</p>
  
  <p><strong>What do I want?</strong></p>
  
  <p>I want to upload a file. I am using angularjs and Spring MVC.</p>
  
  <p><strong>Source :</strong></p>
  
  <p><strong>Controller @Spring  :</strong> </p>
  
  <pre><code>@RequestMapping(value="/upload", method=RequestMethod.POST, consumes = {"multipart/form-data"})
  public String handleFileUpload(@RequestParam(value = "file") MultipartFile file){
      String name="";
      if (!file.isEmpty()) {
          try {
              byte[] bytes = file.getBytes();
              BufferedOutputStream stream =
                      new BufferedOutputStream(new FileOutputStream(new File(name)));
              stream.write(bytes);
              stream.close();
              return "You successfully uploaded " + name + "!";
          } catch (Exception e) {
              return "You failed to upload " + name + " =&gt; " + e.getMessage();
          }
      } else {
          return "You failed to upload " + name + " because the file was empty.";
      }
  }
  @Bean
      public MultipartResolver multipartResolver() {
          CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
          multipartResolver.setMaxUploadSize(500000000);
          return multipartResolver;
      }
  </code></pre>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>File to upload: &lt;input type="file"
              file-model="file" name="fd"&gt;&lt;br /&gt; Name: &lt;input type="text" name="name"&gt;&lt;br /&gt;
          &lt;br /&gt; &lt;input type="submit" ng-click="uploadFile()" value="Upload"&gt; Press here to
          upload the file!
  </code></pre>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>$scope.uploadFile = function() {
      var fd = new FormData();
      var file = $scope.file;
      fd.append('file', file);
      $http.post("/upload",fd,
              {
                  headers : {
                      'Content-Type' : undefined
                  }
              }).success(function(data) {
          debugger;
      }).error(function(data) {
          debugger;
      })
  }
  </code></pre>
  
  <p>Looks fair??? Here are the observations</p>
  
  <p><strong>Observations on execution:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/nvG6N.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nvG6N.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/zyFFT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zyFFT.jpg" alt="enter image description here"></a></p>
  
  <p><strong>References :</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/21015891/spring-mvc-angularjs-file-upload-org-apache-commons-fileupload-fileuploade">Spring MVC - AngularJS - File Upload - org.apache.commons.fileupload.FileUploadException</a></p>
  
  <p><a href="https://stackoverflow.com/questions/2198470/javascript-uploading-a-file-without-a-file/2198524#2198524">Javascript: Uploading a file... without a file</a></p>
  
  <p><a href="https://stackoverflow.com/questions/2305218/what-is-the-boundary-parameter-in-an-http-multi-part-post-request">What is the boundary parameter in an HTTP multi-part (POST) Request?</a></p>
  
  <p>And many more....:)</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>Directive which is used in angular,</p>
  
  <pre><code>myApp.directive("fileread", [function () {
      return {
          scope: {
              fileread: "="
          },
          link: function (scope, element, attributes) {
              element.bind("change", function (changeEvent) {
                  var reader = new FileReader();
                  reader.onload = function (loadEvent) {
                      scope.$apply(function () {
                          scope.fileread = loadEvent.target.result;
                      });
                  }
                  reader.readAsDataURL(changeEvent.target.files[0]);
              });
          }
      }
  }]);
  </code></pre>
  
  <p><strong>Request extracted from chrome :</strong></p>
  
  <p><a href="https://i.stack.imgur.com/8WCBW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WCBW.jpg" alt="enter image description here"></a></p>