Wednesday, 21 August 2013

Why IE is trying to download file, how to fix it?

Why IE is trying to download file, how to fix it?

I have a simple code for uploading an image file and showing it via hidden
iframe and json response from server. Its working fine in chrome and
firefox but not sure whats the problem with IE causing the file to
download and not showing the image. Its trying to download some
239917890.json file. On saving file I can see contents as
{"status":"success","id":2,"path":"enoem/manage_logos/show_logo/2","errorMsg":null}
java code
@ResponseBody
@RequestMapping(value = "/manage_logos/upload_logo/{Id}", method =
RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
public EnoemLogoJson uploadLogo(@PathVariable Integer Id,
@RequestParam("file") MultipartFile file,
Model model, HttpServletResponse response) throws IOException {
EnoemLogoJson enoemLogoJson = new EnoemLogoJson();
EnoemConfiguration enoemConfiguration =
enoemConfigurationRepository.findById(Id);
if (validateLogo(file)) {
enoemLogoJson.setErrorMsg("Error");
return enoemLogoJson;
}
LOGGER.info("File name is " + file.getOriginalFilename());
enoemConfiguration.setLogo(file.getBytes());
enoemConfigurationRepository.saveAndFlush(enoemConfiguration);
enoemLogoJson.setStatus("success");
enoemLogoJson.setId(Id);
enoemLogoJson.setPath("enoem/manage_logos/show_logo/" + Id);
return enoemLogoJson;
}
html code
<form id="file_upload_form" method="post" enctype="multipart/form-data"
action="enoem/manage_logos/upload_logo/1">
<div class="row">
<input name="file" id="file" size="27" type="file">
</div>
<div class="btn-row">
<input type="submit" name="action" class="cButton
upload-logo-btn" value="Upload">
<input id="close-upload-popup" type="button" value="Cancel"
class="cButton cancel-btn-table">
</div>
<iframe id="upload_target" name="upload_target" src=""
style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
javascript
var $form = $('#file_upload_form');
$form.unbind('submit');
$form.bind('submit', function(a,b,c){
this.target = 'upload_target';
alert('Firing in all browsers');
$('#upload_target').load(function(d,e,f){
alert('When file uploaded'); //Not firing in IE but IE is
trying to download some data
var data = $('#upload_target').contents().find('pre').html();
data = $.parseJSON(data);
if(data){
//Here doing showing information from data object
//working fine in chrome/firefox but not in IE
}
});
});
Problem is on IE9 and IE10. (IE8 not tested)

No comments:

Post a Comment