将HTML表单文件上传到Google云端硬盘并将网址保存到谷歌表 [英] HTML form file upload to Google Drive and save URL to google sheet
问题描述
我对谷歌脚本的世界很陌生，并且已经找到了一些关于如何做的很好的教程：
i用HTML格式将文件上传到Google Drive
ii将新行添加到谷歌表。
基本上，我试图编写一个基本的HTML表单，它收集几个文本字段和文件附件，其中文件附件上传到我的谷歌驱动器和URL以及其他形式的文本字段都附加了Google表格。
以下是我正在使用的HTML表单（基于我找到的教程）：
<！ - 包含Google CSS包 - >
< link rel =stylesheethref =https://ssl.gstatic.com/docs/script/css/add-ons.css>
<！ - 您也可以包含您自己的CSS样式 - >
< style>
form {margin：40px auto; }
input {display：inline-block; margin：20px; }
< / style>
< script>
//函数将在表单提交后调用
function uploadFile（）{
document.getElementById（'uploadFile'）。value =正在上传文件.. ;
google.script.run
.withSuccessHandler（fileUploaded）
.uploadFiles（document.getElementById（labnol））;
返回false;
}
//这个函数在Google脚本执行
函数fileUploaded（status）{
document.getElementById（'labnol'）。style .display ='none';
document.getElementById（'output'）。innerHTML = status;
}
< / script>
<！ - 这是HTML表格 - >
< form id =labnol>
<！ - 文字输入栏位 - >
< input type =textid =nameFieldname =myNameplaceholder =Your name ..>
< input type =emailid =emailFieldname =myEmailplaceholder =Your email ..>
<！ - 文件输入字段 - >
< input type =filename =myFile>
<！ - 提交按钮。它在点击 - >时调用服务器端函数uploadfiles（）
< input type =submitid =uploadFilevalue =Upload File
onclick =this.value ='上传..'; uploadFile（）;>
< / form>
<！ - 这里将显示表单提交的结果 - >
< div id =output>< / div>
这里是google脚本（同样，基于博客上有用的教程）
/ *脚本部署为Web应用程序并呈现表单* /
函数doGet（e）{
返回HtmlService.createHtmlOutputFromFile（'form.html'）
.setSandboxMode（HtmlService.SandboxMode.NATIVE）;
//这是非常重要的，因为在IFRAME沙箱模式下文件上传失败。
}
/ *这个函数将处理提交的表单* /
function uploadFiles（form）{
try {
/ *保存文件的Drive文件夹的名称* /
var dropbox =测试表单提交;
var文件夹，文件夹= DriveApp.getFoldersByName（dropbox）;
$ b $ *找到文件夹，创建文件夹不存在* /
if（folders.hasNext（））{
folder = folders.next（）;
} else {
folder = DriveApp.createFolder（dropbox）;
}
/ *通过表单获得上传的文件blob * /
var blob = form.myFile;
var file = folder.createFile（blob）;
//在图纸
中分配提交的变量var namerecord = form.myName;
var emailrecord = form.myEmail;
/ *将文件描述设置为上传者的名称* /
file.setDescription（Uploaded by+ form.myName）;
/ *在Google Drive * /
返回File uploaded successfully文件后，返回文件的下载网址+ file.getUrl（）;
var uploadURL = file.getUrl（）;
$ b //
} catch（错误）{
/ *如果出现错误，请显示错误消息* /
返回error.toString（）;
}
//打开基于URL
的电子表格var googsheet = SpreadsheetApp.openByUrl（'https://docs.google.com/spreadsheets/d/17fuu1vUuxgCgs1TpSGpWDNxMHX3AEFscmjX156HQ5_U/edit？ USP =共享'）;
Logger.log（googsheet.getName（））;
var sheet = googsheet.getSheets（）[0];
sheet.appendRow（[James，jim，abc]）;
}
我的直觉很简单去掉一些代码行来将表单数据添加到指定的表单中，但它不起作用，我必须做出错误的事情：S
任何建议将不胜感激到一位对网络编程不熟悉的商业分析师：/ b / b
$ b
谢谢 p>我有同样的问题，并通过此链接解决了我的问题：
这是来自google脚本示例的更新，用于上传Google表格和宏的文件。
-
在定义提交按钮的HTML行中，更改
id =uploadFile code> toid =uploadFileButton（提交按钮的id和函数uploadFile（）） -
还可以通过添加额外的返回值来更改onclick触发器false：
onclick = this.value ='Uploading ..'; uploadFile（）; return false; -
uploadFile（）函数，更改
document.getElementById（'uploadFile'）。value =正在上传文件..;
至
document.getElementById（'uploadFileButton'）。value =上传文件..;
完整的主题链接： https://code.google.com/p/google-apps -script-issues / issues / detail？id = 6177
来自委内瑞拉的问候
：抱歉我的英文不好
I'm new to the world of google scripting, and have found some great tutorials on how to either: i Upload a file to Google Drive with HTML form ii Append new rows to a google sheet.
Essentially I am trying to to write a basic HTML form that collects a few text fields and file attachment, where the file attachment is uploaded to my google drive and the URL along with the other form text fields are appended a Google Sheet.
Here is the HTML form I am working with (based on a tutorial I found):
<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- You can also include your own CSS styles -->
<style>
form { margin: 40px auto; }
input { display:inline-block; margin: 20px; }
</style>
<script>
// The function will be called after the form is submitted
function uploadFile() {
document.getElementById('uploadFile').value = "Uploading File..";
google.script.run
.withSuccessHandler(fileUploaded)
.uploadFiles(document.getElementById("labnol"));
return false;
}
// This function will be called after the Google Script has executed
function fileUploaded(status) {
document.getElementById('labnol').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<!-- This is the HTML form -->
<form id="labnol">
<!-- Text input fields -->
<input type="text" id="nameField" name="myName" placeholder="Your name..">
<input type="email" id="emailField" name="myEmail" placeholder="Your email..">
<!-- File input filed -->
<input type="file" name="myFile">
<!-- The submit button. It calls the server side function uploadfiles() on click -->
<input type="submit" id="uploadFile" value="Upload File"
onclick="this.value='Uploading..';uploadFile();">
</form>
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>
And here is the google script (again, based on a useful tutorial on a blog)
/* The script is deployed as a web app and renders the form */
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
// This is important as file upload fail in IFRAME Sandbox mode.
}
/* This function will process the submitted form */
function uploadFiles(form) {
try {
/* Name of the Drive folder where the files should be saved */
var dropbox = "Test Form Submissions";
var folder, folders = DriveApp.getFoldersByName(dropbox);
/* Find the folder, create if the folder does not exist */
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
/* Get the file uploaded though the form as a blob */
var blob = form.myFile;
var file = folder.createFile(blob);
//Allocate variables for submissions in sheet
var namerecord = form.myName;
var emailrecord = form.myEmail;
/* Set the file description as the name of the uploader */
file.setDescription("Uploaded by " + form.myName);
/* Return the download URL of the file once its on Google Drive */
return "File uploaded successfully " + file.getUrl();
var uploadURL = file.getUrl();
//
} catch (error) {
/* If there's an error, show the error message */
return error.toString();
}
//Open spreadsheet based on URL
var googsheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/17fuu1vUuxgCgs1TpSGpWDNxMHX3AEFscmjX156HQ5_U/edit?usp=sharing');
Logger.log(googsheet.getName());
var sheet = googsheet.getSheets()[0];
sheet.appendRow(["James", "jim", "abc"]);
}
My intuition was simply to slip some lines of code in to add the form data to the specified sheet but it's not working and I must be doing something wrong :S
Any advice would be greatly appreciated to an ignorant Business Analyst new to web programming :/
Thanks
i had the same problem, and with this link solved my issue :
this a update from google script example for upload file with google sheets and Macros.
In the line in the HTML defining the submit button, change
id="uploadFile"toid="uploadFileButton"(there was possibly a collision between the id of the submit button and the functionuploadFile())and also change the onclick trigger by adding an extra return false:
onclick="this.value='Uploading..';uploadFile();return false;"Correspondingly, in the code defining the uploadFile() function, change
document.getElementById('uploadFile').value = "Uploading File..";to
document.getElementById('uploadFileButton').value = "Uploading File..";
a complete thread link: https://code.google.com/p/google-apps-script-issues/issues/detail?id=6177
Regards From Venezuela
NOTE: Sorry for my bad English
这篇关于将HTML表单文件上传到Google云端硬盘并将网址保存到谷歌表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
