Thank you for reporting this bug. We will make it our priority to review this report.
-
Sencha User
ExtJS 6.5 Multipart Fileupload Form Submit always executes SUCCESS=TRUE
Hi
I have a form that sends text and file to the server. Server returns TRUE or FALSE depends on the checking.
I forced an error on the server to check if my javascript code can handle the {success:false} response properly.
Weirdly it does not but always executes the TRUE code.
Screenshot below are the response from server and the console.log data from the SUCCESS code.
Form Submit Form Code Below:
PHP Code:
if( form.validate() ){
showLoadMask( window );
form.submit({
success: function(form, action) {
console.log( action );
hideLoadMask(window);
if ( action.success === true ) {
console.log("1----");
return;
window.destroy();
} else {
console.log("2----");
Ext.Msg.show({
title: 'Error!',
message: action.reason,
width: 400,
buttons: [{
text: 'Ok',
style:'margin-right:10px;',
handler: function() {
Ext.Msg.hide();
}
}]
});
}
},
failure: function(form, response) {
console.log( response );
hideLoadMask(window);
if ( response.success === false ) {
Ext.Msg.show({
title: 'Error!',
message: response.reason,
width: 400,
buttons: [{
text: 'Ok',
style:'margin-right:10px;',
handler: function() {
Ext.Msg.hide();
}
}]
});
}
}
});
}
01.jpg02.jpg
Thanks
-
Your server returned some html tags around your JSON text?
-
Originally Posted by
richardvd
Your server returned some html tags around your JSON text?
The response will be HTML for file uploads and therefore there is code to get the actual JSON. This JSON can be within a <pre>, <textarea> or the <body>. Here is a fiddle and a commented override (uncomment to get the debugger hit) to hook into the method that finds the response:
This is also in the core so modern also just has this ability:
-
Sencha User
@richardvd,
The html tags is there for testing cuz I have experience with Extjs 4 and it requires to have the html tags to be part of the response. The screenshot I posted was with tags. I also tested it without tags, same behavior.
@mitchellsimoens
Is this working as intended? or do I to change something?
thanks!
-
My fiddles are working as intended with the response within the html tags
-
Sencha User
hi mitchellsimoens ,
I still cant get it to work.. this is my code below....
PHP Code:
function addStock() {
var window = undefined;
var form = Ext.create('Ext.form.Panel', {
border: false,
url: '/add',
method: 'POST',
scrollable: false,
autoSize: true,
bbar: {
items: [{
text: '<b>Submit</b>',
id: 'submitId',
handler: function() {
if( form.validate() ){
form.submit({
params: { 'token': "test Token" },
success: function(form, action) {
if ( action.response !== undefined && action.response === true ) {
console.log("1----");
window.destroy();
} else {
console.log("2----");
Ext.Msg.show({
title: 'Error!',
message: action.reason,
width: 400,
buttons: [{
text: 'Ok',
style:'margin-right:10px;',
handler: function() {
Ext.Msg.hide();
}
}]
});
}
},
failure: function(form, response) {
if ( response.success === false ) {
Ext.Msg.show({
title: 'Error!',
message: response.reason,
width: 400,
buttons: [{
text: 'Ok',
style:'margin-right:10px;',
handler: function() {
Ext.Msg.hide();
}
}]
});
}
}
});
}
}
}]
},
items: [{
padding: 20,
defaults: {
xtype: 'textfield'
},
items: [{
xtype: 'numberfield',
label: '<b>Quantity</b>',
name: 'qty',
margin: '0 5 0 0',
allowBlank: false
}, {
xtype: 'filefield',
label: 'Item Photo',
name: 'pic',
flex: 1
}]
}]
});
window = Ext.create( {
xtype: 'dialog',
closable: true,
draggable: false,
iconCls: 'x-fa fa-plus',
padding: 10,
modal: true,
resizable: false,
layout: 'fit',
items: form,
width: 500,
height: 550,
title: "New"
});
window.show();
}
-
What debugging have you done? See the override to hook into the function that handles the response parsing? Use that to debug some.
-
Sencha User
@mitchellsimoens
Here's the debug logs...
001.jpg
002.jpg
003.jpg
-
You could step through the framework code with your Javascript debugger to find out exactly why and where it takes the wrong code path as you say it does. That will probably give you the clue you are looking for.
In his fiddles he supplied an override that you have uncomment to enable. You will then have a breakpoint to where the interesting parts are. You can also use that override in your code to do the same.
But you may want to play with it first in the fiddles since those are already working as intended.
Code:
Ext.define(null,
{ override: 'Ext.data.request.Form',
// if you wanna step thru the code that works with the html response
// here is the method that handles the response
onComplete: function () {
debugger;
this.callParent(arguments)
}
})
-
Sencha User
Changed extjs source code to debug.
Found out that my logging gets executed before the code that was provided by mitchellsimoens
Image attached
111.jpg
