This article is an example of the Kendo Upload Component with a Spring Boot backend. The framework used is the Kendo UI for jQuery. In this example, we are tasked to create a file upload operation. Another requirement is that the process must not automatically upload when a file is dropped or is chosen.
The IDE used is Spring Tool Suite 4 and it is expected that the reader knows a thing or two about Spring Boot. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.
Off to our solution. This is the controller that will handle the upload.
package com.blogspot.jpllosa.controller;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
@Controller
public class FileUploadController {
@GetMapping("/")
public String index() {
return "upload";
}
@PostMapping("/")
public ResponseEntity<String> handleFileUpload(
@RequestParam("files") MultipartFile[] files) {
for (MultipartFile file : files) {
System.out.println(file.getOriginalFilename()
+ " "
+ file.getSize()
+ " bytes");
}
// empty string means success
return new ResponseEntity<>("",
HttpStatus.OK);
}
} <!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Kendo Upload with Spring Boot</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<div>
<input name="files" id="files" type="file" />
</div>
<script>
$(document).ready(function() {
$("#files").kendoUpload({
async: {
saveUrl: "/",
autoUpload: false,
},
upload: function(e) {
console.time("Upload process");
},
complete: function(e) {
console.timeEnd("Upload process");
},
success: function(e) {
var xhr = e.XMLHttpRequest;
console.group("Upload done");
console.log(xhr.status);
console.groupEnd();
},
error: function(e) {
var xhr = e.XMLHttpRequest;
console.group("Upload error");
console.log(xhr.status);
console.groupEnd();
},
});
});
</script>
</body>
</html>
The complete project can be cloned from github.com/jpllosa/spring-boot-kendo-upload.
Select or drag and drop some files and you should see something like this.
 |
| Kendo Upload with Spring Boot |
Upon invoking the upload, the backend will log to console. It should look something like this.
.gitignore 395 bytes
README.md 148 bytes
The frontend will also log to console like so.
Web Console
There you have it. A quick and simple example of how to use the Kendo Upload with Spring Boot.
No comments:
Post a Comment