I am using javascript to make a form that uploads an image and this is the only redirect that doesn't work in the application, I haven't found a better way to upload the image and I want to store it in a database. I need that redirect to work.
Here it is the html code (I'm not using the object publication from thymeleaf):
<form id="singleUploadForm" name="singleUploadForm" class="form-horizontal" th:object="${publication}">
...
<div class="form-group">
<label class="control-label col-sm-2" for="text"
th:text="#{publication.image}">Imagen (opcional):</label>
<div class="col-sm-10">
<input id="singleFileUploadInput" type="file" class="form-control" name="image"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" th:text="#{send}">Enviar</button>
</div>
</div>
</form>
And here it is my Javascript code:
'use strict';
var singleUploadForm = document.querySelector('#singleUploadForm');
var singleFileUploadInput = document.querySelector('#singleFileUploadInput');
var titleInput = document.querySelector('#titleInput');
var textInput = document.querySelector('#textInput');
function uploadSingleFile(file, text, title) {
var formData = new FormData();
formData.append("file", file);
formData.append("text", text);
formData.append("title", title);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/uploadFile");
xhr.onload = function() {
//console.log(xhr.responseText);
}
xhr.send(formData);
console.log("DONE1");
}
singleUploadForm.addEventListener('submit', function(event){
var files = singleFileUploadInput.files;
var text = textInput.value;
var title = titleInput.value;
if(files.length === 0) {
uploadSingleFile(null, text, title);
}
else {
uploadSingleFile(files[0], text, title);
//event.preventDefault();
console.log("DONE2");
}
console.log("DONE3");
}, true);
Also the controller:
@RequestMapping(value = "/uploadFile")
public String uploadFile(Principal principal, @RequestParam(value = "file", required=false) MultipartFile image,
@RequestParam("text") String text, @RequestParam("title") String title) {
Publication publication = new Publication();
if (image != null) {
DBFile dbFile = storageService.storeFile(image);
publication.setImage(dbFile);
}
User user = usersService.getUserByEmail(principal.getName());
publication.setUser(user);
publication.setDate(new Date());
publication.setText(text);
publication.setTitle(title);
publicationsService.addPublication(publication);
return "redirect:/publication/list";
}
If there is any way to add the image to de th:object="{$publication}" I think it would solve the problem, but when I tried that, I always received a null file. If I use a String to save the image, I recieve the name correctly but I couldn't obtain the data in any form.
What you are expecting is not correct actually.
For the Ajax call, return json response from the controller and based on the response returned by controller you can redirect to specific url in your javascript code. Refer how to redirect Ajax spring
window.location.href = 'http://www.google.com'; //Will take you to Google.