Form validation and input field of type file in Ht

Question

i'm tring to put together standard html5 form validation (using required attribute and a submit button) in forms with "file" input fields using the HTML service apps script.

My problem is passing blob files to the apps script function using a submit button. If i put a normal button i lose the standard validation of the html5. If i use a submit button nothing is passed to the apps script function with the "google.script.run" statement.

The example of the tutorial use a normal button, but in this way i cannot use form validation for required fields.

How i can handle this? Since now i had to use a submit button and the onclick event, and checked manually if required fields were inserted (in the apps script function called by the button).

Answer 1

Put your code on the onSubmit form event and be sure to end the onSuccessHandler function with return false.

<script>
    function updateUrl(url) {
         var div = document.getElementById('output');
         div.innerHTML = '<a href="' + url + '">Got it!</a>';
         return false;
    }
</script>
<form id="myForm"
  onSubmit="return google.script.run
    .withSuccessHandler(updateUrl)
    .processForm(this.parentNode);">
 <input required name="myFile" type="file" />
 <input type="button" value="Submit" />
</form>
<div id="output"></div>