form submit in internet explorer calls the failure callback function

[sameertj]

A form submit is used to upload a file(a restful webservice is called).
The file upload works fine in Chrome and the success callback function is invoked.

Howver in Internet Explorer 11, the failure function is called. The below is the JSON object that is returned.

{"message":"","success":true,"rowsInserted":1,"rowsDeleted":0,"rowsUpdated":0,"emailSent":0,"exception":null,"auditNumber":326}

Moreover after the failure function is called in Internet Explorer the browser gives an option to download the json file.

Below is the form.submit code.

form.submit({
                            url: AppConstants.baseUrl+'add-attached-file',
                            waitMsg: 'Uploading file...',
                            standardSubmit:false,
                            //contentType: "application/x-www-form-urlencoded;charset=utf-8",
                            //headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
                            success: function (form1, action, a, b, c) {
                                //console.log('success uploading file');
                                //msg('Success', 'Processed file "' + o.result.file + '" on the server');
                                if(form.attachedFilesStore)
                                {
                                    form.attachedFilesStore.reload(function(records, operation, success) {
                                        console.log('reload function:loaded attachment records');
                                        console.log(records);
                                    });
                                }
                                else {
                                    var auditNumber = Ext.decode(action.response.responseText).auditNumber;
                                    if(!form.auditNumber)
                                    {
                                        form.auditNumber = auditNumber;
                                        form.auditForm.getViewModel().set('auditMain.auditEntity.auditNumber',auditNumber);
                                    }
                                    var proxy = new Ext.data.proxy.Ajax({
                                        type: 'ajax',
                                        useDefaultXhrHeader: false,
                                        api: {
                                            read: AppConstants.baseUrl + 'get-attached-files?audit_number='+auditNumber
                                        },
                                        reader: {
                                            type: 'json',
                                        },
                                        writer: {
                                            type: 'json',
                                            allowSingle: false,
                                            writeAllFields: true,
                                            rootProperty: 'data'
                                        }
                                    });


                                    var attachedFilesStore = Ext.StoreManager.lookup('attachedFilesStore');
                                    if(!attachedFilesStore) {
                                        attachedFilesStore = Ext.create('JBApp.store.AttachedFiles');
                                    }
                                    //var attachedFilesStore = Ext.create('JBApp.store.AttachedFiles');
                                    attachedFilesStore.setProxy(proxy);
                                    attachedFilesStore.load(function(records, operation, success) {
                                            console.log('load function:loaded attachment records');
                                            console.log(records);
                                        }
                                    );
                                    form.attachedFilesStore = attachedFilesStore;
                                    var attachmentsGrid = form.lookupReference('attachmentsGrid');
                                    //var grid = attachmentsGrid.lookupReference('fileGrid');
                                    attachmentsGrid.setStore(attachedFilesStore);


                                    //var attachmentsGridInAuditForm = form.auditForm.lookupReference('attachmentsGrid');
                                    //var gridInAuditForm = attachmentsGridInAuditForm.lokupReference('fileGrid');
                                    //gridInAuditForm.setStore(attachedFilesStore);
                                    form.auditForm.up().up().query('grid')[1].setStore(attachedFilesStore);




                                    //attachedFilesStore.reload();




                                }
                                //attachedFilesStore.reload();
                                //Ext.getCmp('fileAttachGrid').getView().refresh();
                            },
                            failure: function (form1, action, a, b, c) {
                                alert("file upload failure");
                                //form1.attachedFilesStore.reload();
                                //Ext.getCmp('fileAttachGrid').getView().refresh();
                            }


                        });

[Gary Schlosberg]

So the failure function is called but the JSON object is for a success?

Regarding the file download, what content type are you using to send the data?

[dgotty]

Same exact thing is happening to me. This is a big pain for our team.

[machetico]

I am having the same problem with Ext 4.2.
Can you help?

A form submit is used to upload a file(a restful webservice is called).
The file upload works fine in Chrome and the success callback function is invoked.

Howver in Internet Explorer 11, the failure function is called. The below is the JSON object that is returned.

{"message":"","success":true,"rowsInserted":1,"rowsDeleted":0,"rowsUpdated":0,"emailSent":0,"exception":null,"auditNumber":326}

Moreover after the failure function is called in Internet Explorer the browser gives an option to download the json file.

Below is the form.submit code.

form.submit({
                            url: AppConstants.baseUrl+'add-attached-file',
                            waitMsg: 'Uploading file...',
                            standardSubmit:false,
                            //contentType: "application/x-www-form-urlencoded;charset=utf-8",
                            //headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
                            success: function (form1, action, a, b, c) {
                                //console.log('success uploading file');
                                //msg('Success', 'Processed file "' + o.result.file + '" on the server');
                                if(form.attachedFilesStore)
                                {
                                    form.attachedFilesStore.reload(function(records, operation, success) {
                                        console.log('reload function:loaded attachment records');
                                        console.log(records);
                                    });
                                }
                                else {
                                    var auditNumber = Ext.decode(action.response.responseText).auditNumber;
                                    if(!form.auditNumber)
                                    {
                                        form.auditNumber = auditNumber;
                                        form.auditForm.getViewModel().set('auditMain.auditEntity.auditNumber',auditNumber);
                                    }
                                    var proxy = new Ext.data.proxy.Ajax({
                                        type: 'ajax',
                                        useDefaultXhrHeader: false,
                                        api: {
                                            read: AppConstants.baseUrl + 'get-attached-files?audit_number='+auditNumber
                                        },
                                        reader: {
                                            type: 'json',
                                        },
                                        writer: {
                                            type: 'json',
                                            allowSingle: false,
                                            writeAllFields: true,
                                            rootProperty: 'data'
                                        }
                                    });


                                    var attachedFilesStore = Ext.StoreManager.lookup('attachedFilesStore');
                                    if(!attachedFilesStore) {
                                        attachedFilesStore = Ext.create('JBApp.store.AttachedFiles');
                                    }
                                    //var attachedFilesStore = Ext.create('JBApp.store.AttachedFiles');
                                    attachedFilesStore.setProxy(proxy);
                                    attachedFilesStore.load(function(records, operation, success) {
                                            console.log('load function:loaded attachment records');
                                            console.log(records);
                                        }
                                    );
                                    form.attachedFilesStore = attachedFilesStore;
                                    var attachmentsGrid = form.lookupReference('attachmentsGrid');
                                    //var grid = attachmentsGrid.lookupReference('fileGrid');
                                    attachmentsGrid.setStore(attachedFilesStore);


                                    //var attachmentsGridInAuditForm = form.auditForm.lookupReference('attachmentsGrid');
                                    //var gridInAuditForm = attachmentsGridInAuditForm.lokupReference('fileGrid');
                                    //gridInAuditForm.setStore(attachedFilesStore);
                                    form.auditForm.up().up().query('grid')[1].setStore(attachedFilesStore);




                                    //attachedFilesStore.reload();




                                }
                                //attachedFilesStore.reload();
                                //Ext.getCmp('fileAttachGrid').getView().refresh();
                            },
                            failure: function (form1, action, a, b, c) {
                                alert("file upload failure");
                                //form1.attachedFilesStore.reload();
                                //Ext.getCmp('fileAttachGrid').getView().refresh();
                            }


                        });

[dgotty]

@machetico it ended up being a problem in our back-end code. From what I can tell the Sencha code works fine but we are on version 6