使用htmlService和应用程序脚本无法正常工作的表单和file upload
我试图上传一个文件到一个特定的谷歌驱动器文件夹连同表单数据到电子表格。 此代码的电子表格部分工作，但file uploadfunction没有。 任何帮助解决这个将不胜感激。
Code.gs
var submissionSSKey = 'SS ID'; function doGet(e) { var template = HtmlService.createTemplateFromFile('Form.html'); template.action = ScriptApp.getService().getUrl(); return template.evaluate(); } function doPost(e) { var template = HtmlService.createTemplateFromFile('Thanks.html'); var LoanType = template.name = e.parameter.name; var borrower = template.department = e.parameter.department; var amount = template.message = e.parameter.message; var emailed = template.email = e.parameter.email; var comp = 'N/A' var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0]; var lastRow = sheet.getLastRow(); var targetRange = sheet.getRange(lastRow+1, 1, 1, 5).setValues([[comp,LoanType,borrower,amount,emailed]]); var fileBlob = e.paramater.thefile var doc = DriveApp.getFolderById('folder ID'); doc.createFile(fileBlob)//.rename('New Name'); return template.evaluate(); } Form.html
<html> <head> <title></title> </head> <body> <form action="<?= action ?>" enctype="multipart/form-data" method="post"> <table border="0" cellpadding="1" cellspacing="0" style="width: 500px;"> <tbody> <tr> <td> Name:</td> <td> <input name="name" type="text" /></td> </tr> <tr> <td> Department:</td> <td> <select name="department"> <option>Select Option</option> <option>Cashier</option> <option>Greeter</option> <option>Runner</option> <option>Line Control</option> <option>IDB</option> <option>Unknown</option> </select></td> </tr> <tr> <td> Email:</td> <td> <input name="email" type="text" /></td> </tr> <tr> <td> Message:</td> <td> <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea></td> </tr> <tr> <td> <p> School Schedule (Image Files Only):</p> </td> <td> <p> <input type="file" id="thefile" name="thefile"> </p></td> </tr> <tr> <td> <input type="submit" value="Submit" /></td> <td> You will receive an email confirmation upon submission</td> </tr> </tbody> </table> </form></body> </html>
Thanks.html
<html> <body> <h1>Thanks</h1> <p>Thank you for your submission.</p> Name: <?= name ?><br/> Department: <?= department ?><br/> Message: <?= message ?><br/> Email: <?= email ?><br/> </body> </html>
编辑：工作示例
HtmlService不支持HTML表单的post方法。 通过表单收集的input元素可以使用处理函数传递给服务器端函数。 有关更多详细信息，请参阅HTML服务：与服务器function通信 。
以下是基于您在问题中发布的代码的示例。
Form.html
<script> // Javascript function called by "submit" button handler, // to show results. function updateOutput(resultHtml) { toggle_visibility('inProgress'); var outputDiv = document.getElementById('output'); outputDiv.innerHTML = resultHtml; } // From blog.movalog.com/a/javascript-toggle-visibility/ function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } </script> <div id="formDiv"> <!-- Form div will be hidden after form submission --> <form id="myForm"> Name: <input name="name" type="text" /><br/> Department: <select name="department"> <option>Select Option</option> <option>Cashier</option> <option>Greeter</option> <option>Runner</option> <option>Line Control</option> <option>IDB</option> <option>Unknown</option> </select><br/> Email: <input name="email" type="text" /><br/> Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/> School Schedule (Image Files Only): <input name="myFile" type="file" /><br/> <input type="button" value="Submit" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress'); google.script.run .withSuccessHandler(updateOutput) .processForm(this.parentNode)" /> </form> </div> <div id="inProgress" style="display: none;"> <!-- Progress starts hidden, but will be shown after form submission. --> Uploading. Please wait... </div> <div id="output"> <!-- Blank div will be filled with "Thanks.html" after form submission. --> </div>
Thanks.html
<div> <h1>Thanks</h1> <p>Thank you for your submission.</p> Name: <?= name ?><br/> Department: <?= department ?><br/> Message: <?= message ?><br/> Email: <?= email ?><br/> File URL: <?= fileUrl ?><br/> </div>
Code.gs
var submissionSSKey = '--Spreadsheet-key--'; var folderId = "--Folder-Id--"; function doGet(e) { var template = HtmlService.createTemplateFromFile('Form.html'); template.action = ScriptApp.getService().getUrl(); return template.evaluate(); } function processForm(theForm) { var fileBlob = theForm.myFile; var folder = DriveApp.getFolderById(folderId); var doc = folder.createFile(fileBlob); // Fill in response template var template = HtmlService.createTemplateFromFile('Thanks.html'); var name = template.name = theForm.name; var department = template.department = theForm.department; var message = template.message = theForm.message; var email = template.email = theForm.email; var fileUrl = template.fileUrl = doc.getUrl(); // Record submission in spreadsheet var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0]; var lastRow = sheet.getLastRow(); var targetRange = sheet.getRange(lastRow+1, 1, 1, 5).setValues([[name,department,message,email,fileUrl]]); // Return HTML text for display in page. return template.evaluate().getContent(); }
原来的答案，这是基本的debugging重点：
这个代码从哪里来的呢？ 关于这个问题有很多问题 ，可以看看最初的教程或例子。
当您将此代码作为已发布的Web应用程序运行并提交文件时，您收到的错误是TypeError: Cannot read property "thefile" from undefined. 没有更多的挖掘，这告诉你在你的代码中有一个undefined对象。 这是什么东西？ 还不知道，但是一个线索是代码正在寻找一个名为"thefile"的属性。
如果您已经在编辑器中打开了脚本，并从那里启动了Test web app for your latest code （通过在“发布/部署为Web应用程序”对话框中单击Test web app for your latest code ），那么还可以检查执行脚本以获取更多详细信息。 （在查看菜单下）你会发现它包含这样的东西：
[13-12-25 07:49:12:447 EST] Starting execution [13-12-25 07:49:12:467 EST] HtmlService.createTemplateFromFile([Thanks.html]) [0 seconds] [13-12-25 07:49:12:556 EST] SpreadsheetApp.openById([--SSID--]) [0.089 seconds] [13-12-25 07:49:12:557 EST] Spreadsheet.getSheets() [0 seconds] [13-12-25 07:49:12:626 EST] Sheet.getLastRow() [0.067 seconds] [13-12-25 07:49:12:627 EST] Sheet.getRange([1, 1, 1, 5]) [0 seconds] [13-12-25 07:49:12:629 EST] Range.setValues([[[N/A, , Select Option, , ]]]) [0.001 seconds] [13-12-25 07:49:12:983 EST] Execution failed: TypeError: Cannot read property "thefile" from undefined. (line 20, file "Code") [0.17 seconds total runtime]
我们看到同样的错误，但现在我们知道行号。 该行包含拼写错误：
var fileBlob = e.paramater.thefile ^^^^^^^^^
