Calling google app script from local javascript?

I have a google app script that deploys to a web app and runs how I want it to. I'm trying to call that script on a webpage using javascript.

The web app consists of a form (HTML File) that will allow the user to choose a file, and click a button which will then call the google app script to upload the file to a folder in my google drive.

What I want is to have that HTML file consisting of the form, have it call a javascript function upon click, and have that javascript function call the google app script, which will upload the file to my google drive.

This is the source code for the google web app:

Google Script:

function doGet(e) {
  //link the html file
  retu HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {

  try {

    var invalid = false;
    var f1 = DriveApp.getFolderById("mydrivefolderid");
    var f2 = DriveApp.getFolderById("mydrivefolderid");

    var fileName = form.myFile; //file submitted in the form
    var file, fileUrl;
    //Check extension using substring
    if (condition) {
      file = f1.createFile(fileName);
      fileUrl = file.getUrl();
    } else if (condition) {
      file = f2.createFile(fileName);
    } else {
      invalid = true;
    }
    if (invalid) {
      //invalid file format
      retu "Unsupported file format. Please try again."
    } else {
      //Add name of the user to the description of the file
      file.setDescription("Uploaded by: " + form.myName);
      //Tell user file uploaded successfully
      retu "File uploaded successfully " + file.getUrl();
    }

  } catch (error) {

    retu error.toString();
  }

}

Form HTML File:

<form id="myForm">
    <input type="text" name="myName" placeholder="Name" required>
    <input type="file" name="myFile">
    <input type="submit" value="Upload File" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    retu false;">
</form>

<div id="output"></div>

<script>
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').ierHTML = status;
    }
</script>

<style>
 input { display:block; margin: 20px; }
</style>

The above code successfully deploys as a web app and runs the way I want it to. Now I'm trying to call the google app script code within this javacript/HTML file:

<!DOCTYPE HTML>
<html>
    <head>
        <script type = "text/javascript">

uploadFile = function() {

    var t = setAttribute("type", "file");
    setTimeout( function () {



        var gupload = document.createElement('script');

        gupload.src = '{THEURLOFMYGOOGLESCRIPTWEBAPP}/exec'+t.src;
        gupload.id = 'gupload';
        gupload.crossorigin="anonymous";
        document.body.appendChild(gupload);
        driveletReset(true);

    }, 0);

};

//run uploadFile when "button" is clicked
var button = document.getElementByClassName("uploadbutton");
button.addEventListener("click", uploadFile, false);

</script>

    </head>
    <body>
        <form id="myForm">
        <input type="text" name="myName" placeholder="Name" required>
        <input type="file" name="myFile">
        <input class = "uploadbutton" type="submit" value="Upload File" 
            onclick="this.value='Uploading..';
                    uploadFile();">
        </form>

        <div id="output"></div>

        <script>
            function fileUploaded(status) {
            document.getElementById('myForm').style.display = 'none';
            document.getElementById('output').ierHTML = status;
        }   
        </script>

        <style>
            input { display:block; margin: 20px; }
        </style>
    </body>
</html>

With the intent of the function uploadFile() calling the google app script within a setTimeout() by adding the file to the end of the google app script url with '.../exec' + t.src; . Is the the right way to go about doing this?