2017-08-05 129 views
1

首先,我從Sandy Good在以下鏈接中撰寫的信息開始寫腳本。 Google Forms file upload complete example. 我做了她所說的一切,而且一切正常。fileBlob未從客戶端服務器端傳遞

以下是我已修改的.gs和.html文件,以通過Web表單詢問更多信息。

我下面的腳本的問題是fileBlob沒有從客戶端傳遞到服務器端。我曾嘗試與

google.script.run.withSuccessHandler(updateOutput).processForm($("#myForm")[0]); 

更換

google.script.run.withSuccessHandler(updateOutput).processForm(frmData); 

,但失敗了,給我下面的錯誤

Uncaught Error: Cannot find method createFile((class)). 

我發現是一個空fileBlob。

此外,我已經嘗試調用ID myFIle1並可以看到控制檯日誌中的信息,但仍然得到了與上面相同的錯誤。

可否請你看看我的腳本,並提供有關爲什麼fileBlob爲空的信息。我錯過了Google Developers網站或本網站上的內容嗎?由於

Code.gs

function doGet(e) { 
    return HtmlService.createTemplateFromFile('Form') 
    .evaluate() // evaluate MUST come before setting the Sandbox mode 
    .setTitle('Name To Appear in Browser Tab') 
    .setSandboxMode(HtmlService.SandboxMode.IFRAME); 
} 

function include(filename) { 
    return HtmlService.createHtmlOutputFromFile(filename) 
     .getContent(); 
} 

function processForm(theForm) { 

    var emailAddress = theForm.email; 
    var projectName = theForm.projectName; 
    var zone = theForm.zone; 
    var fileBlob = theForm.myFile1; 

    var fldrSssn = DriveApp.getFolderById('folder ID');//you need to put your upload folder id here 
    var igeURL = fldrSssn.createFile(fileBlob).getId(); 


Logger.log("Code completed") 
    return true; 
} 

Form.html

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    <?!= include('Stylesheet'); ?> 
    </head> 
    <body> 
    <?!= include('JavaScript'); ?> 

    <div id="GSAlogo">Insert Logo Band</div> 
    <table id="CompTool"> 
    <tr><th><h1 id="header">Header Name</h1></th></tr> 
    <tr><td id="toolInfo">Tool Info.</td></tr> 
     <form id="myForm"> 
     <tr><td><input name="email" type="email" placeholder="Insert email address"/></td></tr> 
     <tr><td>Select the project zone:</td></tr> 
     <tr><td><select> 
     <option name="zone" value="Arkansas Zone">Arkansas Zone</option> 
     <option name="zone" value="Austin Zone">Austin Zone</option> 
     <option name="zone" value="Border El Paso Zone">Border El Paso Zone</option> 
     <option name="zone" value="Border McAllen Zone">Border McAllen Zone</option> 
     <option name="zone" value="Border San Antonio Zone">Border San Antonio Zone</option> 
     <option name="zone" value="Dallas East Texas Zone">Dallas East Texas Zone</option> 
     <option name="zone" value="Fort Worth Zone">Fort Worth Zone</option> 
     <option name="zone" value="Houston Zone">Houston Zone</option> 
     <option name="zone" value="Louisiana Zone">Louisiana Zone</option> 
     <option name="zone" value="New Mexico Zone">New Mexico Zone</option> 
     <option name="zone" value="Oklahoma East Zone">Oklahoma East Zone</option> 
     <option name="zone" value="Oklahoma West Zone">Oklahoma West Zone</option> 
     <option name="zone" value="West Texas Zone">West Texas Zone</option> 
     </select></td></tr> 
     <tr><td><input type="text" name="projectName" value="test folder" placeholder="Please enter a project name"></td></tr> 
     <tr><td><input name="myFile1" id="myFile1" type="file" accept=".xls,.xlsx" /></td></tr><br/> 
     <tr><td><input type="button" id="formSave" value="Submit" style="background-color:#00449e; color:white;" onclick="disable(); fileUploadJS(this.parentNode)"/></td></tr><br/> 

     </form> 
     <br/> 
     <br/> 
     <tr><td id="status" style="display: none"> 
    <!-- div will be filled with innerHTML after form submission. --> 
    Uploading. Please wait... 
    </td></tr> 
</table> 
</body> 
</html> 

Javascript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
<script> 

function disable(){ 
    var fS = document.getElementById('formSave'); 
    fS.disabled = true; 
    fS.style.color = "black"; 
    fS.style.backgroundColor = "gray"; 
} 

function fileUploadJS(frmData) { 

    document.getElementById('status').style.display = 'inline'; 

/* 
    The script below worked for passing the information to the client side but the fileBlob is blank 


    var formData = document.getElementById('myForm'); 
    var email = formData[0].value; 
     console.log('email: ' + email); 
    var zone = formData[1].value; 
     console.log('zone: ' + zone); 
    var projectName = formData[2].value; 
     console.log('projectName: ' + projectName); 
    var fileBlob = formData[3]; 
     console.log('fileBlob: ' + fileBlob); 
    var fileName = fileBlob.name; 
     console.log('fileName: ' + fileName); 
    var fileType = fileBlob.type; 
     console.log('fileType: ' + fileType); 
    var fileValue = fileBlob.value; 
     console.log('fileValue: ' + fileValue); 
    var fileFiles = fileBlob.files; 
     console.log('fileFiles: ' + fileFiles); 

    var modFormData = [email, zone, projectName, fileBlob]; 
*/  


    google.script.run 
    .withSuccessHandler(updateOutput) 
    .processForm(frmData); 
} 
    // Javascript function called by "submit" button handler, 
    // to show results. 

    function updateOutput() { 

    var outputDiv = document.getElementById('status'); 
    outputDiv.innerHTML = "Your file was uploaded."; 
    console.log('script completed.') 
    } 

    function onFailure(error) { 
    var div = document.getElementById('status'); 
    div.innerHTML = "ERROR: " + error.message; 
    } 
</script> 
+0

你與上傳文件夾的ID替換FolderID? – Cooper

+0

是的,我確實在那個地方有一個谷歌驅動器文件夾ID。另外我是該文件夾的所有者。 – wjwelch1

+0

我發現你已經對javascript進行了很多更改。我可能會回到原來的狀態並緩慢地添加更改,確保在添加它時調試所有內容。我用過這個例子,它工作得很好。 – Cooper

回答

1

網絡首先,解決方案信息來自here

將表格標籤移動到表格標籤之外。

前:

<table id="CompTool"> 
<tr><th><h1 id="header">Header Name</h1></th></tr> 
<tr><td id="toolInfo">Tool Info.</td></tr> 
<form id="myForm"> 

後:

<form id="myForm"> 
<table id="CompTool"> 
<tr><th><h1 id="header">Header Name</h1></th></tr> 
<tr><td id="toolInfo">Tool Info.</td></tr> 

另外,我有一個名字添加到選擇標記,以便selectedd選擇將傳遞到服務器端腳本。

前:

<tr><td><select> 

後:

<tr><td><select name="zone"> 
相關問題