Uploading and downloading files using Ajax in Spring Boot (without JQuery)
Two things to make
- Upload the image with Ajax, store it on the server and display it
- Select the image to display and press the image display button to download with Ajax and display the image
Demo screen
1. File upload
--Screen side
imageajax.html (part)
<body>
<h3>file upload</h3>
<form id="imageFormId">
<input type="file" name="inputFileName" />
<button type="button" onclick="uploadImage('imageFormId', 'myUploadedImageId')">Image upload</button>
</form>
<img id="myUploadedImageId" style="width: 400px">
<script>
function uploadImage(imgForm, imgCtrl) {
const formData = new FormData(document.getElementById(imgForm));
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const img = document.getElementById(imgCtrl);
const url = window.URL || window.webkitURL;
//Display the response as an image
img.src = url.createObjectURL(this.response);
}
}
request.open("POST", "/uploadimage");
request.responseType = 'blob';
request.send(formData);
}
</script>
</body>
--Controller side
ImageAjaxController (part)
/**
*file upload
*/
@PostMapping("/uploadimage")
public ResponseEntity<byte[]> uploadImage(@RequestParam("inputFileName") final MultipartFile uploadFile) {
if (uploadFile.isEmpty()) {
return ResponseEntity.of(Optional.empty());
}
//Get Path to store uploaded files
final Path path = Paths.get("c:/uploaddir", uploadFile.getOriginalFilename());
final byte[] bytes;
try {
//Get the binary of the uploaded file
bytes = uploadFile.getBytes();
//File storage
Files.write(path, bytes);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}
--The maximum file size to upload is 1MB, so to upload a larger size, set as follows.
application.yml
spring:
servlet:
multipart:
max-file-size: 30MB
max-request-size: 30MB
2. File selection
--Screen side
imageajax.html (part)
<body>
<h3>File selection</h3>
<select id="selectImageId">
<option value="a">a</option>
<option value="b">b</option>
</select>
<button type="button" onclick="displayImage('selectImageId', 'mySelectedImageId')">Image display</button>
<img id="mySelectedImageId" style="width: 400px">
<script>
function displayImage(selectCtrl, imgCtrl) {
const select = document.getElementById(selectCtrl);
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const img = document.getElementById(imgCtrl);
const url = window.URL || window.webkitURL;
//Display the response as an image
img.src = url.createObjectURL(this.response);
}
}
//Send choices and get files
request.open("GET", "/selectimage/" + select.value);
request.responseType = 'blob';
request.send();
}
</script>
</body>
--Controller side
ImageAjaxController (part)
/**
*File selection
*/
@GetMapping("/selectimage/{selectNum}")
public ResponseEntity<byte[]> getImage(@PathVariable final String selectNum) {
//Get file name from choices
final String fileName;
switch (selectNum) {
case "a":
fileName = "a.jpg ";
break;
case "b":
fileName = "b.jpg ";
break;
default:
return ResponseEntity.of(Optional.empty());
}
//File Path
final Path path = Paths.get("c:/selectdir", fileName);
final byte[] bytes;
try {
//Read the file
bytes = Files.readAllBytes(path);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}
Recommended Posts