View Full Version : Can I copy a file upload field in a new form?

15 Apr 2010, 3:16 AM
Hello everyone,

I'm afraid that what I want to do is impossible, but here goes anyway.

I have a Ext.Window with a tbar that contains (among others) a FileUploadField that is rendered just like a button (I followed the demo on the FileUploadField).
The thing is, I don't have any forms in this tbar and when I select a file I call a function where I want to create a new temporary form, add the value coresponding to my selected file, and submit the temporary form.

I tried copying the value for the filename in a new file upload field, but I get an exception (something like "security exception" - sorry - I don't have the actual error now). My guess is I can't write from javascript to a file upload field (most likely to prevent hidden file uploads from the client). Is this right?

If yes, then, can anyone give me a hint on how I can add the upload button to my tbar inside a form of some sort, so that I can just submit that form instead of creating a duplicate? I tried to add a FormPanel, but it doesn't render well at all (has border, wrong color background), and also I added a BasicPanel, but it can't render the window.

Here's my code so far:

//initialize the editor grid
this.listingEditorGrid= new Ext.grid.EditorGridPanel({
tbar: [{
xtype: 'fileuploadfield',
id: this.prefixID+'formFile',
buttonText: "Upload CSV",
buttonOnly: true,
listeners: {
'fileselected': this.fileUploadButton.createDelegate(this)
} ...]
/* upload the file and do the parsing */
fileUploadButton: function(upload, filename){

//create a temporary form and copy the file name + submit it.
var hiddenform = new Ext.form.FormPanel({
task: "UPLOAD",
authKey: login.authKey
renderTo: "x-desktop",
method: "POST",
fileUpload: true,
hidden: true,
url: this.dataStoreURL,
waitTitle: "Uploading and parsing CSV - please wait...",
items: [{
xtype: 'textfield',
inputType: 'file',
name: 'csv',
value: filename

//submit the form
success: function (form, action){
Ext.Msg.alert('Success', action.result.msg);
failure: function (form, action) {
Ext.Msg.alert('Failed', action.result.msg);