Html Question posted in
Some basic documentation can be found here.

Html – App Script how to read a form object passed through cloud function

I’m building a web app to take files from a web form and put them in a Google Drive folder. Upon submitting the form, I want to run a cloud function with google.script.run while passing through the form object as a parameter.

My question is how can I access the files in Code.gs after passing through the form object? I want to get the file names and maybe other data.
My code below:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <label for="FormControlFile">Select File:</label> 
      <input name="myFile" type="file" id="FormControlFile" multiple />
      <button type="submit">Submit</button>
    </form>

    <?!= include('script'); ?>
  </body>
</html>

Code.gs:

const folderId = "my folder id";
const folder = DriveApp.getFolderById(folderId);

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function include(fileName) {
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

function uploadFiles(formObject) {
  //formObject.files??
}

script.html:

<script>

  function preventFormSubmit() {
    const form = document.getElementById("myForm")
    form.addEventListener("submit", (e) => {
      e.preventDefault();
    });
  }

  window.addEventListener("load", preventFormSubmit);

  function handleFormSubmit(formObject) {
    google.script.run.uploadFiles(formObject);
  }
</script>

Thanks

Tags:

3

Answers


  1. 0

    Try modifying your script like so:

    <script>
  function preventFormSubmit() {
    const form = document.getElementById("myForm"); 
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      handleFormSubmit(form); // pass your form object to your handler function
    });
  }

  window.addEventListener("load", preventFormSubmit);

  function handleFormSubmit(formElement) {
    google.script.run.uploadFiles(formElement); // pass formElement to your `uploadFiles` function from the script. If all other parameters are passed correctly, this would work.
  }
</script>

    In your Code.gs You can then get access to files in form element:

    function uploadFiles(form) {
  var fileBlob = form.myFile;
  var folder = DriveApp.getFolderById('your-folder-id');

  // fileBlob is an array of files if multiple attribute is set on the input
  for (var i = 0; i < fileBlob.length; i++) {
    var file = fileBlob[i];
    folder.createFile(file);
  }
}
    Login or Signup to reply.
  2. 0

    According to provided code, here is working Google Apps Script code, to be put in file Code.gs, to upload file to Google Drive and get uploaded file name.

    const folderId = "my folder id";
const folder = DriveApp.getFolderById(folderId);

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function include(fileName) {
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

function uploadFiles(formObject) {
  try {
    var fileUrl = "";
    var fileName = "";
    if (formObject.myFile.length > 0) {
      var blob = formObject.myFile;
      var file = folder.createFile(blob);
      fileUrl = file.getUrl();
      fileName = file.getName();
    }
  } catch (error) {
      return error.toString();
  }
}
    Login or Signup to reply.
  3. 0

    Modification points:

    • When I saw your HTML, I noticed that you use multiple at <input name="myFile" type="file" id="FormControlFile" multiple />. From this situation, I guessed that in your situation, multiple files might be uploaded.

    In the current stage, unfortunately, google.script.run cannot parse multiple files from the input tag. So, in this case, it is required to parse the files on the Javascript side.

    When this is reflected in your script, it becomes as follows.

    Modified script:

    Google Apps Script: Code.gs

    In this case, the function uploadFiles is modified.

    const folderId = "my folder id";
const folder = DriveApp.getFolderById(folderId);

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function include(fileName) {
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

function uploadFiles(formObject) {
  if (formObject.length == 0) {
    return "No files";
  }
  return formObject.map(e => folder.createFile(Utilities.newBlob(...e)).getId());
}

    HTML: index.html

    This is not modified.

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <label for="FormControlFile">Select File:</label> 
      <input name="myFile" type="file" id="FormControlFile" multiple />
      <button type="submit">Submit</button>
    </form>

    <?!= include('script'); ?>
  </body>
</html>

    Javascript: script.html

    In this case, the function handleFormSubmit is modified.

    <script>

  function preventFormSubmit() {
    const form = document.getElementById("myForm")
    form.addEventListener("submit", (e) => {
      e.preventDefault();
    });
  }

  window.addEventListener("load", preventFormSubmit);

  function handleFormSubmit(formObject) {
    Promise.all([...formObject.myFile.files].map(file => {
      const fr = new FileReader();
      return new Promise(r => {
        fr.onload = e => r([[...new Int8Array(e.target.result)], file.type, file.name]);
        fr.readAsArrayBuffer(file);
      });
    }))
      .then(obj => google.script.run.withSuccessHandler(console.log).uploadFiles(obj));
  }

</script>
    • When this modified script is used when you open the HTML multiple files are selected and click "Submit" button, and the files are uploaded to Google Drive. And, you can see the uploaded file IDs in the console.

    Note:

    References:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search