Google Apps 脚本通过文件上传创建表单答案

【问题标题】：Google Apps Script Create form with file uploadGoogle Apps 脚本通过文件上传创建表单
【发布时间】：2013-02-22 01:32:48
【问题描述】：

我正在创建一个基本表单，该表单通过文本框和下拉列表接受用户输入，提交后将登录到电子表格。到目前为止，这工作正常。我想添加到表单中的是“文件上传”功能，它允许某人选择文件并在提交表单时上传文件，因为文本框和下拉列表中的数据值被记录到电子表格中。我已经查看了以下链接https://developers.google.com/apps-script/class_fileupload，但我很难将示例插入/添加到现有的 doGet 函数中。任何人都可以提供帮助或提供建议吗？这是到目前为止的 Google App 脚本代码。

*使用以下链接作为表单的基础：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;
 }

【问题讨论】：

标签： javascript google-apps-script google-apps

【解决方案1】：

这是格式正确的代码：

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

【讨论】：

【解决方案2】：

您必须将面板放入 formPanel，使用 submitButton 并在单个 doPost 函数中获取所有结果。无需在此上下文中定义处理程序或任何回调元素，因此您应该删除它们以避免冲突。

如果您查看作为参考显示的简单示例，您将看到表单提交必须采用的结构。我知道它也可以按照您的方式工作，但不适用于文件上传...

这是你的工作代码：我做了一些更改...testable here

将日期的文本框更改为日期框
添加了一个客户端处理程序以在文件上传时显示警告，因为如果文件很大，这可能需要一段时间；-)

对不起，系统有问题，我无法正确格式化代码，我再做一个回答...

【讨论】：

您能否举一个 doPost 的示例来处理所有提交的数据，包括文件上传？我改变了“var panel = app.createVerticalPanel();”使用 FormPanel，但我不太确定将事件处理程序合并到 createSubmitButton 以获取文件上传以及数据到指定的电子表格。

【解决方案3】：

我已经弄清楚如何将文件上传附加到网格并显示，允许选择文件并将数据值提交到电子表格。它不会将选择的文件上传到我的驱动器。

我在下面发布更新的代码。关于为什么不将文件发布到我的驱动器的任何想法？

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

【讨论】：