Html Form Does Not Submit To Spreadsheet Using Dopost

tried to find some useful answer in existing threads but nothing is really matching my issue. I guess there is a quick fix to it, i just cannot see it. I have a HTML form and want

Solution 1:

If you are going to use google.script.run, then it's pointless to have a function named doPost(). And it's also pointless to have a submit type input tag: type="submit"

If you want to run a withSuccessHandler(fileUploaded) to change the display, you can't have a button inside of the form. It will cause the display to go blank.

And you don't need two google.script.run calls. You need multiple changes and improvements:

form.html

<formid="myForm"><inputtype="text"name="myName"placeholder="Your name.."><inputtype="file"name="myFile"></form><inputtype="button"value="Upload File"onclick="this.value='Uploading..';
                var theForm = document.getElementById('myForm');
                google.script.run.withSuccessHandler(fileUploaded)
                .processFormData(theForm);"><divid="output"></div><script>functionfileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script><style>input { display:block; margin: 20px; }
</style>

server.gs

function processFormData(form) {
  uploadFiles(form.myFile);//Call first function to process the filevarinnerArray= [];
  varouterArray= [];

  innerArray.push(form.myName);
  innerArray.push(form.myFile);

  outerArray.push(innerArray);//Call second function to write data to SS
  writeDataToSS(outerArray);
};

function uploadFiles(theFile) {

  try {

    vardropbox="Customer Shapes";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    varblob= theFile;    
    varfile= folder.createFile(blob);    
    file.setDescription("Uploaded by " + theFile);

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

  } catch (error) {

    return error.toString();
  }
}

function writeDataToSS(values) {
  //html.setSandboxMode(HtmlService.SandboxMode.EMULATED);var url="url...";
  varmessage='Ram';
  varsubmitSSKey='...kHI';
  varsheet= SpreadsheetApp.openById(submitSSKey).getActiveSheet();
  varlastRow= sheet.getLastRow();
  vartargetRange= sheet.getRange(lastRow+1, 1, 1, 2).setValues(values);
}

The html file is not a template, it does not have a scriptlet in it. Just use createHtmlOutputFromFile():

functiondoGet(e) {
  var html = HtmlService.createHtmlOutputFromFile("form");
  html.setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;  
}