Code Samples: kendo upload

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);
    }
}

And this is our frontend code.

<!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.

Code Samples

Friday, February 12, 2021

Kendo Upload With Spring Boot Example

Labels