javascript 带有文件上传功能的 Google Apps 脚本创建表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15261247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Apps Script Create form with file upload
提问by jjones312
I'm in the process of creating a basic form that takes user input via text boxes and drop down list and upon submit will log into a spreadsheet. So far this works fine. What I would like to add to the form is a "file upload" feature, that allows someone to select the file and upon submitting the form the file is uploaded as the data values from text boxes and drop downs are logged into the spreadsheet. I've reviewed the following link https://developers.google.com/apps-script/class_fileuploadbut i'm having a hard time inserting / adding the example into the existing doGet function.. Anyone able to help or provide suggestions? Here is the Google App Script code so far.
我正在创建一个基本表单，该表单通过文本框和下拉列表接受用户输入，并在提交时登录电子表格。到目前为止，这工作正常。我想添加到表单中的是“文件上传”功能，它允许某人选择文件并在提交表单时上传文件，因为来自文本框和下拉列表的数据值被记录到电子表格中。我已经查看了以下链接https://developers.google.com/apps-script/class_fileupload但我很难将示例插入/添加到现有的 doGet 函数中.. 任何人都可以提供帮助或提供建议？到目前为止，这是 Google App Script 代码。
*used the following link to base the form on: https://sites.google.com/site/appsscripttutorial/advanced-examples/insert-data-in-sheet-using-ui-forms
*使用以下链接作为表单的基础：https: //sites.google.com/site/appsscripttutorial/advanced-examples/insert-data-in-sheet-using-ui-forms
// Script-as-app template.
var submissionSSKey = 'Spreadsheet Key goes Here';
function doGet() {
var app = UiApp.createApplication().setTitle('Loan Registration Processing');
var panel = app.createVerticalPanel();
var grid = app.createGrid(8,2).setId('loanGrid');
var loanTypeLabel = app.createLabel('Loan Type');
var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
loanList.addItem('Select Option');
loanList.addItem('FHA');
loanList.addItem('Convential');
loanList.addItem('VA');
loanList.addItem('Reverse');
loanList.addItem('HELOC');
var borrowerNameLabel = app.createLabel("Borrower's Name");
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var loanAmountLabel = app.createLabel('Loan Amount');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var appDateLabel = app.createLabel('Loan Date');
var appDateTextbox = app.createTextBox().setWidth('150px').setName('date');
var lienPostition = app.createLabel('Lien Position');
var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
lienPos.addItem('Select Option');
lienPos.addItem('1st');
lienPos.addItem('2nd');
var propertyType = app.createLabel('Property Type');
var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
propType.addItem('Select Option');
propType.addItem('1-4');
propType.addItem('Manufactured');
var submitButton = app.createButton('Submit');
//Grid layout of items on form
grid.setWidget(0, 0, loanTypeLabel)
.setWidget(0, 1, loanList)
.setWidget(1, 0, borrowerNameLabel)
.setWidget(1, 1, borrowerTextbox)
.setWidget(2, 0, loanAmountLabel)
.setWidget(2, 1, loanAmountTextbox)
.setWidget(3, 0, appDateLabel)
.setWidget(3, 1, appDateTextbox)
.setWidget(4, 0, lienPostition)
.setWidget(4, 1, lienPos)
.setWidget(5, 0, propertyType)
.setWidget(5, 1, propType)
.setWidget(6, 0, submitButton)
//Event Handler
var handler = app.createServerClickHandler('insertInSS');
handler.addCallbackElement(panel);
submitButton.addClickHandler(handler);
panel.add(grid);
app.add(panel);
return app;
}
//Function to insert data in the sheet on clicking the submit button
function insertInSS(e){
var app = UiApp.getActiveApplication();
var LoanType = e.parameter.LoanType;
var borrower = e.parameter.borrower;
var amount = e.parameter.amount;
var date = e.parameter.date;
var LienPosition = e.parameter.LienPosition;
var PropertyType = e.parameter.PropertyType;
//app.getElementById('info').setVisible(true).setStyleAttribute('color','red');
var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
return app;
}
回答by Serge insas
here is the code properly formatted :
这是格式正确的代码：
// Script-as-app template.
var submissionSSKey = '*************';
function doGet(e) {
var app = UiApp.createApplication().setTitle('Loan Registration Processing');
var panel = app.createFormPanel();
var grid = app.createGrid(8,2).setId('loanGrid');
var loanTypeLabel = app.createLabel('Loan Type');
var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
loanList.addItem('Select Option');
loanList.addItem('FHA');
loanList.addItem('Convential');
loanList.addItem('VA');
loanList.addItem('Reverse');
loanList.addItem('HELOC');
var borrowerNameLabel = app.createLabel("Borrower's Name");
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var loanAmountLabel = app.createLabel('Loan Amount');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var appDateLabel = app.createLabel('Loan Date');
var appDateTextbox = app.createDateBox().setWidth('150px').setName('date');
var lienPostition = app.createLabel('Lien Position');
var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
lienPos.addItem('Select Option');
lienPos.addItem('1st');
lienPos.addItem('2nd');
var propertyType = app.createLabel('Property Type');
var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
propType.addItem('Select Option');
propType.addItem('1-4');
propType.addItem('Manufactured');
var submitButton = app.createSubmitButton('<B>Submit</B>');
var warning = app.createHTML('<B>PLEASE WAIT WHILE DATA IS UPLOADING<B>').setStyleAttribute('background','yellow').setVisible(false)
//file upload
var upLoadTypeLabel = app.createLabel('File Upload');
var upLoad = (app.createFileUpload().setName('thefile'));
//Grid layout of items on form
grid.setWidget(0, 0, loanTypeLabel)
.setWidget(0, 1, loanList)
.setWidget(1, 0, borrowerNameLabel)
.setWidget(1, 1, borrowerTextbox)
.setWidget(2, 0, loanAmountLabel)
.setWidget(2, 1, loanAmountTextbox)
.setWidget(3, 0, appDateLabel)
.setWidget(3, 1, appDateTextbox)
.setWidget(4, 0, lienPostition)
.setWidget(4, 1, lienPos)
.setWidget(5, 0, propertyType)
.setWidget(5, 1, propType)
.setWidget(6, 0, upLoadTypeLabel)
.setWidget(6, 1, upLoad)
.setWidget(7, 0, submitButton)
.setWidget(7, 1, warning)
var cliHandler = app.createClientHandler().forTargets(warning).setVisible(true)
submitButton.addClickHandler(cliHandler);
panel.add(grid);
app.add(panel);
return app;
}
function doPost(e) {
var app = UiApp.getActiveApplication();
var LoanType = e.parameter.LoanType;
var borrower = e.parameter.borrower;
var amount = e.parameter.amount;
var date = e.parameter.date;
var LienPosition = e.parameter.LienPosition;
var PropertyType = e.parameter.PropertyType;
//app.getElementById('info').setVisible(true).setStyleAttribute('color','red');
var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
// data returned is a blob for FileUpload widget
var fileBlob = e.parameter.thefile;
var doc = DocsList.createFile(fileBlob);
return app
}
回答by Serge insas
You have to put you panel into a formPanel, use a submitButton and get all your results in a single doPost function. No need to define a handler nor any callbackElement in this context so you should remove them to avoid conflicts.
您必须将面板放入 formPanel，使用 submitButton 并在单个 doPost 函数中获取所有结果。无需在此上下文中定义处理程序或任何 callbackElement，因此您应该删除它们以避免冲突。
If you look at the simple example you showed as reference you'll see the structure that has to be adopted for form submission. I know it works the way you did it too but not for file upload...
如果您查看作为参考显示的简单示例，您将看到表单提交必须采用的结构。我知道它也像你一样工作，但不适用于文件上传......
Here is you working code : I made a few changes... testable here
这是您的工作代码：我做了一些更改...可在此处进行测试
- changed the textBox for date into a dateBox
- added an client handler to show a warning while the file is uploading since this can take a while if the file is big ;-)
- 将日期的文本框更改为日期框
- 添加了一个客户端处理程序以在文件上传时显示警告，因为如果文件很大，这可能需要一段时间;-)
Sorry, the system is buggy, I cannot format the code properly, I'll make another answer...
对不起，系统有问题，我无法正确格式化代码，我再做一个回答...
回答by jjones312
I've figured out how to get the file upload to attach to the grid and display, allow file selection and submittal of data values to the spreadsheet. It doesn't upload the select file to my drive.
我已经想出了如何让文件上传附加到网格和显示，允许文件选择和数据值提交到电子表格。它不会将选择文件上传到我的驱动器。
I'm posting the updated code below. Any thoughts on why its not posting the file to my drive??
我在下面发布更新的代码。关于为什么不将文件发布到我的驱动器的任何想法？
// Script-as-app template.
var submissionSSKey = 'Spreadsheet Key';
function doGet(e) {
var app = UiApp.createApp ication().setTitle('Loan Registration Processing');
var panel = app.createVerticalPanel();
var grid = app.createGrid(8,2).setId('loanGrid');
var loanTypeLabel = app.createLabel('Loan Type');
var loanList = app.createListBox().setName('Loan List').setWidth('120px').setName('LoanType');
loanList.addItem('Select Option');
loanList.addItem('FHA');
loanList.addItem('Convential');
loanList.addItem('VA');
loanList.addItem('Reverse');
loanList.addItem('HELOC');
var borrowerNameLabel = app.createLabel("Borrower's Name");
var borrowerTextbox = app.createTextBox().setWidth('150px').setName('borrower');
var loanAmountLabel = app.createLabel('Loan Amount');
var loanAmountTextbox = app.createTextBox().setWidth('150px').setName('amount');
var appDateLabel = app.createLabel('Loan Date');
var appDateTextbox = app.createTextBox().setWidth('150px').setName('date');
var lienPostition = app.createLabel('Lien Position');
var lienPos = app.createListBox().setName('Lien Position').setWidth('150px').setName('LienPosition');
lienPos.addItem('Select Option');
lienPos.addItem('1st');
lienPos.addItem('2nd');
var propertyType = app.createLabel('Property Type');
var propType = app.createListBox().setName('Property Type').setWidth('150px').setName('PropertyType');
propType.addItem('Select Option');
propType.addItem('1-4');
propType.addItem('Manufactured');
var submitButton = app.createButton('Submit');
//file upload
var upLoadTypeLabel = app.createLabel('File Upload');
var upLoad = (app.createFileUpload().setName('thefile'));
//Grid layout of items on form
grid.setWidget(0, 0, loanTypeLabel)
.setWidget(0, 1, loanList)
.setWidget(1, 0, borrowerNameLabel)
.setWidget(1, 1, borrowerTextbox)
.setWidget(2, 0, loanAmountLabel)
.setWidget(2, 1, loanAmountTextbox)
.setWidget(3, 0, appDateLabel)
.setWidget(3, 1, appDateTextbox)
.setWidget(4, 0, lienPostition)
.setWidget(4, 1, lienPos)
.setWidget(5, 0, propertyType)
.setWidget(5, 1, propType)
.setWidget(6, 0, upLoadTypeLabel)
.setWidget(6, 1, upLoad)
.setWidget(7, 0, submitButton)
//Event Handler
var handler = app.createServerClickHandler('insertInSS');
handler.addCallbackElement(panel);
submitButton.addClickHandler(handler);
panel.add(grid);
app.add(panel);
return app;
}
//Function to insert data in the sheet on clicking the submit button
function insertInSS(e){
var app = UiApp.getActiveApplication();
var LoanType = e.parameter.LoanType;
var borrower = e.parameter.borrower;
var amount = e.parameter.amount;
var date = e.parameter.date;
var LienPosition = e.parameter.LienPosition;
var PropertyType = e.parameter.PropertyType;
//app.getElementById('info').setVisible(true).setStyleAttribute('color','red');
var sheet = SpreadsheetApp.openById(submissionSSKey).getActiveSheet();
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[LoanType,borrower,amount,date,LienPosition,PropertyType]]);
return app;
}
function doPost(e) {
// data returned is a blob for FileUpload widget
var fileBlob = e.parameter.thefile;
var doc = DocsList.createFile(fileBlob);
}
