1

I'm trying to upload a file from front end to save in the database. But Spring controller is failing to receive the file.

HTML

<html>
   <title>FILE_OLPV</title>
   <head>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <body ng-app = "myApp">

      <div ng-controller = "myCtrl">
         <input type = "file" file-model = "myFile"/>
         <button ng-click = "uploadFile()">upload me</button>
      </div>

      <script type="text/javascript" src="js/abc.js"></script>

   </body>
</html>

JS

var myApp = angular.module('myApp', []);

         myApp.directive('fileModel', ['$parse', function ($parse) {
            return {
               restrict: 'A',
               link: function(scope, element, attrs) {
                  var model = $parse(attrs.fileModel);
                  var modelSetter = model.assign;

                  element.bind('change', function(){
                     scope.$apply(function(){
                        modelSetter(scope, element[0].files[0]);
                     });
                  });
               }
            };
         }]);

         myApp.service('fileUpload', ['$http', function ($http) {
            this.uploadFileToUrl = function(file, uploadUrl){
               var fd = new FormData();
               fd.append('file', file);

               $http.post(uploadUrl, fd, {
                  transformRequest: angular.identity,
                  headers: {'Content-Type': undefined}
               })

               .success(function(){
               })

               .error(function(){
               });
            }
         }]);

         myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
            $scope.uploadFile = function(){
               var file = $scope.myFile;

               console.log('file is ' );
               console.dir(file);

               var uploadUrl = 'fileUpload';
               fileUpload.uploadFileToUrl(file, uploadUrl);
            };
         }]);

Spring Controller

@RequestMapping(value="/fileUpload", method=RequestMethod.POST)
public @ResponseBody String upload(@RequestParam("file") MultipartFile file ) throws IOException {
        System.out.println("HEEEEEEEEEEEEEEEEEEEE");

            MultipartFile file1 = file;
            System.out.println(file1);
            System.out.println("Inside for loop");
}

Configuaration.xml

<bean id="multipartResolver"   class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="100000"/>
</bean> 

It is failing to reach the Spring controller. Any idea on this?

2
  • Is the headers: {'Content-Type': undefined} deliberate? Commented Nov 6, 2015 at 9:37
  • @AdityaSantoso Yes It is required. Commented Nov 6, 2015 at 10:05

1 Answer 1

0

try to replace @RequestParam("file") with @RequestBody("file"). Also note that the form data object won't work for IE9 and older

Sign up to request clarification or add additional context in comments.

3 Comments

If replace like public @ResponseBody String upload(@RequestBody MultipartFile file ), content of file is null. I checked in debug mode
Also add these properties to the Angular http object: enctype: 'multipart/form-data' ,contentType: false, ,processData: false
You mean to say like this? headers: {'Content-Type': 'multipart/form-data' ,contentType: false, processData: false} I tried but still it is empty

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.