HTML form file upload to Google Drive and save URL to google sheet

Question

I'm new to the world of google scripting, and have found some great tutorials on how to either: i Upload a file to Google Drive with HTML form ii Append new rows to a google sheet.

Essentially I am trying to to write a basic HTML form that collects a few text fields and file attachment, where the file attachment is uploaded to my google drive and the URL along with the other form text fields are appended a Google Sheet.

Here is the HTML form I am working with (based on a tutorial I found):

<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

<!-- You can also include your own CSS styles -->
<style>
  form { margin: 40px auto; }
  input { display:inline-block; margin: 20px; }
</style>

<script>

  // 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;
  }

</script>

<!-- This is the HTML form -->
<form id="labnol">

  <!-- Text input fields -->
  <input type="text" id="nameField" name="myName" placeholder="Your name..">
  <input type="email" id="emailField" name="myEmail" placeholder="Your email..">

  <!-- File input filed -->
  <input type="file" name="myFile">

  <!-- The submit button. It calls the server side function uploadfiles() on click -->
  <input type="submit" id="uploadFile" value="Upload File"
         onclick="this.value='Uploading..';uploadFile();">

</form>

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

And here is the google script (again, based on a useful tutorial on a blog)

/* 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 = "Test Form Submissions";
    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);

    //Allocate variables for submissions in sheet
    var namerecord = form.myName;
    var emailrecord = form.myEmail;

    /* Set the file description as the name of the uploader */
    file.setDescription("Uploaded by " + form.myName);

    /* Return the download URL of the file once its on Google Drive */
    return "File uploaded successfully " + file.getUrl();

    var uploadURL = file.getUrl();


  //

  } catch (error) {

    /* If there's an error, show the error message */
    return error.toString();
  }

        //Open spreadsheet based on URL
  var googsheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/17fuu1vUuxgCgs1TpSGpWDNxMHX3AEFscmjX156HQ5_U/edit?usp=sharing');
  Logger.log(googsheet.getName());

  var sheet = googsheet.getSheets()[0];
  sheet.appendRow(["James", "jim", "abc"]);



}

My intuition was simply to slip some lines of code in to add the form data to the specified sheet but it's not working and I must be doing something wrong :S

Any advice would be greatly appreciated to an ignorant Business Analyst new to web programming :/

Thanks

Answer 1

i had the same problem, and with this link solved my issue :

this a update from google script example for upload file with google sheets and Macros.

1. In the line in the HTML defining the submit button, change id="uploadFile" to id="uploadFileButton" (there was possibly a collision between the id of the submit button and the function uploadFile())

2. and also change the onclick trigger by adding an extra return false: onclick="this.value='Uploading..';uploadFile();return false;"

3. Correspondingly, in the code defining the uploadFile() function, change

   document.getElementById('uploadFile').value = "Uploading File..";
   

   to

   document.getElementById('uploadFileButton').value = "Uploading File..";
   

a complete thread link: https://code.google.com/p/google-apps-script-issues/issues/detail?id=6177

Regards From Venezuela

NOTE: Sorry for my bad English