Sample example : Multiple FileUpload using Spring Multipart / Ajax Call (Working/Tested in IE8,IE11 and Chrome )
Uploading File with the help of IFrame in browser(IE8) which does not support HTML5 and AJAX which support HTML5.
Issue Faced and Resolved :
1. IE8 showing download pop-up while uploading File
Fix : IE8 has issue with Input Type = File and JSON return type in response. If returning JSON then its asking to download.
In Controller added produces = "text/plain"
@RequestMapping(value = "/recipient/uploadEvent", method = RequestMethod.POST , produces="text/plain")
@ResponseBody
public String uploadFiles(
@ModelAttribute("Attachments") final Attachments attachments, @RequestParam("file") List<MultipartFile> files,
MultipartHttpServletRequest request , HttpServletRequest req,HttpServletResponse resp
) {
JSP File :
<form:form id="uploadFile" name="upload" action="uploadAction" autocomplete="off"
modelAttribute="uploadAttachments" method="post" enctype="multipart/form-data" style="margin-left: 10%">
<input name="file1" id="file1" type="file" onchange="validateUploadFile('#file1')"/>
<input name="file2" id="file2" type="file" onchange="validateUploadFile('#file2')"/>
<input name="file3" id="file3" type="file" onchange="validateUploadFile('#file3')" />
</form:form>
<div class="attach">
<button type="button" id="upload" disabled class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text ui-state-disabled">Attach Files</button>
</div>
Ajax Call (JavaScript):
// To Prevent Double Click on Attach files button
$('#upload').dblclick(function(e){
e.preventDefault();
});
$("#upload").click(function()
{
$('#upload').prop("disabled",true).addClass("ui-button-text ui-state-disabled ");
$('#edit').prop("disabled",true).addClass("ui-button-text ui-state-disabled ");
$("#uploadFile").submit();
});
function getDoc(frame) {
var doc = null;
// IE8 cascading access check
try {
if (frame.contentWindow) {
doc = frame.contentWindow.document;
}
} catch(err) {
}
if (doc) { // successful getting content
return doc;
}
try { // simply checking may throw in ie8 under ssl or mismatched protocol
doc = frame.contentDocument ? frame.contentDocument : frame.document;
} catch(err) {
// last attempt
doc = frame.document;
}
return doc;
}
// Form Submitted :
$("#uploadFile").submit(function(e)
{
var formObj = $(this);
var formURL = formObj.attr("action");
if(window.FormData !== undefined) // for HTML5 browsers
{
var formData = new FormData(this);
formData.append("file1", file1);
formData.append("file2", file2);
formData.append("file3", file3);
$.ajax({
url: formURL,
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR)
{
if(data == "invalidFileExtension"){
} else if(data == "invalidFileSize"){
} else if(data == "duplicateFiles"){
} else {
alert("Your file(s) have been successfully uploaded.");
}
},
error: function(jqXHR, textStatus, errorThrown)
{
alert("Due to some issue attached files could not be uploaded.");;
}
});
e.preventDefault();
e.unbind();
}
else //for olden browsers
{
//generate a random id
var iframeId = 'unique' + (new Date().getTime());
//create an empty iframe
var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
//hide it
iframe.hide();
//set form target to iframe
formObj.attr('target',iframeId);
//Add iframe to body
iframe.appendTo('body');
iframe.load(function(e)
{
var doc = getDoc(iframe[0]);
var docRoot = doc.body ? doc.body : doc.documentElement;
var data = docRoot.innerHTML;
if(data == "<PRE>invalidFileExtension</PRE>"){
} else if(data == "<PRE>invalidFileSize</PRE>"){
} else if(data == "<PRE>duplicateFiles</PRE>"){
} else {
alert("Your file(s) have been successfully uploaded.");
}
});
}
});
Spring Controller Code :
/**
* @param uploadFile is used to upload 3 multipleFile
* @param request
* @return
*/
@RequestMapping(value = "/recipient/uploadEvent", method = RequestMethod.POST , produces="text/plain")
@ResponseBody
public String uploadFile(
@ModelAttribute("Attachments") final Attachments attachments, @RequestParam("file") List<MultipartFile> files,
MultipartHttpServletRequest request , HttpServletRequest req,HttpServletResponse resp
) {
Logger logger = Logger.getLogger(this.getClass());
logger.info(" uploadFile() : " + request.getMultiFileMap());
List<String> rtnList = new ArrayList<String>();
rtnList.add("SUCCESS");
List<Attachments> list = new ArrayList<Attachments>();
logger.info("req parameter " + req.getParameterMap());
Map parameterMap = request.getParameterMap();
Set<Entry> parameterEntrySet = parameterMap.entrySet();
Iterator iterator = parameterEntrySet.iterator();
Entry<String, String> parameterEntry = null;
String paramaterName = null;
String paramaterValue = null;
while (iterator.hasNext()) {
parameterEntry = (Entry) iterator.next();
paramaterName = parameterEntry.getKey();
paramaterValue = request.getParameter(paramaterName);
logger.info("paramaterName :" + paramaterName + ", paramaterValue :" + paramaterValue);
}
if (request instanceof MultipartHttpServletRequest) {
List<String> errorList = validateUploadedFile(request);
if(null != errorList){
logger.info(" File Validation falied : " + errorList.get(0));
return errorList.get(0) ;
}
// process the uploaded file
for (Map.Entry<String, List<MultipartFile>> entry : request.getMultiFileMap().entrySet()){
MultipartFile mpf = entry.getValue().get(0);
if (null != mpf && mpf.getSize() > 0 && !"file".equalsIgnoreCase(entry.getKey())) {
// just temporary save file info into ufile
logger.info("uploadFile() : Length Size MB : " + (mpf.getBytes().length /(1024L*1024L))
+ " Size : " + mpf.getSize()
+ " ContentType : " + mpf.getContentType()
+ " OriginalFileName : "
+ mpf.getOriginalFilename());
}
}
resp.setContentType("text/plain");
return "SUCCESS"
No comments:
Post a Comment