title: how to send html input type as file in base 64 in angular js to spring mvc controller
body: <p><a href="https://i.stack.imgur.com/w7yDB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w7yDB.png" alt="enter image description here"></a>I am able to convert image to base 64 string but for some reason when i send it to server i cannot get the original image back
  here is my code for example if i send an image of size 100kb In server when i decode the image i get only 8 bytes</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=encodeURIComponent ($base64.encode($scope.B));
                 console.log(a);
                  $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>Here is my controller logic</p>
  
  <pre><code>package com.brian.app.controller;
  
  import java.io.File;
  import java.io.FileInputStream;
  import java.io.FileNotFoundException;
  import java.io.FileOutputStream;
  import java.io.IOException;
  import java.util.Base64;
  
  import org.apache.log4j.Logger;
  import org.springframework.stereotype.Controller;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  import org.springframework.web.bind.annotation.ResponseBody;
  
  import com.brian.app.dto.TestDto;
  
  
  @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();
  }
  
  
  
  
  logger.info("save");    
      return "success";
      }
      @ResponseBody
      @RequestMapping(value="/get" ,method=RequestMethod.POST)
      public String saveget()
      {
  
  logger.info("get"); 
      return "success";
      }
      private static final Logger logger = Logger.getLogger(Form.class);
  }
  </code></pre>