Téléchargement de formulaires et de fichiers avec htmlservice et le script d'application ne fonctionne pas

j'essaie de télécharger un fichier dans un dossier google drive spécifique avec les données du formulaire dans une feuille de calcul. La partie tableur de ce code fonctionne, mais la fonction de téléchargement de fichier ne fonctionne pas. Toute aide sur la réparation de ce serait apprécié.

du 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();


}

formulaire.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>

Merci.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>
6
demandé sur Mogsdad 2013-12-25 08:50:10

1 réponses

Edit: exemple

le HtmlService ne supporte pas la méthode post pour les formulaires HTML. Les éléments d'entrée recueillis par un formulaire peuvent être communiqués à une fonction côté serveur en utilisant une fonction handler à la place. Pour plus de détails, voir service HTML: communiquer avec les fonctions du serveur .

voici un exemple basé sur le code que vous avez posté dans votre question.

Formulaire

.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>

Merci.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();
}

réponse Originale à cette question, qui portait sur la base de débogage:

D'où vient ce code à l'origine? Il y a eu plusieurs questions à son sujet , et il pourrait être utile de voir le tutoriel original ou l'exemple qu'il a été pris.

quand vous lancez ce code comme une application web publiée, et soumettez un fichier, l'erreur que vous recevez est TypeError: Cannot read property "thefile" from undefined. sans plus creuser, cela vous indique qu'il y a un objet undefined utilisé dans votre code. Quel objet est qui? Je ne sais pas encore, mais un indice est que le code est à la recherche d'une propriété appelée "thefile" .

si vous avez le script ouvert dans l'éditeur, et lancé le webapp à partir de là (en cliquant sur Test web app for your latest code dans le Publish / Deploy comme la boîte de dialogue de L'application Web), alors vous pouvez également vérifier la transcription de L'exécution pour plus de détails. (sous le menu View) vous trouverez qu'il contient quelque chose comme ceci:

[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]

nous voyons cette même erreur, mais maintenant nous connaissons le numéro de ligne. Cette ligne contient une faute d'orthographe:

var fileBlob = e.paramater.thefile
                 ^^^^^^^^^
8
répondu Mogsdad 2017-05-23 11:45:26