PDA

View Full Version : Fileupload does not work the second time



TheBigOnion
8 Oct 2010, 3:21 AM
Hello all,
I have been working with some sample code for doing an upload. The little window looks great on the first time, but the second time I try to launch the little window, the upload textbox does not allow the user to choose a file. (well, they can choose it, but it does not appear in the upload textbox) Here is a screen shot.

22749


I cannot figure out why it is acting this way. Here is my code: (some of the page is missing, but I have included the important parts)




/* --- Begin Functions --- */
function do_buttons() {
var row = Ext.grid_control.getSelectionModel().getSelected();

if (row != null) {
Ext.getCmp('download_button').enable();
} else {
Ext.getCmp('download_button').disable();
}
}




Ext.upload_Fields = {
xtype: 'fieldset'
,title: 'upload data'
//,height: 300
,autoWidth: true
,autoHeight: true
,border: true
,layout: 'form'
,labelWidth: 100
,defaultType: 'textfield'
,defaults: {
anchor: '-20'
,allowBlank: false
}
,items: [
{
fieldLabel: 'Color'
,name: 'color'
,allowBlank:false
}
]
};

Ext.upload_form = new Ext.FormPanel({
fileUpload: true,
width: 420,
frame: true,
autoheight:true,
bodyStyle: 'padding: 10px 10px 0 5px;',
labelWidth: 60,
defaults: {
anchor: '90%',
msgTarget: 'side',
allowBlank: false
},
items: [
{
xtype: 'fileuploadfield'
,id: 'form-file'
,emptyText: 'Select a file'
,fieldLabel: 'File'
,name: 'Filecontent'
,buttonCfg: {
text: '',
iconCls: 'upload-icon'
}
,x: 15
,width: 150
},
{
xtype: 'label'
,id: 'fieldDivider'
,html: "<br><br>"
},
Ext.upload_Fields

]
});

Ext.upload_window = new Ext.Window({
title:'Form Upload',
width:430,
autoHeight: true,
closable: true,
resizable:false,
items: [Ext.upload_form],
buttons: [{
text: 'Upload',
handler: function(){
if(Ext.upload_form.getForm().isValid()){
Ext.upload_form.getForm().submit({
url: 'upload.php',
params: {uploadPath: Ext.current_directory},
waitMsg: 'Uploading your file...',
success: function(fp, o){
Ext.MessageBox.alert('Upload','Upload Complete.');
Ext.grid.ds.reload({
callback: do_buttons
});
Ext.upload_window.hide();
Ext.upload_form.getForm().reset();
},
failure: function(fp, o){
Ext.MessageBox.alert('Warning','try again,data failure.');
}
});
}
}
},{
text: 'Cancel',
handler: function() {
Ext.upload_window.hide();
Ext.upload_form.getForm().reset();
}}]
});


function do_upload() {

Ext.upload_window.show();
}

/* --- End Functions --- */


I would really appreciate it if someone could help me figure out this problem.

Thanks.

Condor
8 Oct 2010, 3:50 AM
Don't know if that is the problem, but your window should be configured with closeAction:'hide'.

andrejlnnk
8 Oct 2010, 4:56 AM
Hello,

I work on the same problem and find it in method doFormUpload();
There ExtJS create fake XMLHttpRequest from body:

"r.responseText = doc.body.innerHTML;"

The problem, IE put hole response to header and copy content to body, but remove the <form> from body or lost it?

My response look like this.

<script>..</script>
<form>
<div class="content">...</div>
</form>
<script>..</script>



Take a look to the picture how IE interpreted:

http://www.bpm.ch/IEBug.jpg
http://www.bpm.ch/IEBug.JPG

Is something like this not better for the IE?
"window.frames['id].document.all.item(0).children.item(0).innerHTML" // header content

Any suggestion how we can solve it?

regards
Andrej

Condor
10 Oct 2010, 11:50 PM
That is the wrong response to a file upload (read this (http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.BasicForm)).

Another method (not mentioned in the docs) is using a textarea:

<html><body><textarea>...Your JSON response here...</textarea></body></html>

steffenk
11 Oct 2010, 12:25 AM
this is what is implemented in ExtDirect.

andrejlnnk
13 Oct 2010, 11:15 PM
thanks!