PDA

View Full Version : fileupload help



mclovin
12 Oct 2009, 12:56 PM
I am trying to perform a simple file upload with an Ext form. I have a working example with a straight html form:



<form name="myForm" method="post" enctype="multipart/form-data">
<input type="hidden" name="event" value="uploadFile" />
<input type="file" name="payrollFile" id="payrollFile" />
<input type="submit" value="Upload" />
</form>


All I am trying to do is perform that same task using an Ext FormPanel. I haven't found any examples in the forums that seem to work. It appears as though the I'm having an issue with the enctype:


Message Invalid content type: application/x-www-form-urlencoded; charset=UTF-8.
Detail The cffile action="upload" requires forms to use enctype="multipart/form-data".


Here is the snippet of my Ext code that fails:


var importFilePanel = new Ext.FormPanel({
fileUpload: true,
method: 'POST',
standardSubmit : false,
width: 100,
frame: true,
title: 'File Upload Form',
enctype:'multipart/form-data',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
id: 'file',
inputType: 'file',
name: 'file',
buttonText: 'Browse'
}]

sunco
12 Oct 2009, 1:00 PM
This sample does not work ? http://www.extjs.com/deploy/ext-3.0.0/examples/form/file-upload.html

Appear to works fine here

mclovin
12 Oct 2009, 1:28 PM
This sample does not work ? http://www.extjs.com/deploy/ext-3.0.0/examples/form/file-upload.html

Appear to works fine here

No, this example definitely does not work for me. I keep getting the same error:



Message Invalid content type: ''.
Detail The cffile action="upload" requires forms to use enctype="multipart/form-data".

VinylFox
12 Oct 2009, 1:39 PM
Any particular reason your specifying these three configs?


method: 'POST',
standardSubmit : false,
enctype:'multipart/form-data',

Try removing them and see what happens.

mclovin
12 Oct 2009, 1:50 PM
Any particular reason your specifying these three configs?


method: 'POST',
standardSubmit : false,
enctype:'multipart/form-data',

Try removing them and see what happens.

I removed those three lines and got the same result

VinylFox
12 Oct 2009, 3:26 PM
Ok, so do some debugging. I assume you have firebug installed. Enable it and try this:

Submit your form that contains the file field. After that, the net tab should show a new line of activity. If you expand that new line and look at the 'post' tab for that line, it should start out like this:


Content-Type: multipart/form-data;

Does it?

mclovin
13 Oct 2009, 8:40 AM
It looks like the request is not getting submitted as a POST, but a GET. Here are the Firebug details for the header:



Response Headers
Date Tue, 13 Oct 2009 16:36:52 GMT
Server Apache/2.2.6 (Win32) JRun/4.0
Keep-Alive timeout=5, max=99
Connection Keep-Alive
Transfer-Encoding chunked
Content-Type text/html; charset=UTF-8

Request Headers
Host local-aanet.amkor.com
User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 300
Connection keep-alive
X-Requested-With XMLHttpRequest
Referer http://myserver.com/app/index.cfm?event=logout
Cookie CFID=4390269; CFTOKEN=45282270; __utma=245638932.65770975.1254431609.1254431609.1254431609.1; __utmz=245638932.1254431609.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); CFADMIN_LASTPAGE_ADMIN=%2FCFIDE%2FAdministrator%2Fsettings%2Fcaching%2Ecfm; ys-example=o%3Acolumns%3Da%253Ao%25253Aid%25253Dn%2525253A1%25255Ewidth%25253Ds%2525253A75px%255Eo%25253Aid%25253Dn%2525253A2%25255Ewidth%25253Ds%2525253A200px%255Eo%25253Aid%25253Dn%2525253A3%25255Ewidth%25253Ds%2525253A150px%255Eo%25253Aid%25253Dn%2525253A4%25255Ewidth%25253Ds%2525253A75px%255Eo%25253Aid%25253Dn%2525253A5%25255Ewidth%25253Ds%2525253A125px%5Esort%3Do%253Afield%253Ds%25253Aholidayyear%255Edirection%253Ds%25253AASC%5Efilters%3Do%253Adayofweek%253Ds%25253AThursday

VinylFox
13 Oct 2009, 9:45 AM
I just noticed that your not using the fileupload field UX in your form.


xtype: 'fileuploadfield'

You will need to include the UX as well.

http://www.extjs.com/deploy/ext-3.0.0/examples/ux/fileuploadfield/FileUploadField.js

mclovin
13 Oct 2009, 1:14 PM
I have stripped most everything out to it's most basic config settings to make things simpler. I've identified two attributes that are causing the problems:

fileUpload: true
xtype: 'fileuploadfield'

Here is the FormPanel with inline comments to illustrate the problem:

var importFilePanel = new Ext.FormPanel({
// the following line causes the Firebug error: 'missing ) in parenthetical'.
// <pre>Content disposition corrupt: Conten...Content-Disposition: form-data; name=""\n
fileUpload: true,
items: [{
// if I change the xtype to textfield AND remove the fileUpload attribute, the POST works.
xtype: 'fileuploadfield',
id: 'myfile',
name: 'myfile'
}],
buttons: [{
text: 'Save',
handler: function(){
if(importFilePanel.getForm().isValid()){
importFilePanel.getForm().submit({
url: 'index.cfm?event=foobar',
success: function(importFilePanel, o){
alert('successful!');
}
});
}
}
}]
});

Any idea what I am doing wrong?

mclovin
13 Oct 2009, 3:27 PM
UPDATE: I found an earlier post that precisely describes the issue that I am having:

http://www.extjs.com/forum/showthread.php?t=78643&highlight=fileUpload%3A+true+Content-Disposition%3A+form-data

I dig some more debugging in Firebug, and I noticed in the Net tab there is a valid post:
Content-Disposition: form-data; name="myfile"; filename="PTO-Balances.txt"
Content-Type: text/plain

but then it is follow up by an undefined post:
Content-Disposition: form-data; name=""

undefined

I believe this is causing the failure. From the other post I referenced, it appears this may be a bug. But we have EXT 3.0.0 installed which is the most recent public release as far as I can see

VinylFox
13 Oct 2009, 3:57 PM
Good find. I think you might be right.

Try this override, and let me know if it works.


Ext.override(Ext.Editor, {
onRender : function(ct, position){
this.el = new Ext.Layer({
shadow: this.shadow,
cls: "x-editor",
parentEl : ct,
shim : this.shim,
shadowOffset: this.shadowOffset || 4,
id: this.id,
constrain: this.constrain
});
if(this.zIndex){
this.el.setZIndex(this.zIndex);
}
this.el.setStyle("overflow", Ext.isGecko ? "auto" : "hidden");
if(this.field.msgTarget != 'title'){
this.field.msgTarget = 'qtip';
}
this.field.inEditor = true;
this.mon(this.field, {
scope: this,
blur: this.onBlur,
specialkey: this.onSpecialKey
});
if(this.field.grow){
this.mon(this.field, "autosize", this.el.sync, this.el, {delay:1});
}
this.field.render(this.el).show();
this.field.getEl().dom.name = '';
if(this.swallowKeys){
this.field.el.swallowEvent([
'keypress', // *** Opera
'keydown' // *** all other browsers
]);
}
}
});

mclovin
13 Oct 2009, 4:44 PM
@VinylFox - thanks for all your help on this! That override actually did not work. But I did notice the if I rolled back to EXT 2 that I was actually able to run the fileUploadField; which confims my notion that it does not work with EXT 3.0.0. I suppose I will anxiously await the new public release.... or just continue to use EXT 2