如何将用户上传的文件定向到特定的 Google 驱动器文件夹

Question

我是一名编程新手，当我遇到问题并需要独特的解决方案时，我会求助于不同的代码和应用程序。我是一名小学计算机教师，一直在寻找一种方法让学生从家里或手机上传文件到我的 Google 云端硬盘帐户。我使用 Google Apps Script 在 labnol.org1 上找到了解决方案。

我遵循了所有说明，一切都很好。文件已成功上传到我的 Google 云端硬盘帐户。我最终希望能够根据表单中用户输入的信息重命名文件。我在这个网站上找到了解决方案。我对 html 和 gs 文件做了一些更改...

html:

<form id="myForm"> 
<input type="text" name="myFirstName" placeholder="First Name">
<input type="text" name="myLastName" placeholder="Last Name">
<input type="file" name="myFile">
<input type="submit" value="Upload File" 
   onclick="this.value='Uploading...';
            google.script.run.withSuccessHandler(fileUploaded)
            .uploadFiles(this.parentNode);
             return false;"
             > 
</form>

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

Google Apps 脚本

function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}


function uploadFiles(form) {

try {

var dropbox = "Sample Form 3rd Grade";
var folder, folders = DriveApp.getFoldersByName(dropbox);

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

var blob = form.myFile; 
var fileBlob = form.myFile;
var fname = fileBlob.getName();
var newName = form.myLastName+form.myFirstName; // simple example
// extract extension using RegEx
// from 
var extensionfinder = /(?:\.([^.]+))?$/; 
var ext = extensionfinder(fname)[1];
fileBlob.setName(newName+'.'+ext);
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + form.myFirstName+form.myLastName);

  return "<p> Thanks for uploading a photo for the technology project, " + form.myFirstName + "!";



} catch (error) {

return error.toString();
}

}

同样，一切正常。但是，我接下来要做的是让学生从下拉列表中选择他们老师的名字，根据他们的回答，学生的文件将上传到不同的文件夹中。例如，如果 Student1 选择 Teacher1，我希望将他的文件上传到我的云端硬盘帐户中 Teacher1 的指定文件夹中。这纯粹是为了让事情井井有条并节省我的时间。

新的html如下：

<form id="myForm"> 
<font face="sans-serif">Select your teacher:</font>
<select id="teachers" name="teachers">
    <option value="teacher1">Teacher1</option>
    <option value="teacher2">Teacher2</option>
    <option value="teacher3">Teacher3</option>
    <option value="teacher4">Teacher4</option>
</select>
<input type="text" name="myFirstName" placeholder="First Name">
<input type="text" name="myLastName" placeholder="Last Name">
<input type="file" name="myFile">
<input type="submit" value="Upload File" 
       onclick="this.value='Uploading...';
                google.script.run.withSuccessHandler(fileUploaded)
                .uploadFiles(this.parentNode);
                return false;"
                > 
</form>

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

我使用 Java 和 Google Apps 脚本的经验很少，所以我尝试了很多都失败了。这就像在黑暗中工作。

我最大的障碍是从 "teachers" 元素访问用户输入的选项值。我找到的关于此问题的大多数答案都包括创建条件语句，这是我尝试使用 If (document.GetElementById('teachers').value == "teacher1") {function... 等的第一件事。但是，我一直收到 "document is not defined" 错误，我了解到这是因为我在 .gs 文件而不是 html 文件中编写该脚本。然而，我注意到用户输入的文本可以通过 form.myFirstName+form.myLastName 访问。所以我尝试 form.teachers.value 代替 document.GetElementById 方法。那也没用。

我在这上面花了好几个小时（我承认，在暑假期间学习新事物很有趣），但我最终决定寻求一些帮助。我搜索了这个网站和其他网站以了解如何执行此操作。我怀疑这是一个需要解决的简单问题，而且我太缺乏经验甚至没有注意到。

我还考虑过为每个人创建不同的应用程序脚本类，创建一个 "Teacher's Name" 文本输入，以及一些其他的东西来保持这些文件的组织，如果我无法做到这一点想通了。

在此先感谢您的帮助。

Answer 1

在服务器端.gs代码中，尝试：

var whichTeacher = form.teachers;
Logger.log("whichTeacher: " + whichTeacher);//VIEW, LOGS to see print out to log

要查看 form 对象中的所有内容，您可以遍历对象内部的所有内容，并记录值，然后查看打印到日志中的内容：

for (var key in form) {
  Logger.log('key is: ' + key);
  Logger.log('value is: ' + form[key]);
};

Apps 脚本在将表单对象发送到服务器之前对其进行修改。服务器收到的对象的结构不像浏览器中的表单对象HTML。 Google 服务器中的对象中没有 "value" 属性。尽管元素有多个选项，但只有选择的选项才是与名称属性匹配并在对象中发送的值。

服务器接收到的对象并不是真正的 HTML "form" 对象。这是一个已更改的对象。

Answer 2

阅读用户 Sandy Good 的回复后，我从条件语句中删除了 .value。这是我成功的 .gs 代码。

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}




function uploadFiles(form) {

  try {    

  if(form.teachers == "teacher1") {   
    var dropbox = "Teacher1's Class";    
    }

else if(form.teachers == "teacher2") {
var dropbox = "Teacher2's Class";    
}

else if(form.teachers == "teacher3") {
var dropbox = "Teacher3's Class";    
}

else if(form.teachers == "teacher4") {
var dropbox = "Teacher4's Class";        
}

var folder, folders = DriveApp.getFoldersByName(dropbox);  

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

var blob = form.myFile; 
var fileBlob = form.myFile;
var fname = fileBlob.getName();
var newName = form.myLastName+form.myFirstName; // simple example
// extract extension using RegEx
// from 
var extensionfinder = /(?:\.([^.]+))?$/; 
var ext = extensionfinder(fname)[1];
fileBlob.setName(newName+'.'+ext);
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + form.myFirstName+form.myLastName);

  return "<p> Thanks for uploading a photo for the technology project, " + form.myFirstName + "!";
}


catch (error) {

return error.toString();
}

}

这是一个非常简单的修复，一切都按预期工作。这是让我的学生的文件井井有条的好方法。

如何将用户上传的文件定向到特定的 Google 驱动器文件夹

How to direct user-uploaded files to a specific Google Drive folder

javascript

directory

file-upload

google-apps-script