title: Upload file to database (blob) using Angular
body: <p>I want to know how upload file into database using AngularJS. I have a form for create new entities with many field(<code>name, description, image, etc</code>). Using Angular <code>post</code> methods to get data from client, after that I use <code>DTO</code> to convert data to my Object and insert to database. I take object in request like image below, but I need get <code>byte[]</code> to put it into database blob image column..</p>
  
  <p><strong>This my service:</strong></p>
  
  <pre><code>app.factory('lotService', [ '$http', function($http) {
  var baseUrl = '/lotdata';
  var lotService = {};
  lotService.getLot = function(lotId) {
          var lot = $http.get(baseUrl + "/" + lotId).then(
                  function(response) {
                      return response.data;
                  });
          return lot;
      }
  lotService.updateLot = function (lot){
      return $http.put(baseUrl, lot);
  }
  lotService.getLotsByPerson = function(personId){
      return $http.get("/persons/" + personId + "/lots");
  }
  lotService.insertLot = function(lot){
      console.log(lot);
      return $http.post(baseUrl, lot);
  }
  return lotService;
  }]);
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>app.controller("CreateLotController", function($scope, $localStorage, lotService, categoryService){
   var l = this;
   l.name;
   l.info;
   l.subcat;
   l.number;
   l.state;
   l.buyprice;
   l.commision;
   l.startprice;
   l.startdate;
   l.dutartion;
   l.redemption;
   l.ownerid;
   l.bidid;
   l.img;
   l.categories;
   l.allcategories;
   getCategories();
   getAllCategories();
  
  
   function getCategories() {
          categoryService.getCategories().then(
              function(response) {
                  l.categories = response.data;
              },
              function(error) {
                  l.status = 'Unable to load categories data: '
                  + error.message;
              });
          }
  
   function getAllCategories() {
          categoryService.getAllCategories().then(
              function(response) {
                  l.allcategories = response.data;
              },
              function(error) {
                  l.status = 'Unable to load categories data: '
                  + error.message;
              });
          }
  
   l.insertLot = function(cid) {
  
   if($localStorage.curruser.id  != undefined){
      var lot = {
  
          name : l.name,
          info : l.info,
          categoryId : cid,
          number : "1",
          stateId : null,
          buyPrice : null,
          commission : "1",
          startPrice : l.startprice,
          startDate : l.startdate,
          duration : "3000",
          redemption : l.redemption,
          ownerId : $localStorage.curruser.id,
          bidId : null,
          img : l.img
      };
      lotService.insertLot(lot).then(function(response){
          console.log(response);
          l.success = true;
      }, function(error){
          l.status = 'Unable to create lot: ' + error;
          console.log(error);
      }); 
   }else{
          console.log("Not logged");
      }
  };
  
  });
  </code></pre>
  
  <p>Directives </p>
  
  <pre><code>app.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>AND View <code>Lot.jsp</code></p>
  
  <pre><code>&lt;input type="file" fileread="newLotCtrl.img" style="display:inline;"&gt;[enter image description here][1]
  </code></pre>