title: How to link html back to the script - Uploading Script Google Drive
body: <p>I initially saw this code online, that allows users to upload files to their google drive through a page. The script automatically creates a folder </p>
  
  <p>//<a href="https://script.google.com/d/12EnDFZrsfpBubZ9lM7pnHIsn9M49_vyXm0TLBQ_pyx_ViAJH3HXgkoe9/edit?newcopy=true" rel="nofollow">https://script.google.com/d/12EnDFZrsfpBubZ9lM7pnHIsn9M49_vyXm0TLBQ_pyx_ViAJH3HXgkoe9/edit?newcopy=true</a></p>
  
  <p>So you will notice that initially the codes is supposed to be deployed as a webapp but I tweaked it to make it run on the sidebar. The html part loads fine, you can actually key in all the data, but once you click the upload form, it just returns a blank page. I'm pretty convinced that it's because the click button is not connecting to the script again, making it fail</p>
  
  <p>This is the original code</p>
  
  <pre><code>/* The script is deployed as a web app and renders the form */
  function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html')
          .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  // This is important as file upload fail in IFRAME Sandbox mode.
  }
  
  /* This function will process the submitted form */
  function uploadFiles(form) {
  
   try {
  
   // Name of the Drive folder where the files should be saved 
      var dropbox = "Database";
  ;
  var folder, folders = DriveApp.getFoldersByName(dropbox);
  
  // Find the folder, create if the folder does not exist 
  if (folders.hasNext()) {
    folder = folders.next();
  } else {
    folder = DriveApp.createFolder(dropbox);
  }
  
  // Get the file uploaded though the form as a blob 
  var blob = form.myFile;    
  var file = folder.createFile(blob);    
  
  // Set the file description as the name of the uploader 
  file.setName(form.myCode + " "  + form.myfilename + " - " + form.myID + " - " + form.myName); 
  file.setDescription("Uploaded by " + form.myName + " - " + form.myEmail);
  
  // Return the download URL of the file once its on Google Drive 
  return "File uploaded successfully, please check your drive with this link for confirmation: " + file.getUrl();
  
   } catch (error) {
  
  // If there's an error, show the error message 
  return error.toString();
  }
  
  }
  </code></pre>
  
  <p>AND THE HTML IS HERE</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Include the Google CSS package --&gt;
  &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"&gt;
   
  &lt;!-- You can also include your own CSS styles --&gt;
  &lt;style&gt;
    form { margin: 40px 20px auto; }
    input { display:inline-block; margin: 20px; }
  &lt;/style&gt;
   
  &lt;script&gt;
    
    // The function will be called after the form is submitted
    function uploadFile() {
      document.getElementById('uploadFile').value = "Uploading File..";
      google.script.run
         .withSuccessHandler(fileUploaded)
         .uploadFiles(document.getElementById("labnol"));
      return false;
    }
   
    // This function will be called after the Google Script has executed
    function fileUploaded(status) {
      document.getElementById('labnol').style.display = 'none';
      document.getElementById('output').innerHTML = status;
    }
    
  &lt;/script&gt;
   
  &lt;!-- This is the HTML form --&gt;
  &lt;form id="labnol"&gt;
   
    &lt;!-- Text input fields --&gt;
    File Upload&lt;br&gt;
    &lt;br&gt;
    Your Name:&lt;br&gt;
    &lt;input type="text" name="myName" placeholder="Your name.."&gt; &lt;br&gt;&lt;br&gt;
    Email Address: &lt;br&gt;
    &lt;input type="email" name="myEmail" placeholder="Your email.."&gt; &lt;br&gt;&lt;br&gt;
    ID? &lt;br&gt;
    &lt;input type="number" name="myID" placeholder="Your ID.."&gt; &lt;br&gt;&lt;br&gt;
    Upload Code: &lt;br&gt;
    &lt;input type="text" name="myCode" placeholder="Your Upload code.."&gt; &lt;br&gt;&lt;br&gt;
    File Name: &lt;br&gt;
    &lt;input type="text" name="myfilename" placeholder="Your File Name"&gt;  &lt;br&gt;&lt;br&gt;
   
    &lt;!-- File input filed --&gt;
    &lt;input type="file" name="myFile"&gt;
   
    &lt;!-- The submit button. It calls the server side function uploadfiles() on click --&gt;
    &lt;br&gt;
    &lt;input type="submit" id="uploadFile" value="Upload File" 
           onclick="this.value='Uploading..';uploadFile();"&gt;
   
  &lt;/form&gt;
   
  &lt;!-- Here the results of the form submission will be displayed --&gt;
  &lt;div id="output"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So from the original code I tweaked it to replace the top part</p>
  
  <pre><code>function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('form')
    .setTitle('Upload Form')
    .setWidth(250);
   SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
    .showSidebar(html);
  }
  
  // This function will process the submitted form 
  function uploadFile(form) {
  
   try {
  
  // Name of the Drive folder where the files should be saved 
      var dropbox = "Database";
   ;
    var folder, folders = DriveApp.getFoldersByName(dropbox);
  
    // Find the folder, create if the folder does not exist 
    if (folders.hasNext()) {
    folder = folders.next();
  } else {
    folder = DriveApp.createFolder(dropbox);
  }
  
  // Get the file uploaded though the form as a blob 
  var blob = form.myFile;    
  var file = folder.createFile(blob);    
  
  // Set the file description as the name of the uploader 
  file.setName(form.myCode + " "  + form.myfilename + " - " + form.myID + " - " + form.myName); 
  file.setDescription("Uploaded by " + form.myName + " - " + form.myEmail);
  
  // Return the download URL of the file once its on Google Drive 
  return "File uploaded successfully, please check your drive with this link for confirmation: " + file.getUrl();
  
   } catch (error) {
  
   // If there's an error, show the error message 
  return error.toString();
   }
  
  }
  </code></pre>
  
  <p>So I basically replaced the top part with a script to load the sidebar and the html "form" but the error appears is that upon clicking upload, it does not work.</p>
  
  <p>I'm guessing it's this part</p>
  
  <pre><code> &lt;input type="submit" id="uploadFile" value="Upload File" 
       onclick="this.value='Uploading..';uploadFile();"&gt;
  </code></pre>
  
  <p>since <code>onClick</code>, it should run the function <code>uploadFile()</code> but it does not work.
  I've been trying to figure this out for quite some time but can't seem to make this last part work. So I'm here asking if anyone can help me solve this coding issues</p>