Html Upload Control in Extjs tab panel

[RashmiWagh]

HI,

I have tried using the ExtJs xtype:'fileuploadfield' inside a form panel which is placed in a tab panel.
but getting errors in it

Please go through the attachments

Beacause of this I am using an html upload control but which type of listener should be used to get the file selected and read its data.

{
xtype: 'container',
bodyStyle: 'padding:2px;',
html: '<div><label for="file-upload-1"> Upload file: </label><input id="file-upload-1" type="file" name="uploaded" /></div>',
listeners:
{
onchange: function () {
Ext.get('file-upload-1').on('change', function (evt) {
});
}
}
}


I have tried using afterRender, select and other events, but nothing gets fired after a file is selected.
Please help.

[slemmon]

An error with the filefield when it's in a form in a tabpanel? Are you seeing an error with the below code?



var form = Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
bodyPadding: 10,
frame: true,
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],


buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});


Ext.widget('tabpanel', {
renderTo: Ext.getBody(),
width: 400,
items: [form]
});