form.submit with file upload requires to download the server response

[sophicworks]

Hi, I'am not sure if it is a bug or I have just to set something to make this working.
I have form with fileupload and send data to the backend using form.submit which works fined on google chrome. the problem is when I try to test it in IE 9 it requires some unknown file to download first (which I found out the response from the server) and doesn't save/create or do what it supposed to do like closing the tab if save and close is clicked or displaying alert message if the data were successfully added/updated.



{
xtype: 'form',
bodyPadding: 10,
autoScroll: true,
monitorValid: true,
layout: 'absolute',

items: [
{
xtype: 'textfield',
width: 300,
fieldLabel: 'Movie Title',
name: 'movie_title',
allowBlank: false,
// vtype: 'alphanumspace',
labelPad: 3,
x: 20,
y: 10
},
{
xtype: 'textfield',
width: 300,
fieldLabel: 'Movie Short Name',
name: 'movie_short_name',
allowBlank: false,
//vtype: 'alphanumspace',
labelPad: 3,
x: 20,
y: 40
},
{
xtype: 'numberfield',
width: 300,
fieldLabel: 'Movie Runtime',
name: 'running_time',
step: 1,
allowBlank: false,
vtype: 'numeric',
emptyText: 'Runtime in Minutes',
minValue: 1,
labelPad: 3,
x: 20,
y: 80
},
{
xtype: 'filefield',
width: 330,
name: 'movie_image',
fieldLabel: 'Image Path',
allowBlank: false,
labelWidth: 50,
x: 380,
y: 10,
listeners: {
change: function(file,b) {
// console.log(file.getValue());
// var image_container = this.up().down('image');
// image_container.setSrc(file.getValue());
}
}
}
..... //more fields
],

dockedItems: [{
xtype: 'toolbar',
items: [
{ xtype: 'tbspacer', width: 5},
{
iconCls: 'add-16',
text: 'Save',
formBind: true,
handler: function(button){


var form = this.up('form').getForm();
var file = this.up('form').up();
var tab = this.up('form').up().up();
var store = Ext.getCmp(tab.myGridId).getStore();

if(form.isValid()){
form.submit({
url: '/movies',
// waitMsg: 'Processing data..',
success: function() {


Ext.Msg.alert('Operation was successful', 'Movie was Successfully added');
form.reset();
store.load();
},
failure:function(form,action)
{

response = Ext.JSON.decode(action.response.responseText);
Ext.Msg.alert(response.error_code, response.error_message);
form.reset();
store.load();
}
});
}
}
}
....//more code (save and close)
]//end of dockedItems's items
}],//end of dockedItems


}


WHAT is inside the unknown file (server response)

{"success":true,"error_code":"0","error_message":"Success","total":1,"data":{"created_at":"2012-10-31T11:37:48+08:00","created_by":1,"id":24,"image_path":"22","movie_casts":"1","movie_dimension":"2","movie_director":"1","movie_genre":"1","movie_producers":"1","movie_rating":"2","movie_short_name":"1","movie_stars":"1","movie_synopsis":"1","movie_title":"123","movie_writers":"1","release_date":"2012-10-31","running_time":1,"status":0,"updated_at":"2012-10-31T11:37:48+08:00","updated_by":1}}


Screen Shot of what IE wants me to download when creating/updating movies

39713

[James Goddard]

Make sure the content type is 'applicaition/json' on the form submit response. IE is looking at the content type to determine what to do with the file and since it doesn't know what it is (or thinks it is a format it cannot handle) it is trying to save the file instead.

If you look at the chrome console, you probably have a message that says something like "Response has type 'xxx' but interpreted as json".