Angular: how to post a file to the server on form submit

Question

I have a form that's being posted to my back-end (Kotlin, Spring Web). That form had some text inputs and the post worked flawlessly. But when I added a file input, the post stopped working, returning the following error:

{status: 400, error: "Bad Request",…}
error: "Bad Request"
exception: "org.springframework.http.converter.HttpMessageNotReadableException"
message: "Could not read document: No suitable constructor found for type [simple type, class com.test.InsertConfigCommand]: can not instantiate from JSON object (missing default constructor or creator, or perhaps need to add/enable type information?)↵ at [Source: java.io.PushbackInputStream@2cb43211; line: 1, column: 2]; nested exception is com.fasterxml.jackson.databind.JsonMappingException: No suitable constructor found for type [simple type, class com.test.InsertConfigCommand]: can not instantiate from JSON object (missing default constructor or creator, or perhaps need to add/enable type information?)↵ at [Source: java.io.PushbackInputStream@2cb43211; line: 1, column: 2]"

Here are the codes of my stack:

View:

<form ng-submit="insert(config)">
    <input type="text" ng-model="config.name">
    <input type="text" ng-model="config.address">
    <input type="file" ng-model="config.file">
    <button type="submit">Save</button>
</form>

Controller (front-end):

$scope.insert = function (config) {
    $http.post('/config', config)
        .then(function (response) {
            $.snackbar({content: "Success!"});
        }, $scope.showErrorMessage);
};

Controller (back-end):

@RequestMapping(method = arrayOf(RequestMethod.POST))
fun insert(@RequestBody config: InsertConfigCommand) = service.save(config)

InsertConfigCommand

data class InsertConfigCommand (
    val name : String = "",
    val address : String = "",
    val file : MultipartFile
)

I've tried to do the post the following way, it works, but only sends the file:

Controller (front-end):

$scope.insert = function (file) {
    var fd = new FormData();
    fd.append('file', file);

    return $http.post('/config', fd, {
        transformRequest: angular.identity,
        headers: {
            'Content-Type': undefined
        }
    });
};

Controller (back-end):

@RequestMapping(method = arrayOf(RequestMethod.POST))
fun insert(@RequestParam(value = "file", required = true) file: MultipartFile) = service.save(file)

What do I need to change for this post to work? I want to send the input file on the same object that the name and address.

score 0 · Answer 1 · answered Jun 02 '16 at 06:32

0

I suppose you are using Jackson, right?

Bytecode of Data Classes in Kotlin looks differently than one of a regular POJO (with default constructor) and so Jackson is unable to initialize such class. Try to add a dependency to Jackson Kotlin Module and make sure to register it.

If you use Spring Boot then add following code to any of your @Configuration annotated classes:

@Bean
open fun kotlinModule(): KotlinModule {
    return KotlinModule()
}

and see if it helps.

answered Jun 02 '16 at 06:32

Rafal G.

4,252
1
25
41

Sorry, it did not work. I don't think that it's a Jackson problem, because when I do the post without the file param, the parse works. – Marcos Tanaka Jun 02 '16 at 14:40

score 0 · Accepted Answer · answered Jun 02 '16 at 14:38

I've used this tutorial which encapsulates the file inside the FormData object, and posts that object https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

$scope.insert = function (config) {
    var fd = new FormData();
    fd.append('name', config.name);
    fd.append('address', config.address);
    fd.append('file', $scope.file);
    $http.post('/config', fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .then(function (response) {
            $.snackbar({content: "Success!"});
        }, $scope.showErrorMessage);
};

And on my Kotlin controller, I receive each attribute as a separate param:

@RequestMapping(method = arrayOf(RequestMethod.POST))
fun insert(@RequestParam(value = "name", required = true) name: String,
           @RequestParam(value = "address", required = true) address: String,
           @RequestParam(value = "file", required = false) file: MultipartFile): InsertConfigCommand? {

    val command = InsertConfigCommand(
                   name = name,
                   address = address,
                   file = file)

    return service.save(command)
}

Angular: how to post a file to the server on form submit

2 Answers2