Ext Js Filefield issue in Internet Explorer8 and 9 - spring-mvc

Question

I have a file field in my form.
when i submit form through controller ,IE is showing the security bar saying that I'm trying to download a file to the computer, which is exactly reverse of what I'm doing ( I'm uploading a file).
And everything works great when I submit the form to the server using FF. But a problem occurs with IE8 and Ie 9.
Controller action:
var myForm = Ext.getCmp('uploaddraftpcpPanel').getForm(); // get the basic form
if (myForm.isValid()) { // make sure the form contains valid data before submitting
myForm.submit({
headers: {
enctype: 'multipart/form-data; charset=UTF-8'
},
url: 'upload/uploaddraftpcp.action',
success: function (myForm, action) {
Ext.Msg.alert('success', "success");
},
failure: function (myForm, action) {
Ext.Msg.alert('Failed', "failed");
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Please correct form errors.');
}
Server side code looks like this:
#RequestMapping(value = "/upload/uploaddraftpcp.action", method = RequestMethod.POST)
public #ResponseBody
Map<String, ? extends Object> uploadDraftpcp(HttpServletRequest request){
Map<String, Object> modelMap = new HashMap<String, Object>(2);
try {
System.out.println("title pcp" + request.getParameter("title"));
System.out.println("description pcp"
+ request.getParameter("description"));
// response.setContentType("text/html");
modelMap.put("message", "Successfully submitted Form");
modelMap.put("success", true);
return modelMap;
} catch (Exception e) {
System.out.println(e.toString());
e.printStackTrace();
return ExtJSReturn
.mapError("Error retrieving data.");
}
}

Answer 1

In Ext JS, file uploads are not performed using normal 'Ajax' techniques, that is they are not performed using XMLHttpRequests. Instead a hidden element containing all the fields is created temporarily and submitted with its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered.
The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to text/html in order to tell the browser to insert the text unchanged into the document body.
Chrome, FF, IE10 and up do just when when they see Content-Type = application/json in the response header. However when you do that to IE8 and IE9, when the server reponds from the file upload, you see a message saying something along the lines of: "Do you want to open or save this document"?
So, to fix that in IE8 and IE9, just set Content-Type to text/html and you're fine. The modern browsers responds just the same, so you're not breaking anything there with that solution.