Google Scripts Returning Undefined

Question

My goal is to create a portal where I can accept file uploads to a folder named after the person submitting, then log their name to a spreadsheet.

The function “uploadFiles()” uploads and organizes the uploads in a new file just fine. However when I run the function “saveToSpreadsheet()” it publishes an “undefined” instead of pulling any form data from my spreadsheet.

I am fairly new JavaScript and this is my first project working within Google Apps Script, please pardon my being a novice when I ask: what is causing this lack of communication between functions?

HTML Form

<form id="myForm">
<input type="text" name="artistName" placeholder="First and last name">
<input type="text" name="artTitle" placeholder="Title of submission">
<input type="text" name="yearProduced" placeholder="Year created">
<input type="text" name="medium" placeholder="Medium">
    
<input type="file" name="myFile">
<input type="submit" value="Upload File" 
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>

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

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

Google Script File

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

function uploadFiles(form) {
  
  try {
    var dropbox = form.artistName.replace(/\s+/g, '-').toLowerCase();
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    var artistName = form.artistName;
    var artTitle = form.artTitle;
    var yearProduced = form.yearProduced;
    var medium = form.medium;
    
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Created by " + artistName + ". " + artTitle + " in " + yearProduced + " in a medium of " + medium);
        
    return "File uploaded successfully. Thanks, " + artistName + "!";

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

function saveToSpreadsheet(data) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  
  var j = sheet.getLastRow();
  
  var cell = sheet.getRange(1, 1);
  var cellValue = sheet.getSheetValues(1, 1, 1, 1);
  
  cell.setValue(data);
  
  Logger.log(data);
}

Edit (this ended up solving my problem)

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

function uploadFiles(form) {
  
  try {
    var dropbox = form.artistName.replace(/\s+/g, '-').toLowerCase();
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    var artistName = form.artistName;
    var artTitle = form.artTitle;
    var yearProduced = form.yearProduced;
    var medium = form.medium;
    var xyz = saveToSpreadsheet(artistName);
    
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Created by " + artistName + ". " + artTitle + " in " + yearProduced + " in a medium of " + medium);
        
    return "File uploaded successfully. Thanks, " + artistName + "!";

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

function saveToSpreadsheet(data) {
  var ss = SpreadsheetApp.openById('mysheetID');
  var sheet = ss.getSheets()[0];
  
  var j = sheet.getLastRow();
  
  var cell = sheet.getRange(1, 1);
  var cellValue = sheet.getSheetValues(1, 1, 1, 1);
  
  cell.setValue(data);
  
  Logger.log(data);
}

Answer 1

I use this code to create a HTML Bootstrap page where the users upload files into a Drive Folder, named as their username and log into a spreadsheet. Maybe this helps you.

Codigo.gs

   function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('subirCorreo.html')
            .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
 
function uploadFiles(form) {
  
  try {
    
    // FOLDER ID
    var id= "FOLDERID";
    
    var carpeta = DriveApp.getFolderById(id);

    var blob = form.myFile;    
    var file = carpeta.createFile(blob);    
    
    file.setDescription("Subido por " + Session.getActiveUser().getEmail());
        
    // Esta linea es por si quiere tipo enlace
    // return "El archivo se subio correctamente: <br> <br>" + "<a href="+file.getUrl()+">"+file.getUrl()+"</a>" ;
    
    return "El archivo se subio correctamente: <br> <br>" + file.getUrl();
    
  } catch (error) {
    return error.toString();
  }
  
}

function uploadFilesMail(form) {
  
  try {
    
    var id= "FOLDERID";
    
    var carpeta = DriveApp.getFolderById(id);
    
    var correo = form.myEmail;

    var blob = form.myFile;    
    var file = carpeta.createFile(blob).setName("Archivo de: "+correo);    
    
    file.setDescription("Subido por " + Session.getActiveUser().getEmail());
        
    // Esta linea es por si quiere tipo enlace
    // return "El archivo se subio correctamente: <br> <br>" + "<a href="+file.getUrl()+">"+file.getUrl()+"</a>" ;
    
    return "El archivo se subio correctamente: <br> <br>" + file.getUrl();
    
  } catch (error) {
    return error.toString();
  }
  
}

subir.html

<!-- Se incluye bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 
<style>
  form { text-align: center ; }
  input  { margin: auto;}
  div { text-align: center ;font-weight: bold; color:#3644FF;  }
</style>
 
<script>
  
  function subirArchivo() {
    google.script.run
       .withSuccessHandler(fileUploaded)
       .uploadFiles(document.getElementById("form"));
    return false;
  }
 
  function fileUploaded(status) {
    document.getElementById('form').style.display = 'none';
    document.getElementById('resultado').innerHTML = status;
  }
  
</script>

<form id="form">
 
 <h1> Subir archivo </h1> 
 
 <input type="file" name="myFile"> <br>
 
  <input class="btn btn-primary" type="submit" id="uploadFile" value="Subir archivo" 
         onclick="this.value='Subiendo..';subirArchivo();">
 
</form>

<br>
<br>
<br>
<br>

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

</div>