只需提交一份表单,即可将多个文件上传到一个文件夹中 [英] Uploading multiple files in one folder with one form submission
问题描述
我创建了一个自定义Google表单,该表单允许登录的Google用户在该表单中包含多个文件. 这些文件将上传到Google云端硬盘中新创建的文件夹中. Google脚本使用当前用户的电子邮件地址+当前日期和时间作为文件夹名称.
I've created a custom Google Form which allows a logged in Google user to include multiple files with the form. The files are uploaded into a newly created folder in Google Drive. The Google Script uses the current user's email address + current date and time as the folder name.
由于使用forEach
函数,该脚本将每个文件上载到单独的文件夹(具有相同名称)中.
我想将每个提交的一个表单文件上传到一个文件夹中.
Because of the forEach
function, the script uploads each file into a separate folder (with the same name).
I would like to upload each file of one form submission into one folder.
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) { picUploadJs(myForm); }"></iframe>
<form id="myForm" class="col s12" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
<input placeholder="1234" name="entry.1234" id="user" type="text">
<label for="user">User:</label>
<input name="picToLoad" type="file" id="sampleFile" />
<div id="status" style="display: none">
Uploading. Please wait...
</div>
<button type="submit" name="action">Send</button> <!-- Modified -->
</form>
Javascript:
function picUploadJs(myForm) {
const f = document.getElementById("files");
[...f.files].forEach((file, i) => {
const fr = new FileReader();
fr.onload = (e) => {
const data = e.target.result.split(",");
const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
document.getElementById('status').style.display = 'inline';
google.script.run.withSuccessHandler(updateOutput).processForm(obj);
}
fr.readAsDataURL(file);
});
}
function updateOutput() {
var outputDiv = document.getElementById('status');
outputDiv.innerHTML = "The File was UPLOADED!";
window.location='https://Thankyou';
}
Google脚本:
function doGet(e) {
Logger.log("doGet done");
return HtmlService.createTemplateFromFile('test')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setTitle('Form')
//.setSandboxMode();//Defaults to IFRAME which is now the only mode available
}
function processForm(theForm) {
var dateTime = Utilities.formatDate(new Date(), "GMT+2", "dd-MM-yy_HH-mm");
var email = Session.getActiveUser().getEmail();
var parentFolder=DriveApp.getFolderById('xxxxx');
var newFolder=parentFolder.createFolder(email + "_" + dateTime);
var newFolderId = DriveApp.getFoldersByName(newFolder).next().getId();
var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
var fldrSssn = DriveApp.getFolderById(newFolderId);
fldrSssn.createFile(fileBlob);
return true;
}
推荐答案
- 提交文件后,您要在每次提交时创建一个新文件夹.
- 您要将多个文件上传到创建的文件夹中.
如果我的理解是正确的,那么该修改如何?请认为这只是几个答案之一.
If my understanding is correct, how about this modification? Please think of this as just one of several answers.
请进行如下修改.
<input name="picToLoad" type="file" id="sampleFile" />
到:
<input name="picToLoad" type="file" id="files" multiple />
Javascript:
请修改picUploadJs()
.
function picUploadJs(myForm) {
const f = document.getElementById("files");
google.script.run.withSuccessHandler((folderId) => { // Added
var files = [...f.files];
files.forEach((file, i) => {
const fr = new FileReader();
fr.onload = (e) => {
const data = e.target.result.split(",");
const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
document.getElementById('status').style.display = 'inline';
google.script.run.withSuccessHandler(() => {
if (i == files.length - 1) updateOutput();
}).processForm(obj, folderId); // Modified
}
fr.readAsDataURL(file);
});
}).createFolder();
}
Google Apps脚本:
我将processForm()
分离为processForm()
和createFolder()
.
// Added
function createFolder() {
var dateTime = Utilities.formatDate(new Date(), "GMT+2", "dd-MM-yy_HH-mm");
var email = Session.getActiveUser().getEmail();
var parentFolder = DriveApp.getFolderById('xxxxx');
var newFolder = parentFolder.createFolder(email + "_" + dateTime);
var newFolderId = DriveApp.getFoldersByName(newFolder).next().getId();
return newFolderId;
}
// Modified
function processForm(theForm, newFolderId) {
var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
var fldrSssn = DriveApp.getFolderById(newFolderId);
fldrSssn.createFile(fileBlob);
return true;
}
注意:
-
在您的HTML中,第一行如下.
Note:
In your HTML, the top line is as follows.
<form id="myForm" target="hidden_iframe" onsubmit="submitted=true;">
来自您先前的问题,如果您使用的是以下几行,请更新您的问题.我以为您正在使用以下脚本.
From your previous question, if you are using the following lines, please update your question. I supposed that you are using the following script.
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) { picUploadJs(myForm); }"></iframe> <form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
如果这不是您想要的结果,我表示歉意.
If this was not the result you want, I apologize.
这篇关于只需提交一份表单,即可将多个文件上传到一个文件夹中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!