How do I export Google Script form data to Google Drive?

Question

I have built a very simple form in google scripts. The file upload feature is functional: it uploads a file to my google drive. I cannot figure out how to grab the form information (Name, Organization, Content Type), save it into a spreadsheet, and upload that to my google drive.

How do I upload the form data (text fields) to my drive?

!!UPDATE 7/19!! Code updated with Spreadsheet App code. and improved HTML. CSS not included as I don't think it's relevant to this issue.

!!UPDATE 7/20!! Code is working. Updated to reflect full functionality. Thanks to Sandy for the assistance.

form.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div id="main">
 <div class="form">
  <form id='myForm'>
      <div class="header">
        <h1>Information Submission Form</h1>
        <h2>Center For Alternative Fuels</h2>
      </div>

      <div class="row">
       <div class="col-md-6">
         <input id='name' type="text" name="name" placeholder="Full name" class="full item" spellcheck="false">
      </div>

      <div class="col-md-6">
         <input id='email' type="text" name="email" placeholder="Email" class="full item" spellcheck="false">
      </div>
     </div>

     <div class="row indent item">
      <input id='organization' type="text" name="organization" placeholder="Organization" class="full" spellcheck="false">
     </div>

     <div class="row indent item">
       <textarea id='type' name="type" class="full" placeholder="What are you submitting? (Presentation, Educational Content,...)" rows='2'></textarea>
     </div>

     <div id='success'>
     </div>


     <div class="row indent item">
       <textarea id='info' name="info" class="full" placeholder="Describe the content you are submitting" rows='8'></textarea>
     </div>


     <input type="file" name="myFile">
     <input type="submit" value="Submit" 
       onclick="this.value='Uploading..';
            google.script.run.withSuccessHandler(fileUploaded)
            .uploadFiles(this.parentNode);
            return false;" style="margin-top: 20px">
  </form>
 </div>
</div>

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

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

server.gs

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

var url;

function uploadToSheet(form){

 var fullName, emailAdd, organization, fileType, fileInfo;

 var ss = SpreadsheetApp.openById("INSERT SHEET ID HERE");

 var dataArray = [];

 fullName = form.name;
 emailAdd = form.email;
 organization = form.organization;
 fileType = form.type;
 fileInfo = form.info;

 dataArray.push(fullName);
 dataArray.push(emailAdd);
 dataArray.push(organization);
 dataArray.push(fileType);
 dataArray.push(fileInfo);

 ss.appendRow('dataArray');

}

function uploadFiles(form) {

try {

  var dropbox = "Form Files";
  var folder, folders = DriveApp.getFoldersByName(dropbox);

if (folders.hasNext()) {
  folder = folders.next();
} 
else {
  folder = DriveApp.createFolder(dropbox);
}

  var blob = form.myFile;    
  var file = folder.createFile(blob);    
  file.setDescription("Uploaded by " + form.myName);
  url=file.getUrl();

  return "File uploaded successfully " + file.getUrl();
} 

catch (error) {
  return error.toString();
  }
}

The form data (text fields) could be put into a text file, and the text file saved to your Google Drive. Or each set of form data could be saved to a row in a spreadsheet. Or do you want the data to be attached to and saved with the uploaded file as metadata? — Alan Wells
– Alan Wells, Commented Jul 15, 2016 at 21:03
I would like the data to be saved in a spreadsheet...I thought I included that detail in the original post :) thanks! — thisFunkinGuy
– thisFunkinGuy, Commented Jul 15, 2016 at 21:09
You'll need to use the SpreadsheetApp service. I don't think that the doPost() function is being triggered, and you don't need it. You should check for data getting passed with Logger.log() statements. Logger.log('the name: ' + form.myName) You'll probably want to use appendRow() Apps Script documentation — Alan Wells
– Alan Wells, Commented Jul 15, 2016 at 21:52

Alan Wells · Accepted Answer · 2016-07-20 21:02:37Z

0

The code might look something like this:

var dataArray,org,ss,userName;

ss = SpreadsheetApp.openById("spreadsheet_File_ID");
dataArray = [];

userName = form.myName;
org = form.myOrganization;

dataArray.push(userName);
dataArray.push(org);

ss.appendRow(dataArray);

edited Jul 20, 2016 at 21:02

answered Jul 15, 2016 at 22:32

Alan Wells

31.4k16 gold badges113 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

thisFunkinGuy Over a year ago

check out my updated code. i'm receiving a "TypeError: Cannot call method "appendRow" of null."

Alan Wells Over a year ago

The spreadsheet object is null. You are trying to get the active spreadsheet, but it's probably not open. You may need to open the spreadsheet by ID.

thisFunkinGuy Over a year ago

any insight as to what function i should use to open the spreadsheet?

Alan Wells Over a year ago

Take a look at this documentation: Link to Apps Script Documentation

Collectives™ on Stack Overflow

How do I export Google Script form data to Google Drive?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related