GAS e.parameter undefined, uploadWidget won't

Question

I'm working on an answer for another question found here. I have modified a different tutorial script from here, but I'm having an issue that the e.parameter for the fileUploadWidget will not accept a .setName() change. No matter what I do with setName, it continues to show the "name" as FileUpload, and won't pass the e.parameter.'file'+numRows on to the uploadFiles(e) (formerly doPost(e)). The folderName parameter will come through, but numRows is coming through as NaN, and the file+numRows is coming through undefined. What is going on here/What am I missing? I've been through tons of solutions on and off SO, but can't seem to figure out where this has gone wrong. Maybe a fresh set of eyes with more experience can see what I'm doing wrong.

You can find the example of this code in action here

//modified from script found here http://www.googleappsscript.org/miscellaneous/creating-form-elements-dynamically-using-google-apps-script-gas
function doGet() {
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var formPanel = app.createFormPanel();
  var folderLabel = app.createLabel('Folder Name (temp placeholder to remember to use .getFolderById(folderId) to place in specific folder)');
  var folderNameTextBox = app.createTextBox().setId('folderName').setName('folderName');
  var filesLabel = app.createLabel('Add Files to Upload');
  var table = app.createFlexTable().setId('table').setTag('0'); //Here tag will count the number of members
  //Write the header for the table
  var headerArray = ['File(s)'];
  for(var i=0; i<headerArray.length; i++){
    table.setWidget(0, i, app.createLabel(headerArray[i]));
  }
  //Add the first row of form elelments to input Member information
  addMemebrRow(app);

  //Add a button to submit the info
  var button = app.createSubmitButton('Upload File(s)');
  var handler = app.createServerHandler('uploadFiles');
  handler.addCallbackElement(panel);
  button.addClickHandler(handler);
  panel.add(folderLabel)
    .add(folderNameTextBox)
    .add(filesLabel)
    .add(table)
    .add(button);
  formPanel.add(panel);
  app.add(formPanel);
  return app;
}

function addMemebrRow(app){
  var table = app.getElementById('table');
  var tag = parseInt(table.getTag());
  Logger.log(tag);
  var numRows = tag+1;
  if(numRows >1){
    table.removeCell(numRows-1, 5);
    table.removeCell(numRows-1, 4);
  }
  Logger.log(numRows);
  var uploadWidget = app.createFileUpload();
  var uploadWidgetName = uploadWidget.setName('file'+numRows);
  var uploadWidgetId = uploadWidget.setId('file'+numRows);
  Logger.log(uploadWidgetId.getId());
  Logger.log(uploadWidgetName);
  table.setWidget(numRows, 0, uploadWidget);
  table.setTag(numRows.toString());
  addButtons(app);
}

function addButtons(app){
  var table = app.getElementById('table');
  var numRows = parseInt(table.getTag());

  //Create handler to add/remove row
  var addRemoveRowHandler = app.createServerHandler('_addRemoveRow');
  addRemoveRowHandler.addCallbackElement(table);

  //Add row button and handler
  var addRowBtn = app.createButton('+').setId('addOne').setTitle('Add row');
  table.setWidget(numRows, 4, addRowBtn);
  addRowBtn.addMouseUpHandler(addRemoveRowHandler);

  //remove row button and handler
  var removeRowBtn = app.createButton('-').setId('removeOne').setTitle('Remove row');
  table.setWidget(numRows, 5, removeRowBtn);
  removeRowBtn.addMouseUpHandler(addRemoveRowHandler);
}

function _addRemoveRow(e){
  Logger.log(e.parameter.source);
  var app = UiApp.getActiveApplication();
  var table = app.getElementById('table');
  var tag = parseInt(e.parameter.table_tag);
  var source = e.parameter.source;
  //Logger.log(tag);
  if(source == 'addOne'){
    table.setTag(tag.toString());
    addMemebrRow(app);
  }
  else if(source == 'removeOne'){
    if(tag > 1){
      //Dcrement the tag by one
      var numRows = tag-1;
      table.removeRow(tag);
      //Set the new tag of the table
      table.setTag(numRows.toString());
      //Add buttons in previous row
      addButtons(app); 
    }
  }
  return app;
}

function uploadFiles(e) {
  var foldername = e.parameter.folderName;
  Logger.log(foldername);
  var numFiles = parseInt(e.parameter.table_tag);
  Logger.log(numFiles);
  for (var i = 1; i<=numFiles; i++){
    Logger.log(i);
    var fileBlob = e.parameter['file'+i];
    var newFile = DocsList.getFolderById("0B2p9JhtmHqC8Q0lIQk1mMERQTW8").createFile(fileBlob);
  }
  var app = UiApp.getActiveApplication();
  var label = app.createLabel(numFiles +' file(s) uploaded successfully');
  app.add(label);
  return app;
}

Answer 1

File upload in forms needs a doPost function to work, this is not an option ;)

In such a structure (doGet/doPost) you don't have to define a handler nor a callBackElement, the formPanel is supposed to include all its elements automatically.

So I tried your modified code and still get one major issue with the numFiles value that is on the table tag : I can't get it...

If I replace it with a fixed value then everything works nicely, I get the files in the right folder.

So this answer is not a good answer because it doesn't bring a full solution but at least it reduces its initial scope to that point : how to get this #@!#! numFiles value ?

---

EDIT : Found the issue : table doesn't support setName method so its value can't be retrieved in the submitHandler. We should use another widget to hold that value.

new working Code below : (I used a textBox as a "hidden" widget for test only, please replace by a hiddenWidget when in production)

function doGet() {
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var formPanel = app.createFormPanel();
  var folderLabel = app.createLabel('Folder Name (temp placeholder to remember to use .getFolderById(folderId) to place in specific folder)');
  var folderNameTextBox = app.createTextBox().setId('folderName').setName('folderName');
  var filesLabel = app.createLabel('Add Files to Upload');
  var table = app.createFlexTable().setId('table').setTag('0'); //Here tag will count the number of members
  //Write the header for the table
  var headerArray = ['File(s)'];
  for(var i=0; i<headerArray.length; i++){
    table.setWidget(0, i, app.createLabel(headerArray[i]));
  }
  //Add the first row of form elelments to input Member information
  addMemebrRow(app);
  var hidden = app.createTextBox().setName('hidden').setId('hidden').setValue(table.getTag());// used to hold the number of files, replace with createHidden()
  //Add a button to submit the info
  var button = app.createSubmitButton('Upload File(s)');
  panel.add(folderLabel)
    .add(folderNameTextBox)
    .add(filesLabel)
    .add(table)
    .add(button);
  formPanel.add(panel.add(hidden));
  app.add(formPanel);
  return app;
}

function addMemebrRow(app){
  var table = app.getElementById('table');
  var tag = Number(table.getTag());
  Logger.log('tag='+tag);
  var numRows = tag+1;
  if(numRows >1){
    table.removeCell(numRows-1, 5);
    table.removeCell(numRows-1, 4);
  }
  Logger.log(numRows);
  var uploadWidget = app.createFileUpload();
  var uploadWidgetName = uploadWidget.setName('file'+numRows);
  var uploadWidgetId = uploadWidget.setId('file'+numRows);
  Logger.log(uploadWidgetId.getId());
  Logger.log(uploadWidgetName);
  table.setWidget(numRows, 0, uploadWidget);
  table.setTag(numRows);
  addButtons(app);
}

function addButtons(app){
  var table = app.getElementById('table');
  var numRows = Number(table.getTag());

  //Create handler to add/remove row
  var addRemoveRowHandler = app.createServerHandler('_addRemoveRow');
  addRemoveRowHandler.addCallbackElement(table);

  //Add row button and handler
  var addRowBtn = app.createButton('+').setId('addOne').setTitle('Add row');
  table.setWidget(numRows, 4, addRowBtn);
  addRowBtn.addMouseUpHandler(addRemoveRowHandler);

  //remove row button and handler
  var removeRowBtn = app.createButton('-').setId('removeOne').setTitle('Remove row');
  table.setWidget(numRows, 5, removeRowBtn);
  removeRowBtn.addMouseUpHandler(addRemoveRowHandler);
}

function _addRemoveRow(e){
  Logger.log(e.parameter.source);
  var app = UiApp.getActiveApplication();
  var hidden = app.getElementById('hidden');
  var table = app.getElementById('table');
  var tag = Number(e.parameter.table_tag);
  var source = e.parameter.source;
  //Logger.log(tag);
  if(source == 'addOne'){
    table.setTag(tag.toString());
    hidden.setValue(tag+1);
    addMemebrRow(app);
  }
  else if(source == 'removeOne'){
    if(tag > 1){
      //Dcrement the tag by one
      var numRows = tag-1;
      table.removeRow(tag);
      //Set the new tag of the table
      table.setTag(numRows);
      hidden.setValue(numRows);
      //Add buttons in previous row
      addButtons(app); 
    }
  }
  return app;
}

function doPost(e) {
  var foldername = e.parameter.folderName;
  Logger.log('foldername = '+foldername);
  var numFiles = Number(e.parameter.hidden);
  Logger.log('numFiles = '+numFiles);
  for (var i = 1; i<=numFiles; i++){
    Logger.log(i);
    var fileBlob = e.parameter['file'+i];
    var newFile = DocsList.getFolderById("0B3qSFd3iikE3QXdubnVoMXlGMkk").createFile(fileBlob);
  }
  var app = UiApp.getActiveApplication();
  var label = app.createLabel(numFiles +' file(s) uploaded successfully');
  app.add(label);
  return app;
}