将文件附件功能添加到现有Google表单

时间:2015-07-01 09:05:50

标签: javascript google-apps-script google-form

我有一张Google表格 https://docs.google.com/forms/d/13bxRVQO5rEJr6dnkQL4ro2h15glJHNUe6YEzPmuwSdU/formResponse

我希望在表单的最后一页有文件上传功能。

我承认必须使用Google Apps脚本,我已准备好

脚本

https://script.google.com/macros/s/AKfycbyEsIpckunY7lMR2zIU4o5p7bwgh4nDuKqizNn8X7E/dev

现在的障碍是这两个是独立的组件,我想弄清楚如何将这两个组合在一起。

Google表单上必须有一个启动此脚本的触发器,那么应​​该怎么做呢?

我还尝试了一种非常愚蠢的方式在另一个网站上调用iFrame中的表单,但是后来尝试使用jQuery更改元素导致我出现了一个无法修复的CORS问题。

这种iframe方式出现在

server.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html')
  .setTitle('NewSchools Catapult: Invent 2015');
}

function uploadFiles(form) {

  try {

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

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

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);

    return "File uploaded successfully ! <input type='text' value='" + file.getUrl() + "' /><p>Kindly, Copy the text and paste it in the form<br/>";

  } catch (error) {

    return error.toString();
  }

}

form.html

<body>
<div class="container1">
<div class="container2">
<h2>NewSchools Catapult: Invent 2015</h2>
<p>Invent 2015: Planning Application for new schools launching in 2016</p>
<form id="myForm">
    <label>Your Name<strong> *</strong></label>
    <input style="margin-top:2px;" type="text" name="myName" required placeholder="Enter Your 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>
<div id="output"></div>
</div>
</div>

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

<style>
 input { display:block; margin: 20px; }
 label { display:block; margin-left: 20px; font-size:0.90rem;}
 body {background-color:#fefefe;font-family: Verdana;}
 strong {color:red;}
 .container1 {
  margin: 50px auto;
  width: 640px;
  background-color:#fff;
  border:2px #eee;
}

.container2 {
  position: relative;
  margin: 0 auto;
  padding: 20px 20px 20px;
  width: 100%;
  background-color:rgb(255,217,102);
  border-color:rgb(212,212,212);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.container2 h2 {
  color:rgb(74,134,232);
  font-weight: 600;
  font-style: normal;
  font-size:2.460rem;
}
.container2 p {
color:rgb(140,140,140);
font-size:0.78rem;
}
#output, #output p {
  font-size:
  color:rgb(97,97,97);
}
#output input { width:550px; }
</style>

0 个答案:

没有答案