Search code examples
google-apps-scriptweb-applications

Upload files from web to Google Drive


I want to make a form on a website using Google API where user fill in "name", "email" and the file to upload. I want the file to upload in my Google Drive, which is working (followed YT tutorial), but I need to create a new folder named as "name" + "email" from the form or named as "name" and create a file in this folder with content of "email"

I tried this but I've never done anything in .gs so I have no idea how to pass the name from .html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Upload Files</title>
  </head>
  <body>
    <h1>Nezávazná poptávka!</h1>
    <form>
        <input type="text" class="box" name="name" placeholder="Celé jméno*">
        <br>
        <br>
        <input type="text" class="box" name="mail" placeholder="E-mail*">
        <br>
        <br>
        <input type="file" name="myFile" mulitple>
        <br>
        <br>
        <input type="button" id="submitBtn" value="Nahrát soubor">
        <label id="resp"></label>
    </form>
    
    <script>
      document.getElementById('submitBtn').addEventListener('click',
        function(e){
          google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
        })
        
        function onSuccess(data){
          document.getElementById('resp').innerHTML = "File Uploaded to the path " +data;
        }
       
    </script>
  </body>
</html>
function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function uploadFiles(data)
{
 var file = data.myFile;
 var name = data.name;
 var mail = data.mail;
 var folder = DriveApp.getFolderById('1lnLlX-zB8n4JZyEDdq242hiw2jX4qZWH');
 DriveApp.createFolder(name);
 DriveApp.createFile(mail, mail);
 
 var createFile = folder.createFile(file);
 return createFile.getUrl();
}

Solution

  • You can keep your index.html page the same and complete the task with a few minor edits to you code.gs:

    function uploadFiles(data){
    
      var file = data.myFile;
      var name = data.name;
      var mail = data.mail;  
    
      var folder = DriveApp.getFolderById('<your-folder-id>');
      folder.createFolder(name + " + " + mail);
    
      var createFile = folder.createFile(file);
      return createFile.getUrl();
    }
    

    Alternatively, if you want the file to be uploaded to the newly created folder, you can do this by replacing the last three lines:

      folder.createFolder(name + " + " + mail);
    
      var createFile = folder.createFile(file);
      return createFile.getUrl();
    

    with:

      var folderID = folder.createFolder(name + " + " + mail).getId();
    
      var createFile = DriveApp.getFolderById(folderID).createFile(file);
      return createFile.getUrl();