fileUpload in GAS with the same name and extension - google-apps-script

Question

I hope that you can help me, I have a issue.
I need a form in GAS that can upload a file to google drive with the original name. but I can´t make work. I don't know that is wrong, but the file not have extention and the name is Undefined..
this is my simple code;
thanks for all.
function doGet(p) {
var app = UiApp.createApplication();
var flow = app.createFlowPanel().setId('flow');
var gridfile = app.createGrid(5,3);
var flabel0 = app.createLabel('Upload the file');
var flabel1 = app.createLabel('Select file: ');
var thefile = app.createFileUpload().setName('thefile').setId('thefile');
var handlerxx = app.createServerHandler('uploadfile').addCallbackElement(flow);
thefile.addChangeHandler(handlerxx);
gridfile.setWidget(0, 0, flabel0)
.setWidget(2, 0, flabel1)
.setWidget(2, 1, thefile);
flow.add(gridfile);
app.add(flow);
return app;
}
function uploadfile(e) {
var app = UiApp.getActiveApplication();
var fileBlob = Utilities.newBlob(e.parameter.thefile,"application/zip",e.parameter.thefile);
var doc = DocsList.createFile(fileBlob);
app.getElementById('flow').add(app.createLabel('File Uploaded successfully'));
return app;
}

Answer 1

You can only upload a file in a doGet / doPost form structure.
Instead of explaining in details I thought it would be easier to show a working example (honestly it's also simpler ...)
so there it is, note that I had to add a submit button to trigger the form submission.
By the way I added a 'loading' label shown by a client handler because otherwise nothing happens during upload and users can be worrying !!
I commented out the line about zip type and fileName since the uploaded file will keep the name and type automatically.
function doGet() {
var app = UiApp.createApplication();
var form = app.createFormPanel();
var flow = app.createFlowPanel().setId('flow');
form.add(flow);
var gridfile = app.createGrid(5,3);
var flabel1 = app.createLabel('Select file: ');
var lab = app.createLabel('LOADING').setStyleAttributes({'color':'red'}).setVisible(false).setId('lab');
var cliHandler = app.createClientHandler().forTargets(lab).setVisible(true);
var thefile = app.createFileUpload().setName('thefile').setId('thefile');
var button = app.createSubmitButton('Upload the file').addClickHandler(cliHandler);
gridfile.setWidget(2, 0, flabel1)
.setWidget(2, 1, thefile)
.setWidget(2, 2, button);
flow.add(gridfile).add(lab);
app.add(form);
return app;
}
function doPost(e) {
var app = UiApp.getActiveApplication();
Logger.log('doPost');
// var fileBlob = Utilities.newBlob(e.parameter.thefile,"application/zip",e.parameter.thefile);
var doc = DocsList.createFile(e.parameter.thefile);
app.getElementById('lab').setVisible(false);
app.add(app.createLabel('File Uploaded successfully'));
return app;
}