EN
Spring Boot 3 - optimal way to send JSON data with binary files in request
6 points
In this article, we would like to show how to optimal way to make POST request with JSON data and binary files in Spring Boot 3.
The JSON format does not allow direct transmission of binary files.
There are available solutions:
- quite optimal: encode binary files using Base94 (as improvement to Base64) and send them inside JSONs,
- super optimal: use
multipart/form-dataasContent-Typeand send JSON and binary files inside parts.
The article presents multipart/form-data approach.
In the project JSON part has name json and names of file parts use file-* pattern.
src/main/resources/application.properties file:
xxxxxxxxxx1
spring.application.name=demo2
3
spring.servlet.multipart.max-file-size=10MB4
spring.servlet.multipart.max-request-size=10MB
src/main/resources/static/index.html file:
xxxxxxxxxx1
2
<html>3
<body>4
<script>5
6
const ENCODER = new TextEncoder(); // it uses UTF-87
8
// Source: https://dirask.com/snippets/JavaScript-convert-object-to-Blob-application-json-charset-UTF-8-DZNVXD9
//10
const createBlob = (object) => {11
const json = JSON.stringify(object);12
const parts = [13
ENCODER.encode(json)14
];15
const options = {16
type: 'application/json;charset=UTF-8'17
};18
return new Blob(parts, options);19
};20
21
const sendPost = async (url, data) => {22
const response = await fetch(url, {23
method: 'POST',24
body: data25
});26
return await response.json();27
};28
29
const handleSubmit = async (event) => {30
const elements = event.elements;31
const jsonData = {32
property1: 'value-1',33
property2: 'value-2',34
property3: 'value-3',35
// Put more properties here ...36
};37
const file1Element = elements.namedItem('file-1'); // <input type="file" name="file-1" />38
const file2Element = elements.namedItem('file-2'); // <input type="file" name="file-2" />39
const file3Element = elements.namedItem('file-3'); // <input type="file" name="file-3" />40
// Put more files here ...41
const formData = new FormData();42
formData.append('json', createBlob(jsonData));43
formData.append('file-1', file1Element.files[0]);44
formData.append('file-2', file2Element.files[0]);45
formData.append('file-3', file3Element.files[0]);46
// Put more files here ...47
return await sendPost('/api/backend', formData);48
};49
50
</script>51
<form action="javascript: void 0;" onsubmit="handleSubmit(this)">52
File 1: <input type="file" name="file-1" /><br />53
File 2: <input type="file" name="file-2" /><br />54
File 3: <input type="file" name="file-3" /><br />55
<!-- Put more files here ... -->56
<button type="submit">Send</button>57
</form>58
</body>59
</html>Hint: to distinguish what file is related with what part in JSON data, we can put file names inside JSON data.
src/main/java/com/example/demo/UploadController.java file:
xxxxxxxxxx1
package com.example.demo;2
3
import org.springframework.http.MediaType;4
import org.springframework.stereotype.Controller;5
import org.springframework.web.bind.annotation.PostMapping;6
import org.springframework.web.bind.annotation.RequestPart;7
import org.springframework.web.bind.annotation.ResponseBody;8
import org.springframework.web.multipart.MultipartFile;9
10
import com.example.demo.requests.JsonRequest;11
import com.example.demo.responses.UploadResponse;12
13
14
public class UploadController {15
16
(17
value = "/api/backend",18
consumes = MediaType.MULTIPART_FORM_DATA_VALUE,19
produces = MediaType.APPLICATION_JSON_VALUE20
)21
22
public UploadResponse handleForm(23
("json") JsonRequest jsonRequest,24
("file-1") MultipartFile requestFile1,25
("file-2") MultipartFile requestFile2,26
("file-3") MultipartFile requestFile327
// Put more files here ...28
) {29
// ...30
31
return new UploadResponse(true);32
}33
}
src/main/java/com/example/demo/DemoApplication.java file:
xxxxxxxxxx1
package com.example.demo;2
3
import org.springframework.boot.SpringApplication;4
import org.springframework.boot.autoconfigure.SpringBootApplication;5
6
7
public class DemoApplication {8
9
public static void main(String[] args) {10
SpringApplication.run(DemoApplication.class, args);11
}12
}
src/main/java/com/example/demo/requests/JsonRequest.java file:
xxxxxxxxxx1
package com.example.demo.requests;2
3
import lombok.Getter;4
import lombok.Setter;5
import lombok.NoArgsConstructor;6
import lombok.AllArgsConstructor;7
8
9
10
11
12
public class JsonRequest {13
String property1;14
String property2;15
String property3;16
// Put more properties here ...17
}
src/main/java/com/example/demo/responses/UploadResponse.java file:
xxxxxxxxxx1
package com.example.demo.responses;2
3
import lombok.Getter;4
import lombok.Setter;5
import lombok.NoArgsConstructor;6
import lombok.AllArgsConstructor;7
8
9
10
11
12
public class UploadResponse {13
boolean result;14
}
pom.xml file:
xxxxxxxxxx1
2
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">3
4
<modelVersion>4.0.0</modelVersion>5
6
<parent>7
<groupId>org.springframework.boot</groupId>8
<artifactId>spring-boot-starter-parent</artifactId>9
<version>3.3.4</version>10
<relativePath/>11
</parent>12
13
<groupId>com.example</groupId>14
<artifactId>demo</artifactId>15
<version>0.0.1-SNAPSHOT</version>16
<name>demo</name>17
<description>Spring Boot - demo project</description>18
19
<properties>20
<java.version>17</java.version>21
</properties>22
23
<dependencies>24
<dependency>25
<groupId>org.springframework.boot</groupId>26
<artifactId>spring-boot-starter-web</artifactId>27
</dependency>28
<dependency>29
<groupId>org.projectlombok</groupId>30
<artifactId>lombok</artifactId>31
<optional>true</optional>32
</dependency>33
<dependency>34
<groupId>org.springframework.boot</groupId>35
<artifactId>spring-boot-starter-test</artifactId>36
<scope>test</scope>37
</dependency>38
</dependencies>39
40
<build>41
<plugins>42
<plugin>43
<groupId>org.springframework.boot</groupId>44
<artifactId>spring-boot-maven-plugin</artifactId>45
<configuration>46
<excludes>47
<exclude>48
<groupId>org.projectlombok</groupId>49
<artifactId>lombok</artifactId>50
</exclude>51
</excludes>52
</configuration>53
</plugin>54
</plugins>55
</build>56
57
</project>
Run the application and open http://localhost:8080 to see the effect.
