Загрузка формы и файла с помощью htmlService и скрипта приложения не работает

Я пытаюсь загрузить файл в определенную папку Google Диска вместе с данными формы в электронную таблицу. Часть электронной таблицы этого кода работает, но функция загрузки файла не работает. Любая помощь на ретины.

код.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();


}

форма.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>

спасибо.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>

1 ответов


Edit: пример работающего

HtmlService не поддерживает post метод для HTML-форм. Входные элементы, собранные формой, могут быть переданы серверной функции с помощью функции обработчика. Дополнительные сведения см. В разделе служба HTML: связь с функциями сервера.

вот пример, основанный на коде, который вы разместили в своем вопрос.

форма.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>

спасибо.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>

код.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();
}

оригинальный ответ, который был сосредоточен на базовой отладке:

откуда взялся этот код? Были несколько вопросов, и было бы полезно увидеть оригинальный учебник или пример, из которого он был взят.

когда вы запускаете этот код как опубликованное веб-приложение и отправляете файл, ошибка, которую вы получаете TypeError: Cannot read property "thefile" from undefined. больше не копая, это говорит вам, что есть undefined "объект" используется в коде. Что это? Пока не знаю, но подсказка в том, что код ищет свойство с именем "thefile".

если у вас есть скрипт, открытый в редакторе, и запустил webapp оттуда (нажав на 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
                 ^^^^^^^^^