jeudi 9 avril 2015

How to use spring validation for ajax request?

Now I have following controller methods:



@ModelAttribute("multipartFileWrapper")
public MultipartFileWrapper createEmployeeModel() {
return new MultipartFileWrapper();
}

public ResponseEntity<String> handleFileUpload(@Validated MultipartFileWrapper file, BindingResult result, Principal principal, HttpSession session) {
ResponseEntity<String> responseEntity;

if (result.hasErrors()) {
....


and following bean wrapper for validation:



@Component
public class MultipartFileWrapper {
@Extensions(imageFormats = {".jpg",".png",".gif",".bmp"}, videoFormats = {".mp4"})
MultipartFile multipartFile;

public MultipartFile getMultipartFile() {
return multipartFile;
}

public void setMultipartFile(MultipartFile multipartFile) {
this.multipartFile = multipartFile;
}
}


Extensions annotation declaration:



@Documented
@Retention(RUNTIME)
@Constraint(validatedBy = {ExtensionValidator.class})
@Target({ METHOD, FIELD, ANNOTATION_TYPE, CONSTRUCTOR, PARAMETER })
public @interface Extensions {

String message() default "file format is not acceptable";

Class<?>[] groups() default {};

Class<? extends Payload>[] payload() default {};

/**
* Specify accepted content types.
*
* @return accepted extensions
*/
String[] imageFormats();
String[] videoFormats();
}


and validator:



public class ExtensionValidator implements ConstraintValidator<Extensions, MultipartFile> {

private String[] acceptedExtensions;

@Override
public void initialize(Extensions extensions) {
//logic
}

@Override
public boolean isValid(MultipartFile value, ConstraintValidatorContext context) {
//logic
}
}


and following jsp:



<form:form method="POST" action="uploadImage" enctype="multipart/form-data" id="imageUploadForm" commandName="multipartFileWrapper" >
....
</form:form>


Now I need to validate file which send using ajax.


ajax call:



$(".file").on("change", function() {
var data = $(this).attr('data');
if (typeof data !== 'undefined' && data !== false) {
var image=this.files[0];
var terminalId=data.replace("file", "");
var postData = new FormData();
postData.append('image',image);
postData.append('terminalId',terminalId);

$("div[data='errors"+terminalId+"']").hide();
$.ajax({
url: "<c:url value='/owner/terminals/uploadImage'/>",
type: 'POST',
dataType: 'json',
processData: false,
contentType: false,
data: postData
})
.success(function(data) {
$("div[data='images"+terminalId+"']").prepend ('<div class="photo"> ' +
'<a class="fancy_image" href="<c:url value="/owner/createCompany/getOriginalImage/"/>'+data+'"><img src="<c:url value="/owner/createCompany/getSmallThumbnail/"/>'+data+'" alt=""/></a>'+'<div class="close-image" data="'+data+'"></div></div>');
$("li#terminal"+terminalId).find("img").attr("src","<c:url value='/owner/createCompany/getSmallThumbnail/'/>"+data);
$("li#terminal"+terminalId + " .fancy_image").attr("href", $("li#terminal"+terminalId + " .fancy_image").attr("href")+data);
})
.fail(function() {
$("div[data='errors"+terminalId+"']").show();
});


}

});


How can I make it? Is it possible to reuse my current code?


Aucun commentaire:

Enregistrer un commentaire