使用 Google Apps 脚本将文件夹上传/命名到 Google Drive 上的目标文件夹答案

【问题标题】：Upload / Naming folders to a destination folder on Google Drive using Google Apps Script使用 Google Apps 脚本将文件夹上传/命名到 Google Drive 上的目标文件夹
【发布时间】：2020-03-06 06:13:46
【问题描述】：

我的编码/脚本能力有限，请多多包涵不正确的术语；我需要人们在表单上输入三个值，[目标、目标和备注]，然后将附件上传到我的 Google Drive。我发现的脚本（附在下面）正在运行，但需要根据我的需要进行调整（编辑）。拜托，我需要以下帮助：

现在，上传文件后，进入默认的 Google Drive 文件夹。但我需要将它们定向到我命名的文件夹，上传到我的 Google 云端硬盘。
每个上传的文件在目的地创建相同的文件夹名称，例如，上传时名为“Fountain”的 .pdf 文件，在目标文件夹中创建一个名为“Fountain”的文件夹。

3.上传进度条工作正常，但我希望每次提交后刷新页面，这样表单上的信息就会消失。

*在每次提交后，[目标、目标和备注] 表单上的输入值没有被记录在任何地方 - 它们不在 Google 表格上；欢迎提出任何解决此问题的建议。

谢谢。

<!DOCTYPE html>
<html>
<body>
  <div id="formcontainer">

    <label for="myForm">2020 Vision:</label>

    <br><br>


    <form id="myForm"> 
      <label for="myForm">Information:</label>
      <div>
        <input type="text" name="objectives" placeholder=“Objectives:”>
      </div>
      <div>
        <input type="text" name="goals" placeholder=“Goals:”>
      </div>
      <div>

      <label for="fileText">Remarks:</label>

          <TEXTAREA name="projectDescription" 
          placeholder="Describe your attachment(s) here:"
          style ="width:400px; height:200px;"
          ></TEXTAREA>


      </div> 
      <br>


      <label for="attachType">Choose Attachment Type:</label>
      <br>
      <select name="attachType">
        <option value="Pictures Only">Picture(s)</option>
        <option value="Proposals Only">Documents</option>
        <option value="Pictures & Proposals">All</option>
      </select>
      <br>

      <label for="myFile">Upload Attachment(s):</label>
      <br>


      <input type="file" name="filename" id="myFile" multiple>

      <input type="button" value="Submit" onclick="iteratorFileUpload()">


    </form>
  </div>

  <div id="output"></div>
<div id="progressbar">
    <div class="progress-label"></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;
folderName;

// 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() {
    folderName = "Batch: "+new Date();
    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 = ‘UPLOADS’; // my desired destination folder
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, folderName);
    }
    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;
   };
}
</script>

  <script>
    function fileUploaded(status) {
      document.getElementById('myForm').style.display = 'none';
      document.getElementById('output').innerHTML = status;
    }

  </script>

  <style>
    body {
      max-width: 400px;
      padding: 20px;
      margin: auto;
    }
    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;
    }
    select {
      margin: 5px 0px 15px 0px;
    }
    input[type="submit"] {
      width: auto !important;
      display: block !important;
    }
    input[type="file"] {
      padding: 5px 0px 15px 0px !important;
    }
#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>

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function uploadFileToDrive(base64Data, fileName, folderName) {
  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 = folderName || "UPLOADS"; //my desired destination for uploads
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    return file.getName();
  }catch(e){
    return 'Error: ' + e.toString();
  }
}

【问题讨论】：

我无法理解Can I get the script to create a folder name from the same name input on the form?。我可以问你吗？
抱歉，我没说清楚。当我将脚本部署为 Web 应用程序时，在 HTML 表单中输入的数据不会出现在任何地方（甚至在谷歌表格上？）所以我假设脚本可以重命名文件，因为它们上传到目标文件夹，基于来自表单输入字段的值。感谢您的回复...
感谢您的回复。很遗憾，我无法从您的回复中看到您的目标愿景。这是因为我的英语水平不好。对此我深表歉意。
谢谢田池。感谢您的帮助。也许我可以一步一步走？我希望上传的文件转到一个文件夹，在脚本上命名为“UPLOADS”。现在，我上传的所有内容都将进入主 Google Drive 文件夹，而不是我创建的“上传”文件夹。可以请你帮忙吗？
感谢您的回复。例如，this information 对您的情况有用吗？

标签： html forms upload google-drive-api

【解决方案1】：

我对您的代码做了一些小改动：

HTML 文件

在您的“sendFileToDrive”中，我将文件夹名称（在本例中为“Uploads”）传递给了您的 Apps 脚本中的“uploadFileToDrive”。

function sendFileToDrive(file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var content = reader.result;
        console.log('Sending ' + file.name);
        // set the file's name where you want to set your files 
        var folderName = "UPLOADS"; // my desired destination folder
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, folderName);
    }
    reader.readAsDataURL(file);
}

要在提交后重置表单中的值，您可以通过以下方式进行（请记住，这是 vanilla JS，因此互联网上有多种方法可以实现）。

在你的“updateProgressbar”中写下这行代码document.getElementById("myForm").reset();

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;
      // Reset the form's fields values
      document.getElementById("myForm").reset();

   };
}

应用脚本文件

在您的 Apps 脚本代码中，我进行了这些更改以从您刚刚上传的文件创建文件夹，然后将其放入您的“上传”文件夹中。您遇到的问题是您试图在 if-else 中创建一个新文件夹，但在您的条件下，您不会输入代码部分来创建文件夹。

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function uploadFileToDrive(base64Data, fileName, folderName) {
  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);
    
    // Get your Uploads folder
    var folders = DriveApp.getFoldersByName(folderName);
    
    // Regex for splitting the file's extention like .pdf
    var patt1 = /\.[0-9a-z]+$/i;
    
    if (folders.hasNext()) {
      var folder = folders.next();
      // Create a folder with the name of the file you just uploaded in your root path
      // DriveApp.createFolder(fileName.split(patt1)[0]);
      // Create the file in your Uploads folder and a folder
      var file = folder.createFile(ss);
      folder.createFolder(fileName.split(patt1)[0]);
      return file.getName(); 
    } else return null;
    
  } catch(e){
    return 'Error: ' + e.toString();
  }
}

编辑

请注意，类文件夹有一个名为createFolder(name) 的特殊方法，它允许您在当前正在处理的文件夹中创建一个文件夹，就像我将它放在我的更新代码中一样。查看更新的文档链接了解更多信息。

文档

我使用这些文档来帮助您找到问题的解决方案：

【讨论】：

谢谢@Alberto，一切正常！ 1. 每次提交后表单刷新成功。 2. 文件夹现在已成功创建并在每次上传时根据其文件名重命名。尽管文件显示在主 UPLOADS 文件夹中，但根据需要，它们创建的相应（空）文件夹被定向到默认的 google 驱动器。这些文件是要从它们的文件夹中拆分出来的吗？除此之外，现在其他一切都很完美。
感谢您的回答。我更新了我的答案，以帮助您解决最后一点的疑问。