如何将html链接回脚本 - 上传脚本Google Drive

时间:2016-10-05 08:10:04

标签: javascript google-apps-script google-sheets spreadsheet google-spreadsheet-api

我最初在线看到此代码,允许用户通过页面将文件上传到谷歌驱动器。该脚本自动创建一个文件夹

// https://script.google.com/d/12EnDFZrsfpBubZ9lM7pnHIsn9M49_vyXm0TLBQ_pyx_ViAJH3HXgkoe9/edit?newcopy=true

所以你会注意到,最初这些代码应该被部署为webapp,但我调整它以使其在侧边栏上运行。 html部分加载正常,你可以实际键入所有数据,但是一旦你点击上传表单,它只返回一个空白页面。我非常确信它是因为点击按钮没有再次连接到脚本,使其失败

这是原始代码

/* 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 = "Database";
;
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);    

// Set the file description as the name of the uploader 
file.setName(form.myCode + " "  + form.myfilename + " - " + form.myID + " - " + form.myName); 
file.setDescription("Uploaded by " + form.myName + " - " + form.myEmail);

// Return the download URL of the file once its on Google Drive 
return "File uploaded successfully, please check your drive with this link for confirmation: " + file.getUrl();

 } catch (error) {

// If there's an error, show the error message 
return error.toString();
}

}

和HTML在这里



<!-- 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 20px 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 -->
  File Upload<br>
  <br>
  Your Name:<br>
  <input type="text" name="myName" placeholder="Your name.."> <br><br>
  Email Address: <br>
  <input type="email" name="myEmail" placeholder="Your email.."> <br><br>
  ID? <br>
  <input type="number" name="myID" placeholder="Your ID.."> <br><br>
  Upload Code: <br>
  <input type="text" name="myCode" placeholder="Your Upload code.."> <br><br>
  File Name: <br>
  <input type="text" name="myfilename" placeholder="Your File Name">  <br><br>
 
  <!-- File input filed -->
  <input type="file" name="myFile">
 
  <!-- The submit button. It calls the server side function uploadfiles() on click -->
  <br>
  <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>
&#13;
&#13;
&#13;

所以从原始代码我调整它来替换顶部

function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile('form')
  .setTitle('Upload Form')
  .setWidth(250);
 SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
  .showSidebar(html);
}

// This function will process the submitted form 
function uploadFile(form) {

 try {

// Name of the Drive folder where the files should be saved 
    var dropbox = "Database";
 ;
  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);    

// Set the file description as the name of the uploader 
file.setName(form.myCode + " "  + form.myfilename + " - " + form.myID + " - " + form.myName); 
file.setDescription("Uploaded by " + form.myName + " - " + form.myEmail);

// Return the download URL of the file once its on Google Drive 
return "File uploaded successfully, please check your drive with this link for confirmation: " + file.getUrl();

 } catch (error) {

 // If there's an error, show the error message 
return error.toString();
 }

}

所以我基本上用脚本替换了顶部部分来加载侧边栏和html&#34;表格&#34;但出现的错误是点击上传后,它不起作用。

我猜这是

部分
 <input type="submit" id="uploadFile" value="Upload File" 
     onclick="this.value='Uploading..';uploadFile();">

onClick起,它应该运行函数uploadFile(),但它不起作用。 我已经试图解决这个问题很长一段时间但似乎无法使这最后一部分工作。所以我在这里询问是否有人可以帮助我解决这些编码问题

1 个答案:

答案 0 :(得分:0)

基于此文档:HTML服务:与服务器功能通信

  

google.script.run是一个异步客户端JavaScript API,允许HTML服务页面调用服务器端的Apps脚本功能。以下示例显示了来自客户端JavaScript的 {"result":[{"mailId":"nikhilmanali@gmail.com"}]} - calling a function on the server的最基本功能。

检查Form与Apps脚本的通信方式。如果使用表单元素作为参数调用服务器函数,则表单将成为单个对象,其字段名称为键,字段值为值。这些值都转换为字符串,但文件输入字段的内容除外,这些字段变为Blob个对象。

以下是示例代码:

EditText et1,et2,et3,et4,et5;
    Button bu1;
    String mailCheck;
    String mail;
  //  TextView alert;
    String name,password,mailId,repass,number;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        new AsyncTaskParse().execute();



        Toast.makeText(MainActivity.this,mailCheck,Toast.LENGTH_SHORT).show();
        et1=(EditText)findViewById(R.id.et1);
        et2=(EditText)findViewById(R.id.et2);
        et3=(EditText)findViewById(R.id.et3);
        et4=(EditText)findViewById(R.id.et4);
        et5=(EditText)findViewById(R.id.et5);
        name=et1.getText().toString();
        password=et2.getText().toString();
       /// alert=(TextView)findViewById(R.id.alert);4
        repass=et4.getText().toString();


            mailId=et3.getText().toString();
            number=et5.getText().toString();




        bu1=(Button)findViewById(R.id.bu1);


        bu1.setOnClickListener(new View.OnClickListener() {




            public void onClick(View v) {
                String t = et1.getText().toString();
                String t5 = et5.getText().toString();
                String one = et2.getText().toString();
                String two = et4.getText().toString();
                 mail = et3.getText().toString();




if(one.equals(two) ){

                    if (one.equals(two) && isEmailValid(mail,et3)) {


                            isInternetOn();



                    }
} else {
                        et4.setError(Html.fromHtml("<font color='#000'>Password not Match!</font>"));
                         focus(et4);
                    }
                }
            }
        });

    }








////////////////////////


    public class AsyncTaskParse extends AsyncTask<String, String, String> {

        final String TAG = "AsyncTaskParseJson.java";

        // set your json string url here

        String yourJsonStringUrl = "http://www.example.com/checkMail.php?mailId="+mailId;

        // contacts JSONArray
        JSONArray dataJsonArr = null;
        @Override
        protected void onPreExecute() {}


        protected String doInBackground(String... arg0) {

            try {
                JSONParser jParser = new JSONParser();

                // get json string from url

                JSONObject json = jParser.getJSONFromUrl(yourJsonStringUrl);


                if(json!=null) {
                    // get the array of users
                    dataJsonArr = json.getJSONArray("result");
                    JSONObject c = dataJsonArr.getJSONObject(0);
                    //    na=c.getString("avg");

                    mailCheck = c.getString("mailId");

                }

            } catch (JSONException e) {
                e.printStackTrace();
            }


            return null;
        }

    }

最好是简化在google.script.run事件中调用函数的方式。此外,您可以使用Execution Transcript调试脚本,这是在脚本运行时对每次调用Google Apps脚本服务的记录。

希望这有帮助!