如何直接用户上传的文件到一个特定的谷歌驱动器文件夹
How to direct user-uploaded files to a specific Google Drive folder
我是一个编程新手,当我面对一个问题,需要一个独特的解决方案时,我会转向不同的代码和应用程序。我是一名初级计算机教师,一直在寻找一种方法,让学生们从家里或手机上上传文件,并进入我的Google Drive账户。我在labnol.org1上找到了一个使用Google Apps Script的解决方案。
我遵循了所有的指示,一切都很顺利。文件成功上传到我的Google Drive帐户。我最终希望能够根据用户从表单中输入的信息重命名文件。我在这个网站上找到了一个解决办法。我对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 Script
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 http://stackoverflow.com/a/680982/1677912
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,我希望他的文件上传到我的Drive Account中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和谷歌应用程序脚本的工作,所以我已经尝试了很多事情,失败的悲惨。这就像在黑暗中工作。
我最大的障碍是从"teachers"
元素访问用户输入的选项值。我发现关于这个问题的大多数答案包括创建一个条件语句,这是我使用If (document.GetElementById('teachers').value == "teacher1") {function
尝试的第一件事……等等。然而,我一直得到"document is not defined"错误,我知道这是因为我在.gs文件中编写脚本,而不是html文件。然而,我注意到用户输入的文本可以通过form.myFirstName+form.myLastName
访问。所以我尝试用form.teachers.value
代替document.GetElementById
方法。
我花了很多时间在这上面(我承认,暑假期间学习新东西很有趣),但我最终决定寻求一些帮助。我搜索了这个网站和其他网站来学习如何做到这一点。我怀疑这是一个如此简单的问题,需要解决,我太缺乏经验,甚至没有注意到。
我还考虑过为每个单独的类创建不同的应用程序脚本,创建一个"老师的名字"文本输入,以及其他一些东西来保持这些文件的组织,如果我不能弄清楚这一点。
提前感谢您的帮助。
在服务器端.gs
代码中,尝试:
var whichTeacher = form.teachers;
Logger.log("whichTeacher: " + whichTeacher);//VIEW, LOGS to see print out to log
要查看form
对象中的所有内容,您可以循环遍历对象中的所有内容,并记录值,然后将打印出来的内容查看到log:
for (var key in form) {
Logger.log('key is: ' + key);
Logger.log('value is: ' + form[key]);
};
Apps Script在将表单对象发送到服务器之前修改它。服务器接收的对象的结构与浏览器HTML中的表单对象不同。在Google服务器中的对象中没有"value"属性。尽管元素有多个选项,但只有被选中的选项是与name属性匹配并在对象中发送的值。
服务器接收到的对象并不是一个真正的HTML"表单"对象。这是一个被改变的对象
在阅读了用户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 http://stackoverflow.com/a/680982/1677912
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();
}
}
这是一个非常简单的修复,一切工作如预期。这是一个很好的方法来保持我的学生的文件组织。
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何将所有JS文件连接到一个文件夹中
- 文件的节点自动化移动到另一个文件夹中
- 用于文件移动到另一个文件夹的Javascript自动化
- 在另一个文件夹中显示React组件
- 从路径中删除最后一个文件夹
- Gulp.js - 无法将生成的文件从一个文件夹复制到另一个文件夹
- 如何使用Gulp编译并移动到另一个文件夹一堆sass文件
- 科尔多瓦使用SplashScreen插件在另一个文件夹中查找cordova_plugins.js
- 如何加载一个文件夹中可用的脚本文件,而不是加载HTML文件
- 如何从一个文件夹加载所有内容
- 将系统.js文件从jspm_packages移动到另一个文件夹,无法解析配置中的软件包
- 如何在Symfony中读取另一个文件夹中的内容json文件
- 使用 JavaScript 将文件从一个文件夹复制到另一个文件夹
- 如何使用JavaScript API将Google云端硬盘文档从一个文件夹复制到另一个文件夹
- 是否已经有办法让用户在Chrome上选择一个文件夹
- 如何让用户使用 javascript 在其本地计算机上选择一个文件夹(而不是文件)
- 404在nodejs+Ionic应用程序中从index.html中的另一个文件夹导入js文件时出错
- javascript或jquery将pdf文件从一个文件夹移动到另一个文件夹
- 如何将“;“大”;图像和“;“小”;图像到一个文件夹-Caroufredsel缩略图