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

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

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            Send Chiwoo&Sangah's Wedding Photos
        </title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>        
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  </head>
  <body>
  <div align="center">
  <p><img src="https://static.wixstatic.com/media/d23d4c_44fcb98ffcf2490f9c8822f7c6caaf72~mv2.jpg" width="100%"></p>
  
  <div id="formcontainer" align="center" style="text-align: center">

    <p align="center"><label for="myForm"> Chiwoo & Sangah's Wedding Photo Uploader:</label></p>

    <br><br>


    <form id="myForm" align="center" style="text-align: center"> 
      <label for="myForm">Your Name:</label>
      <div width="600px" align="center">
        <input type="text" name="myName" placeholder="You can leave your name here" style="text-align: center">
      </div>
    
     <br>

      <div  align="center" text-align="center" margin="auto">

      <label for="myFile" align="center" style="text-align: center">Upload Attachment(s):</label>
      
      <p align="center"><input type="file" name="filename" id="myFile" multiple></p>
     
      <input type="button" value="Submit" onclick="iteratorFileUpload()">
      <br>
      </div>
    </form>
  </div>

  <div id="output" align="center"></div>
<div id="progressbar">
    <div ></div>
</div>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>

var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;

// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
    var allFiles = document.getElementById('myFile').files;

    if (allFiles.length == 0) {
        alert('No file selected!');
    } else {
        //Show Progress Bar

        numUploads.total = allFiles.length;
        $('#progressbar').progressbar({
        value : false
        });//.append("<div class='caption'>37%</div>");
        $(".progress-label").html('Preparing files for upload');
        // Send each file at a time
        for (var i = 0; i < allFiles.length; i  ) {
            console.log(i);
            sendFileToDrive(allFiles[i]);
        }
    }
}

function sendFileToDrive(file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var content = reader.result;
        console.log('Sending '   file.name);
        var currFolder = 'Wedding Photos';
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
    }
    reader.readAsDataURL(file);
}

function updateProgressbar( idUpdate ){
   console.log('Received: '   idUpdate);
   numUploads.done  ;
   var porc = Math.ceil((numUploads.done / numUploads.total)*100);
   $("#progressbar").progressbar({value: porc });
   $(".progress-label").text(numUploads.done  '/'  numUploads.total);
   if( numUploads.done == numUploads.total ){
      //uploadsFinished();
      numUploads.done = 0;
      $(".progress-label").text($(".progress-label").text()   ': FINISHED!');
      $("#progressbar").after('Thank You!!! Refresh this page if you have more to upload.');
                    
   };
}
</script>

  

  <style>
    body {
      max-width: 400px;
      padding: 20px;
      margin: auto;
      text-align: center;
    }
    input {
      display: inline-block;
      width: 100%;
      padding: 5px 0px 5px 5px;
      margin-bottom: 10px;
      -webkit-box-sizing: border-box;
      ‌ -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: center;
    }
    select {
      margin: auto;
      position: middle;
    }
    input[type="submit"] {
      width: auto !important;
      display: block !important;
    }
    input[type="file"] {
      padding: 5px 0px 15px 0px !important;
      margin: auto;
    }
#progressbar{
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
    vertical-align: middle;

}
.progress-label {
      float: left;
margin-top: 5px;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff;
          width: 100%;
    height: 100%;
    position: absolute;
    vertical-align: middle;
    }
  </style>
</body>
</html>

CodePudding user response：

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:

<input type="text" id="myName" name="myName" placeholder="You can leave your name here" style="text-align: center">

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:

CodePudding user response：

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 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>. 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);