PDA

View Full Version : File upload not calling success or failure ?



zz9pa
7 Jan 2013, 9:00 AM
I'm doing a file upload - which due to some server config is returning a 413 error "Request Entity Too Large
" [separate issue!] - but - the 'failure' callback isn't being called, in fact - nothing is..



form.submit({


url: '/Service1.svc/file-upload',
success: function (fp, o) {
Ext.Msg.alert('Success', 'Your file has been uploaded.');
},
failure: function (fp, o) {
Ext.Msg.alert('Failure', 'Your file did not upload correctly');
}
});


I've tracked it back and in :

Ext.define('Ext.form.action.Submit', {
extend:'Ext.form.action.Action',
alternateClassName: 'Ext.form.Action.Submit',
alias: 'formaction.submit',
type: 'submit',
...

onSuccess: function(response) {

The response is undefined - which is whats messing it up...


Is this a know issue ? Or am I doing something wrong ?

scottmartin
7 Jan 2013, 3:12 PM
What is your server responding with? Something like the following returns a response?



Ext.onReady(function() {

var form = Ext.create('Ext.form.Panel', {

defaults: {
anchor: '100%',
msgTarget: 'side',
labelWidth: 50
},

items: [{
xtype: 'filefield',
id: 'form-file',
fieldLabel: 'file',
name: 'photo-path',
buttonText: 'browse',

listeners: {
change: function(field,value,opts){


var fid = Ext.getCmp('form-file');
console.log(fid);

}
}
}],

buttons: [{
text: 'Save',
handler: function() {
form.getForm().submit({
url: 'response.php',
waitMsg: 'Uploading your file...',
//if is set, bug comes out
success: function(fp, o) {
//console.log('Sucessfully');
Ext.Msg.alert('Sucessfully', 'Sucessfully done');
},
failure: function(form, action) {
//console.log('fail');
Ext.Msg.alert('Failure', 'Upload failed');
}
});

}
}]
});
Ext.create('Ext.Window', {
title: 'Upload a file',
width: 400,
modal: true,
height: 200,
plain: true,
layout: 'fit',
items: [form]
}).show();
});


response.php


<?php

echo '{"success": "false","message": "broken"}';

?>


Scott.

zz9pa
7 Jan 2013, 11:40 PM
Thats exactly the point - the server is returning a 413 error and nothing else...
ie - its not returning the "packet" with a "success:true/false"

scottmartin
8 Jan 2013, 5:31 AM
To clarify, you see this behavior using my example?

Scott.

zz9pa
9 Jan 2013, 12:21 AM
I think (using your code) you can still get it to error - just change the url to something that doesn't exist - and you should be able to see it too... (you get a 404 instead of a 413 - but the effect is the same)

scottmartin
10 Jan 2013, 6:06 AM
Please see the following example:

Good explanation:
http://www.packtpub.com/article/loading-submitting-and-validating-forms-using-ext-js-4

>> A form with a file upload field is not submitted using an XMLHttpRequest object



Ext.onReady(function () {

var myform = Ext.create('Ext.form.Panel', {
url : 'your.php',
renderTo : Ext.getBody(),
frame : true,
title : 'Title',
width : 250,
items : [
{
xtype : 'textfield',
fieldLabel : 'Title',
name : 'title',
allowBlank : false
}
],
buttons : [
{
text : 'Save',
handler : function () {
myform.getForm().submit({
success : function (f, a) {
Ext.Msg.alert('Success', 'It worked');
},
failure : function (f, a) {
if (a.failureType === Ext.form.Action.CONNECT_FAILURE) {
Ext.Msg.alert('Failure', 'Server reported:' + a.response.status + ' ' + a.response.statusText);
}
if (a.failureType === Ext.form.Action.SERVER_INVALID) {
Ext.Msg.alert('Warning', a.result.errormsg);
}
}
});
}
},
{
text : 'Reset',
handler : function () {
myform.getForm().reset();
}
}
]
});

});


Scott.

zz9pa
10 Jan 2013, 7:07 AM
But - as I said - the failure() is not being called...

scottmartin
10 Jan 2013, 7:12 AM
Did you try the latest example:
http://jsfiddle.net/dQcva/

Enter any text into the textfield and click save.

Scott

zz9pa
10 Jan 2013, 7:33 AM
I must be missing something - theres no file upload in there...

With a normal form its working - but for a File Upload - if the URL doesn't exist -( or there is some other server error - as in my case) - i'm not getting either the success() or failure() functions run...


If you try this :

http://jsfiddle.net/dQcva/1/

(your previous example) - you can see if you select a file and upload it - you dont get either the success or failure called (because the URL for the submit doesnt exist)
it just keeps the "uploading your file" window there...

scottmartin
10 Jan 2013, 7:39 AM
Please read the article I provided for an explanation of using filefield
>>A form with a file upload field is not submitted using an XMLHttpRequest object

Start at: Uploading files to the server

Scott.

scottmartin
10 Jan 2013, 7:44 AM
Also .. there are also several upload widgets in the Extensions forum that may be of interest:
http://www.sencha.com/forum/forumdisplay.php?82-Ext-User-Extensions-and-Plugins

http://www.sencha.com/forum/showthread.php?243051
http://www.sencha.com/forum/showthread.php?205365
http://www.sencha.com/forum/showthread.php?206076

If you search, you will find others as well.

Scott.

zz9pa
10 Jan 2013, 8:07 AM
I dont think this is getting me very far - lets try again...


I can create a file upload in the form - if everything is ok - it works fine..
In my particular instance - if the file is too big - the server rejects it with a 413 error..
When the server rejects it - I get no notification.

In the webpage you've pointed me to - there is no recipe for handling when you get **no notification** of success OR failure.

Try it..


[ If you can hack my jsfiddle example (which is your code from above) - so that it displays one of the alerts - I'll be happy :) ]

The problem is - that neither of them get called at the minute :

success: function(fp, o) {
//console.log('Sucessfully');
Ext.Msg.alert('Sucessfully', 'Sucessfully done'); // --- Doesnt get called
},
failure: function(form, action) {
//console.log('fail');
Ext.Msg.alert('Failure', 'Upload failed'); // --- Doesnt get called either
}


So - I cant detect it and tell the user there's something wrong...

scottmartin
10 Jan 2013, 8:13 AM
Are you using xtype: 'filefield' ?? as explained, this will not trap those errors, hence the textfield example.

Scott.

zz9pa
10 Jan 2013, 8:29 AM
Yes - I'm using filefield - as in the example...

I'm missing the "as explained" bit though - where is it explained that it doesn't trap those errors ?

scottmartin
10 Jan 2013, 8:51 AM
The example works by defining an Ext.form.field.File ( xtype: 'filefield' ), which takes care of the styling and the button for selecting local files.

The form submission handler works the same way as any other form submission; however, behind the scenes the framework tweaks how the form is submitted to the server.

A form with a file upload field is not submitted using an XMLHttpRequest object—instead the framework creates and submits a temporary hidden <form> element whose target is referenced to a temporary hidden <iframe>. The request header's Content-Type is set to multipart/form. When the upload is finished and the server has responded, the temporary form and <iframe> are removed.

A fake XMLHttpRequest object is then created containing a responseText property (populated from the contents of the <iframe> ) to ensure that event handlers and callbacks work as if we were submitting the form using AJAX.

Scott

zz9pa
10 Jan 2013, 9:19 AM
And what part of that says it wont trigger a success or failure if the call fails ?
Especially given the last sentence :
"to ensure that event handlers and callbacks work as if we were submitting the form using AJAX. "

jamie.priest
1 Mar 2013, 7:37 AM
Right will qualify this with me being a newbie. But I'm also getting the issue when the server returns a 404. However the failure callback does not kick in, is this because the failure callback is only supposed to handle data errors that the server knows about? Do I need some other mechanism to handle an 404 error? Oh, the success call back does fire just fine though, it's the handling of the failure I'm really interested in

jamie.priest
1 Mar 2013, 11:02 AM
So I've delved around a little, I can cause the failure callback to work if the form does not have a filefield included as one of it's components. However I cannot seem to get the failure call back to fire on a 404 response when I submit a form with a file upload field. All I get is an error in the console. I've managed to recreate this by placing a filefield into the Fiddlejs example (http://jsfiddle.net/dQcva/) referenced on this thread. Is there a bug in EXT or am I doing something incorrect?

If I change the width of the of the form in your JSFiddle example to 550 and then replace your form field with the following config



xtype: 'filefield',
margin: 5,
width: 300,
inputId: 'myfield',
name: 'myfield',
fieldLabel: 'Filename'


It appears that it fails to fire the failure callback, I notice that the error returned depends on the version EXTJS you select on JSFiddle using 4.1.0 will give you the decode error I get locally (I'm using http://extjs.cachefly.net/ext-4.1.1-gpl/) if you choose 4.1.1 on JSFiddle then you get a 'a is undefined' error. Any ideas?

jamie.priest
13 Mar 2013, 1:43 AM
Okay just to confirm I that it does work with a downloaded version of 4.1.3. The failure callback fires on a 404. I guess there is some issue with the CDN version.

rupamkhaitan
18 Jul 2013, 6:34 AM
Request URL:
http://192.168.20.16/json.fcgi/uploadFile
Request Method:
POST
Status Code:
200 OK
Request Headersview source

Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding:
gzip,deflate,sdch
Accept-Language:
en-US,en;q=0.8
Cache-Control:
no-cache
Content-Length:
8925
Content-Type:
multipart/form-data; boundary=----WebKitFormBoundarylNy3nQkgj90NSJ7f
Cookie:
sid=TGC-PjdJYwdU8kBAvklfMUMeMAAAEcxnN5IGTlTwIPxcuYpS7NslNg==
Host:
192.168.20.16
Origin:
http://192.168.20.16
Pragma:
no-cache
Proxy-Connection:
keep-alive
Referer:
http://192.168.20.16
User-Agent:
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

Request Payload

------WebKitFormBoundarylNy3nQkgj90NSJ7fContent-Disposition: form-data; name="fileuploadfield-1953-inputEl"; filename="sample"Content-Type: application/octet-stream------WebKitFormBoundarylNy3nQkgj90NSJ7f--

Response Headersview source

Cache-Control:
no-cache, no-store
Connection:
Keep-Alive
Content-length:
29
Content-type:
text/html
Date:
Thu, 18 Jul 2013 17:30:06 GMT
Proxy-Connection:
Keep-Alive
Server:
lighttpd/1.4.29
X-Frame-Options:
SAMEORIGIN

I get response from server as status:true still it goes in failure function
{"status":true, "message":""}

sshukla480
5 Aug 2013, 1:53 AM
First of all if you trying to get failure in ext js form submit . change in server side..
if you through exception in form submit your server return must {"failure":"true", "message":"Your Message"}