PDA

View Full Version : form.submit with file upload requires to download the server response



sophicworks
30 Oct 2012, 8:55 PM
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
31 Oct 2012, 4:36 AM
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".

kbcarle
18 Jan 2014, 2:17 PM
The server needs to return Content-Type: 'text/plain'. For some reason IE9 has a problem with a form submit returning 'application/json'. Alternatively, it looks like people have had some success with putting a file extension in the upload URL like upload.html?param=123. Setting the accept header from Extjs doesn't seem to work.