title: how to send base64 images and textvalues as json object in angular js and spring mvc 4
body: <p>I have converted my image to base 64 in angular js  and send it to my controller but the controller does not get the image when decoded  in the right format.The image in my angular js was 106kb but when i converted my image in base 64 the image size was only 8 bytes in controller</p>
  
  <p><strong>The html file</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="extensions/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-base64/angular-base64.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="myApp" ng-controller="testcontrol"&gt;
  
      &lt;input type="text" ng-model="A.username" placeholder="Enter Username" required&gt;
      &lt;input type="password" ng-model="A.password" placeholder="Enter Password" required&gt;
      &lt;input type="file" ng-model="B.img" placeholder="Browse image" required&gt;
  
      &lt;input type="button" value="Send" ng-click="setValues()" /&gt;
      &lt;input type="button" value="Send" ng-click="getValues()" /&gt;
  
      &lt;script&gt;
  
  
          var app = angular.module('myApp', ['base64']);
  
  
  
          app.controller('testcontrol', function($scope, $http,$base64) {
              $scope.setValues = function() {
                  alert("post");
                  var a=$base64.encode($scope.B);
                  $scope.A.image=a;
              console.log(a);
                  $http({
                      method : 'POST',
                      url : 'form/post',
                      headers : {
                          'Content-Type' : 'application/json'
                      },
                      data : $scope.A
                  }).success(function(data) {
  
  
                      alert(JSON.stringify(data));
                  });
              };
  
              $scope.getValues = function() {
                  alert("get");
                  $http.get('form/get').then(
                          function(response) {
                              if (response) {
                                  alert(JSON.stringify(response));
                              }
                          });
              };
  
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>The Controller in spring</strong></p>
  
  <pre><code>@Controller
  @RequestMapping(value="/form")
  public class Form {
      @ResponseBody
      @RequestMapping(value="/post" ,method=RequestMethod.POST)
      public String save(@RequestBody TestDto test)
      {
  logger.info("username"+test.getUsername());
  logger.info("password"+test.getPassword());
  logger.info("image"+test.getImage());
  
  byte[] decodedValue = Base64.getDecoder().decode(test.getImage());
  
  
  try {
      FileOutputStream f=new FileOutputStream(new File("/home/shalom/Pictures/tets.png"));
  
      f.write(decodedValue);
      f.close();
  
  } catch (FileNotFoundException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
  } catch (IOException e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
  }
  </code></pre>