Google Apps Script HTML 服务中的 HTML5 表单验证和文件上传

Question

I'm developing an GAS using HTML service and now running into a roadblock. What I'm trying to do is

1. Create a from that can add data from form elements (ie, name and email) to Google Sheet
2. The form also upload a file to a specific google drive
3. Before 1 and 2, the form should validate input based on HTML5

Here's my (almost) working code:

Code.gs

function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('index.html');
}

function uploadFiles(form) {
    try {
    var ssID = '-------ssID-------';
    var dropboxID = '-------DriveID-------';
    var folder = DocsList.getFolderById(dropboxID);

    var blob = form.myFile;    

    if ( Boolean(blob) ) {
        var file = folder.createFile(blob);
        file.setDescription("Uploaded by " + form.myName);
    }

var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 3).setValues([[ form.myName, form.myMail, file.getUrl() ]]);
return "File uploaded successfully"+ file.getUrl() + file.getName();

    } catch (error) {
        return error.name + ' on line: ' + error.lineNumber + ' -> ' + error.message;
    }
}

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- You can also include your own CSS styles -->
<style>
    form { margin: 40px auto; }
    input { display:block; margin: 20px; }
</style>

<!-- This is the actual HTML form -->
<!--form id="myForm" onsubmit="runGAS(this)"-->
<form id="myForm" onsubmit="return google.script.run
    .withSuccessHandler(fileUploaded)
    .uploadFiles(this.parentNode);">

    <!-- Text input fields -->
    <input type="text" name="myName" id="myName" placeholder="Your name.." required />
    <input type="email" name="myMail" id="myMail" placeholder="Your mail.." required />
    <!-- File input filed -->
    <input type="file" name="myFile" id="myFile" required />
    <!-- The submit button. It calls the server side function uploadfiles() on click -->
    <input type="submit" value="run onClick" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
    <input type="submit" value="Run GAS Function">
</form>
<script>

function runGAS( argThis ) {
    var n = $( "#myName" ).val();
    var f = document.getElementById("myFile");
    // var g = $( "myFile" ).val();
    if( Boolean(n) ) {
        document.getElementById('output').innerHTML = "OK" + n + "js: " + f;
        google.script.run.withSuccessHandler(fileUploaded)
        .uploadFiles( argThis );
        document.getElementById('output').innerHTML = e.name + 'on line:' + e.lineNumber + '->' + e.message;
    }
    return false;
}

</script>

<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>

<!-- The function will be called after the Google Script has executed -->
<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>

I've came across many suggestions:

1. Many tutorial that won't deal with file upload (only Sheet) would say call directly from submit button, this bypass HTML5 validation. This is an example of my first submit button name "run onClick."
2. After searching, I found that to trigger HTML5 validation (Here's the link HTML5 form validation with Html Service ), the case of another submit button titled "run onClick," we should move GAS function call to form element, doing this help triggering HTML5 validation, BUT the weird thing happen to GAS as it won't and the URL generate typical GET with form values (eg, https://script.google.com/a/macros/----/s/---------/dev?myName=va&myMail=vas%40au.edu&myFile=imgName.jpg )
3. Another solution, some suggest that we can use jQuery to catch form submit to trigger GAS function call only when all requirements (validation) are met. This gives the same result as 2. to me. The GAS run, but comes back to this page without passing any actual values.

Any solution would be appreciated.

EDIT 12/19/2014

<script>
window.runGAS = function() {
  // jQuery Style
  window.form = $( "#myForm" );
  // OR JS 
  window.form = document.getElementById('myForm');

  google.script.run
  .withSuccessHandler(fileUploaded)
  .uploadFiles(form);
  return false;
}
</script>

I tried what Sandy has suggested, omit passing value in function call onsubmit in the form element. This help firing HTML5 validation. I figured that I have to find ways to pass the form object (not individual form values) to code.gs , so I pass the form object through the GAS function run.

If I use jQuery style, JavaScript console reports Untaming of guest constructed objects unsupported: [object Object] .

If I use getElementById , I run into the same problem, it generates GET style URL with pair of name=value and comes back to the index.html without "performing" code.gs functions. Note that it "seems" to go through code.gs somehow (ie, if I place some syntax error, it will report during this process) but it just doesn't do what it is supposed to do as in onclick .

The only way, so far, that this will work is to use onclick , not onsubmit , not calling intermediary GAS from tag. But it bypasses HTML5 validation.

I really have no clue here...

Answer 1

Here is how I configure the FORM with HTML Service:

<form id="myInputForm" name="input" onsubmit="writeInput()">

I don't run the onsubmit="return google.script.run in the form. I think I ran into the same or similar problems that you are having. So, the form runs a JavaScript function writeInput() when the form is submitted. Then the JavaScript function in a SCRIPT tag runs google.script.run . That's what works for me. When I set it up that way, input fields that have a required setting will keep the form from being submitted.

<script>
  window.writeInput = function() {
    window.myInputValue = document.getElementById('idMyInputID').value; //Get input value
    google.script.run
  }
<script>

You should have data validation on both the front and back end. Hackers might be able to find some way to send their own data to the .gs , server side code. If I were to choose either validation on the front in, client side, or back end, server side, I'd go with the server side validation. As far as getting a msg back to the user quickly if they did their data input wrong, the client side check is better, but it's not more secure.

You're really asking a question that is about personal preference, or matter of opinion. I just use JavaScript in the HTML to get the value out of the input field.

window.variableName = document.getElementById('id_Name').value;

That line of code gets the value out of a form input field, and into a variable. Then you can send the variable to the .gs file.

google.script.run.withFailureHandler(onFailure)
      .withSuccessHandler(savedLst)
      .writeInputData(variableName);

The above code is in the HTML. The function writeInputData is in a .gs script file.

You can check the variable variableName for validation before calling the writeInputData function.

if (variableName === "") {
  alert("Missing Input");
  return false;
} else {
  google.script.run.withFailureHandler(onFailure)
    .withSuccessHandler(savedLst)
    .writeInputData(variableName);
};

There are other ways to do front end data validation. You can combine methods. If you find an error that you can't fix, post the error message and what line it is coming from.

To print information from HTML use: console.log("some text here: " + variableName); That will print something to the console of your browser. Open the developer tools, and console to see what has been printed to the browsers console. Not to be confused with Logger.log() which prints something to the server side Apps Script Log.