Google Apps Script Cannot find method createFile((class)) - file-upload

Question

I just started scripting my first Google App and i can't seem to get pass this error.
What my script does is that it creates a form that allows users to enter data into a google spreadsheet.
And upload a file into the folder BIO.
Please help me out!
This is the code.
function doGet(e) {
var app = UiApp.createApplication().setTitle('New app');
var doc = SpreadsheetApp.openById('0AvOeZM3IzF-GdDRyV3NiTjBreC1ONXh0cHdDMlFhRGc');
var grid = app.createGrid(5, 2);
grid.setWidget(0, 0, app.createLabel('Code:'));
grid.setWidget(0, 1, app.createTextBox().setName('codeName'));
grid.setWidget(1, 0, app.createLabel('Uploaded Date'));
grid.setWidget(1, 1, app.createTextBox().setName('date'));
grid.setWidget(2, 0, app.createLabel("maid's Name"));
grid.setWidget(2, 1, app.createTextBox().setName('maidName'));
//creates vertical panel and declare as panel
var panel = app.createVerticalPanel();
panel.add(grid);
var form = app.createFormPanel().setId('frm').setEncoding('multipart/form-data');
panel.add(app.createFileUpload().setName('thefile'));
form.add(panel);
//creates submit button and declare as button
var button = app.createButton('submit');
//notsure
var handler = app.createServerHandler('b');
//notsure
handler.addCallbackElement(grid);
//notsure
button.addClickHandler(handler);
//add submit button to panel.
panel.add(button);
//addpanel to application
app.add(panel);
//display application
app.add(form);
return app;
}
function b(e) {
var doc = SpreadsheetApp.openById('0AvOeZM3IzF-GdDRyV3NiTjBreC1ONXh0cHdDMlFhRGc');
var lastRow = doc.getLastRow(); //Find the last row
var cell = doc.getRange('a1').offset(lastRow, 0); //finds the next empty cell in column A
cell.setValue(e.parameter.codeName);//i can access paremeter codeName because i setname('codeName') just now.
cell.offset(0, 1).setValue(e.parameter.date);
cell.offset(0, 2).setValue(e.parameter.maidName);
var Blob = e.parameter.thefile;
var folder = DocsList.getFolder('BIO');
folder.createFile(Blob);
var app = UiApp.getActiveApplication();
var label = app.createLabel('File Upload Sucess')
app.close(); //close widget
return app; //close widget
}
Thank you guys in advance!
Jasper.

Answer 1

In order to upload a file in a form you have to use a doGet() / doPost() structure and use a submitButton instead of the 'normal' button you are using.
Note that this configuration does not require to add a callBackElement.
Note also that the form must contain only one element and that the fileUpload widget must be a child of the form. I changed a bit the organization of your Ui creation to make it (hopefully) more clear.
You code should be as follows (didn't check for typos) :
function doGet() {
var app = UiApp.createApplication().setTitle('New app');
var doc = SpreadsheetApp.openById('0AnqSFd3iikE3dFBub2t1Ry1PaXJUMUVkSVVSempCenc');
var form = app.createFormPanel();
var panel = app.createVerticalPanel();
var grid = app.createGrid(5, 2);
grid.setWidget(0, 0, app.createLabel('Code:'));
grid.setWidget(0, 1, app.createTextBox().setName('codeName'));
grid.setWidget(1, 0, app.createLabel('Uploaded Date'));
grid.setWidget(1, 1, app.createTextBox().setName('date'));
grid.setWidget(2, 0, app.createLabel("maid's Name"));
grid.setWidget(2, 1, app.createTextBox().setName('maidName'));
//creates vertical panel and declare as panel
panel.add(grid);
panel.add(app.createFileUpload().setName('thefile'));
form.add(panel);
app.add(form);
var button = app.createSubmitButton('submit');
panel.add(button);
return app;
}
function doPost(e) {
var doc = SpreadsheetApp.openById('0AvOeZM3IzF-GdDRyV3NiTjBreC1ONXh0cHdDMlFhRGc');
var lastRow = doc.getLastRow(); //Find the last row
var cell = doc.getRange('a1').offset(lastRow, 0); //finds the next empty cell in column A
cell.setValue(e.parameter.codeName);//i can access paremeter codeName because i setname('codeName') just now.
cell.offset(0, 1).setValue(e.parameter.date);
cell.offset(0, 2).setValue(e.parameter.maidName);
var Blob = e.parameter.thefile;
var folder = DocsList.getFolder('BIO');
folder.createFile(Blob);
var app = UiApp.getActiveApplication();
var label = app.createLabel('File Upload Success')
app.add(label);
return app; //close widget
}
EDIT following your comment :
to get the url of the file you just uploaded, change the code like this :
...
var folder = DocsList.getFolder('BIO');
var url = folder.createFile(Blob).getUrl();
Logger.log(url);
...