Upload file to database (blob) using Angular

Question

I want to know how upload file into database using AngularJS. I have a form for create new entities with many field(name, description, image, etc). Using Angular post methods to get data from client, after that I use DTO to convert data to my Object and insert to database. I take object in request like image below, but I need get byte[] to put it into database blob image column..

This my service:

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;
}]);

Controller:

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");
    }
};

});

Directives

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]);
        });
    }
}
}]);

AND View Lot.jsp

<input type="file" fileread="newLotCtrl.img" style="display:inline;">[enter image description here][1]

I know that angular ng-model dont work with input file, so i try to write my own directives but it was unsuccessful — Michael Dobosh
– Michael Dobosh, Commented Aug 23, 2016 at 13:28

Ivan Ropiteaux · Accepted Answer · 2016-08-23 14:25:21Z

1

You need to use FormData() with something like this:

var fd = new FormData();
fd.append('name', name);
fd.append('description', description);
fd.append('image', image);
$http.post(baseUrl, fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined}
});

where image is coming from your reader.readAsDataURL

Take a look here

edited Aug 23, 2016 at 14:25

answered Aug 23, 2016 at 14:19

Ivan Ropiteaux

665 bronze badges

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

Collectives™ on Stack Overflow

Upload file to database (blob) using Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related