Google Apps Script Cannot find method createFile&#

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);
  ...