guide - La carga de formularios y archivos con htmlService y la secuencia de comandos de la aplicación no funciona
google apps script sample (1)
Editar: ejemplo de trabajo
El servicio Html no admite el método de post para formularios HTML. Los elementos de entrada recopilados por un formulario se pueden comunicar a una función del lado del servidor usando una función de controlador en su lugar. Para obtener más información, consulte Servicio HTML: comuníquese con las funciones del servidor .
Aquí hay un ejemplo basado en el código que ha publicado en su pregunta.
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>
Gracias.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();
}
Respuesta original, que se centró en la depuración básica:
¿De dónde viene este código originalmente? Ha habido varias preguntas al respecto , y podría ser útil ver el tutorial original o el ejemplo del que se tomó.
Cuando ejecuta este código como una aplicación web publicada y envía un archivo, el error que recibe es TypeError: Cannot read property "thefile" from undefined. Sin más excavaciones, esto te dice que hay un objeto undefined que se usa en tu código. ¿Qué objeto es eso? Aún no lo sé, pero una pista es que el código está buscando una propiedad llamada "thefile" .
Si tiene la secuencia de comandos abierta en el editor y lanzó la aplicación web desde allí (haciendo clic en Test web app for your latest code en el cuadro de diálogo Publicar / Implementar como aplicación web), también puede consultar la Transcripción de ejecución para obtener más detalles. (en el menú Ver) Encontrarás que contiene algo como esto:
[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]
Vemos el mismo error, pero ahora sabemos el número de línea. Esa línea contiene un error de ortografía:
var fileBlob = e.paramater.thefile
^^^^^^^^^
Estoy intentando subir un archivo a una carpeta específica de Google Drive junto con los datos del formulario en una hoja de cálculo. La parte de la hoja de cálculo de este código funciona, pero la función de carga de archivos no funciona. Cualquier ayuda para arreglar esto sería apreciada.
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>
Gracias.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>