How to upload form with image file in it, AngularJS spring

Question

I have this form

<div class="row">
<h1 class="page-header">
    Create
</h1>
<form ng-submit="create()", enctype="multipart/form-data">
    <div class="form-group">
        <label>Name:</label>
        <input type="text" ng-model="subforum.name" class="form-control" />
    </div>
    <div class="form-group">
        <label>Desc:</label>
        <input type="text" ng-model="subforum.desc" class="form-control" />
    </div>

    <input type="file" ngf-select ng-model="subforum.icon" name="subforum.icon"
           accept="image/*" ngf-max-size="2MB" required
           ngf-model-invalid="errorFile">
    <img ng-show="myForm.file.$valid" ngf-thumbnail="subforum.icon" class="thumb"> <button ng-click="subforum.icon= null" ng-show="subforum.icon">Remove</button>

    <button class="btn btn-success" type="submit">Create</button>
</form>

``

In my JS

.config(function($stateProvider) {
$stateProvider.state('create', {

url:'/subforum/create',
        views: {
            'main': {
                templateUrl:'subforum/create.tpl.html',
                controller: 'CreateCtrl'
            }
        },
        data : { pageTitle : "Create Subforum" }

})

and

.factory('subforumService', function($resource) {
var service = {};

service.create = function (subforum, success, failure) {
        var SubForum= $resource ("/web-prog/rest/subforums");

        SubForum.save({}, subforum, success, failure) ;
    };

.controller("CreateCtrl", function($scope, $state, subforumService) {
$scope.create = function() {


    $scope.subforum.author = JSON.parse(localStorage.getItem ("logedUser"));
    subforumService.create($scope.subforum,
    function(returnedData) {
        $state.go("home");

    },
    function() {
        alert("Error creating");
    });
};

I know thats not best practice to save user in LocalStorage but for now its like that. On backend i have controller and in that controller i have methode:

@RequestMapping(method = RequestMethod.POST)
public ResponseEntity<SubForumResource> createPodforum(@RequestBody SubForumResource sentPodforum) {

}

and SubForumResource is

public class PodforumResource extends ResourceSupport {

private String name;

private String desc;

private byte[] icon;}

with geters and seters and everything i need. So when i have form without image it works without problems. But i need icon too. Im new to angularjs but need it for this project. When i try to use FormData() i dont know how to use $resource. So if someone can help me i would be thankful. This is my first prject i need to work front end so im lost.

You should use MultipartFile. Here is similar question and solution stackoverflow.com/questions/25884711/… — Nikolai Shevchenko
– Nikolai Shevchenko, Commented Feb 8, 2018 at 17:55

Neeraj Benjwal · Accepted Answer · 2018-02-08 18:06:33Z

1

You can refer below code for angularjs :

this.addEmployee = function (requestData, file) {
    var data = new FormData();
    data.append('file', file[0]);
    data.append('requestData', new Blob([JSON.stringify(requestData)], {
        type: "application/json"
    }));

    var config = {
        transformRequest: angular.identity,
        transformResponse: angular.identity,
        headers: {
            'Content-Type': undefined
        }
    }
    var url =  "http://localhost:8080/addEmployee";
    var promise1 = $http.post(url, data, config);
    var promise2 = promise1.then(function (response) {
        return response.data;
    },
        function errorCallback(response) {
            alert(response.data.errorMessage);
        });
    return promise2;
}

And for controller :

@RequestMapping(value = "/addEmployee", method = RequestMethod.POST, consumes = {"multipart/form-data" })
@CrossOrigin
public CustomResponse addEmployee(@RequestPart("file") MultipartFile file, @RequestPart("requestData") Employee emp) {

}

answered Feb 8, 2018 at 18:06

Neeraj Benjwal

1,36110 silver badges10 bronze badges

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

2 Comments

Vatras z Over a year ago

Tnx!Can you show me how did you pull all yours Employee's?

Neeraj Benjwal Over a year ago

Return response as a simple Pojo (REST) having the image field as a byte array. And in angularjs '<img ng-src="data:image/jpg;base64,{{emp.image}}">'.

Collectives™ on Stack Overflow

How to upload form with image file in it, AngularJS spring

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related