I might sound strange with this question but I'm very new into those three technologies - Spring, Thymeleaf and Dropzone.
I am currently trying to get a html page resulting from a response from my Spring Controller + Thymeleaf with a request from a Dropzone file upload.
So my Controller receive the file from dropzone, reads it, apply some parsing and return the result as a html page, like a report. It works as expected if I use a simple form like the one available in Spring tutorial site.
But when I put Dropzone I simply can't get the result from this html page. I'll leave here my upload html (I've been trying to get the result and print into a div, without success):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My upload form with Dropzone</title>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<script>
Dropzone.options.myDropZone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 1,
paramName: "file",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
var submitButton = document.getElementById("btnStartUpload");
submitButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function(file, xhr, form) {
form.append("file", file);
});
this.on("success", function(file, response) {
console.log(response);
$(".result").html(response);
});
}
}
</script>
</head>
<body>
<div id="dropzone">
<form id="myDropZone" class="dropzone" th:action="@{/upload}" method="POST" enctype="multipart/form-data">
<div class="previews"></div>
<button id="btnStartUpload">Submit file!</button>
</form>
</div>
<div id="result" class="result"></div>
</body>
My Controller:
@PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public String uploadFile (@RequestParam("file") MultipartFile file, ModelMap model)
{
try
{
// parse file and insert a collection into attribute, to be used in the 'result' page.
model.addAttribute("fields", /*collection*/);
return "result";
}
catch (IOException e)
{
e.printStackTrace();
return "failed";
}
}
And then my result html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>My result page</title>
</head>
<body>
<table>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
</tr>
<th:block th:each="field : ${fields}">
<tr>
<td th:text="${field.name}"></td>
<td th:text="${field.value}"></td>
<td th:text="${field.description}"></td>
</tr>
</th:block>
</table>
</body>
</html>