When trying to set file description using one of form field return undefined

Question

To be honest, I'm a novice trying combine shared scripts from web to make a google drive dropbox page for my wedding. Thanks to kind sharing of codes mainly from the community here stackoverflow, everything works fine except it doesn't update the file description by the name entered in the form. It returns undefined. After trying to fix it for a week by myself without knowing a thing, I ended up asking a help here. Can anyone kindly have a look on my script and tell me what I've done wrong? Thank you.

server.gs

function doGet(e) {
  var output = HtmlService.createHtmlOutputFromFile('form.html');
  output.addMetaTag('viewport', 'width=device-width, initial-scale=1');// See http://stackoverflow.com/a/42681526/470749
  return output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}



function uploadFileToDrive(base64Data, fileName, form) {
  try{
    var splitBase = base64Data.split(','),
        type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName); 
    
    var dropbox = "Wedding Photos"; // Folder Name
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var file = folder.createFile(ss);
    file.setDescription("Provided by " + form.myName);
    return "Thank You" + uploadername + "!!! ";
    
  }catch(e){
    return 'Error: ' + e.toString();
  }
}

form.html



  
    
    
        
        
        
        
            Send Chiwoo&Sangah's Wedding Photos
        
                
        
  
  
  
  
  
  

     Chiwoo & Sangah's Wedding Photo Uploader:

    




     
      Your Name:
      
        
      
    
     


      

      Upload Attachment(s):

user_7215091 · Answer

A couple Small Changes

function uploadFileToDrive(base64Data, fileName, name) {//added name and removed form
  Logger.log('filename: %s name: %s',fileName,name);
  try{
    var splitBase = base64Data.split(','),
        type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName); 
    
    var dropbox = "Wedding Photos"; // Folder Name
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    var file = folder.createFile(ss);
    file.setDescription("Provided by " + name);//using name here
    return "Thank You" + uploadername + "!!! ";
    
  }catch(e){
    return 'Error: ' + e.toString();
  }
}

In html:

Changed the name line to this:

In javascript:

function sendFileToDrive(file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var content = reader.result;
        console.log('Sending ' + file.name);
        var name = document.getElementById("myName").value;//added this
        console.log('name: %s',name);
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, name);//changed this line.  I removed the currFolder since you were not using it.  I could not use the form because I was getting an IllegalElementError and I didn't want to chase it.
    }
    reader.readAsDataURL(file);
}

Description:

user_1595451 · Answer

I think that you should do some clean-up of your html file:

The style tag at the bottom it's better to include it inside the head tag
Remove the duplicated tags that load external files, like . Actually, as someone to mixing code from different sources, whenever be possible avoid the use of frameworks like jQuery. Native Web APIs might require longer statements but this might be more efficient than trying to adapt code that uses different frameworks.
Remove the meta tags. Google Apps Script ignores them. Ref. https://developers.google.com/apps-script/reference/html/html-output?hl=en#addmetatagname,-content

Regarding your specific issue,

On the client-side code, add the following line

var name = document.querySelector("form input[name='myName]").value;

before

google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);

and on the above line replace currFolder by name

and on the following line of the server side code replace form by name

function uploadFileToDrive(base64Data, fileName, form)

and on the following line replace form.myName by name

file.setDescription("Provided by " + form.myName);

When trying to set file description using one of form field return undefined

2 Answers