GAS e.parameter undefined, uploadWidget won't setName - google-apps-script

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;
}