javascript - 调用脚本时出现 Google App Script Closure 错误

Question

这是我第一次涉足谷歌脚本，我有一个调用两个不同谷歌应用程序脚本的表单(都在 .gs 文件中)。一个上传文件，另一个将表单数据保存到谷歌电子表格。出于某种原因，我在调用文件上传脚本时出错

(Uncaught TypeError: Cannot read property 'closure_lm_407634' of null)

虽然上传数据的脚本工作正常。将表单数据保存到电子表格(可行):

google.script.run.withUserObject(data).saveToSheet(data);

-- 调用:

function saveToSheet(data) {
  var date = new Date();
  var sheet = SpreadsheetApp.openById(submissionSSKey);
  sheet
    .appendRow([date, data.name, data.email, data.headline,
      data.location, data.newsContent, data.websiteContent, data.expiry, data.fileUrl]); 
}

上传文件(不工作):

google.script.run
  .withUserObject(theForm)
  .withSuccessHandler(processForm)
  .uploadFile(theForm);

-- 调用:

function uploadFile(form) {
  var folder = DriveApp.getFolderById(folderId), doc = '', file = form.uploadedFile;
  if (file.getName()) { doc = folder.createFile(file); }
  return doc;
}

我这辈子都弄不明白为什么一个电话有效而另一个电话无效。我已经尝试了所有我能想到的调用上传脚本的方法，但没有任何效果。我试过删除用户对象和成功处理程序。

HTML:

<?!= include('styles'); ?>
<div id="container" class="col-lg-12 col-md-12 col-sm-12">
    <header class="col-lg-offset-3 col-md-offset-3"></header>
    <div class="col-lg-offset-3 col-lg-6 col-md-6 col-sm-12" id="form">
        <h1 class="text-center">
            SAS News Submission
        </h1>
        <span id="required-content">
            <sup>*</sup>
            Required
        </span>
        <br>
        <br>
        <form name="sas-form">
            <label for="name" class="required">Contact Person/ Source of News</label>
            <input type="text" name="name" value="test" class="form-control" id="name" required="required">
            <br>
            <label for="email" class="required">Contact Person's email (in case we have questions regarding your News content)</label>
            <input type="email" name="email" value="me@me.com" id="email" class="form-control" required="required">
            <br>

            <label for="headline" class="required">Headline (try to keep below 10 words if possible) </label>
            <input type="text" name="headline" value="headline" id="headline" class="form-control" required="required">
            <br>

            <label for="newsContent" class="required">News Content *Note all content must be fully edited to ensure posting</label>
                <textarea rows="5" cols="0" name="newsContent" class="form-control" id="newsContent" required="required">
                         Content
                </textarea>
            <br>

            <label class="required">Where would you like the News to be shared? (You may choose more than one)</label>
            <ul id="social-list">
                <li>
                    <input type="checkbox" name="newsletter" id="newsletter" value="newsletter">
                    <label for="newsletter"> Newsletter</label>
                </li>
                <li>
                    <input type="checkbox" name="social" id="social" value="social">
                    <label for="social"> Social Media (Facebook, LinkedIn, Twitter)</label>
                </li>
                <li>
                    <input type="checkbox" name="website" id="website" value="website" checked>
                    <label for="website"> Website </label>
                </li>
            </ul>
            <br>

            <label for="websiteContent">If you chose the website, please provide specific instructions on where you would like the content to be posted.</label>
            <br>
            <small>News and Events Page, Volunteer Page, Student Page, etc. Ex: Please post in the News and Events Page and send the link and headline out on social media.</small>
            <textarea rows="5" cols="0" name="websiteContent" id="websiteContent" class="form-control">website content</textarea>
            <br>
            <label for="expiry">If your content has an expiration date, please share that date below.</label>
            <input type="date" name="expiry" id="expiry" class="form-control">
            <br>
            <label>If you have files that need to be attached, pick them below.</label>
            <input type="file" name="uploadedFile" id="file">
            <br>
            <div id="not-valid"><span></span></div>
            <div id="error"><span>
              An error occurred, please try submitting again.
            </span></div>
            <div id="success"><span>
             Form submission was successful!  Thank you!
            </span></div>
            <input type="button" value="Submit" class="btn btn-primary" id="submit"
                   onclick="validateForm(this.parentNode)">
        </form>
    </div>
</div>
<footer>
<?!= include('javascript'); ?>
</footer>

<script>
    var validateForm = function(theForm)
    {
       var valid = true;
       $('#not-valid span').empty();
       $('input').removeClass('warning');

       if($('#name').val() == '')
       {
             $('#name').addClass('warning');
             $('#not-valid span').append('Please enter a name <br>');
             valid = false;
       }

       if($('#email').val() == '')
       {
             $('#email').addClass('warning');
             $('#not-valid span').append('Please enter an email <br>');
              valid = false;
       }

       if($('#headline').val() == '')
       {
           $('#headline').addClass('warning');
           $('#not-valid span').append('Please enter a headline <br>');
           valid = false;
       }

       if($('#newsContent').val() == '')
       {
           $('#newsContent').addClass('warning');
           $('#not-valid span').append('Please enter news content <br>');
           valid = false;
       }

       if(!$('#social').is(':checked') && !$('#website').is(':checked') && !$('#newsletter').is(':checked'))
       {
          $('#not-valid span').append('Please choose where you would like the news to be shared. <br>');
          $('#social-list').addClass('warning');
          valid = false;
       }


        if(valid)
        {
            google.script.run.withSuccessHandler(processForm).uploadFile(theForm)

        }
    };

    function processForm(file)
    {
        var fileUrl = file ? file.getUrl() : 'No file uploaded',
        location    = [];

        if($('#social').is(':checked'))
        {
            location.push('social');
        }

        if($('#newsletter').is(':checked'))
        {
            location.push('newletter');
        }

        if($('#website').is(':checked'))
        {
            location.push('website');
        }

        var data = {
        name:           $('#name').val(),
        email:          $('#email').val(),
        headline:       $('#headline').val(),
        location:       location.toString(),
        newsContent:    $('#newsContent').val(),
        websiteContent: $('#websiteContent').val(),
        expiry:         $('#expiry').val() ? $('#expiry').val()  : 'No expiration date selected',
        fileUrl:        fileUrl
        };

        google.script.run.saveToSheet(data);         

        clearForm();
        success();
    };

    var clearForm = function()
    {
      $("input[type=text], input[type=date], textarea, input[type=email], input[type=file]").val("");
      $("input[type=checkbox]").attr('checked', false);
      enableSubmit();
    };

    var success = function()
    {
      $('#success').show()
    };

    var enableSubmit = function()
    {
       $("#submit").prop('disabled', false);
    };
</script>

Answer 1

我能够重现您的错误。我不知道为什么会出现这个错误，但我找到了一种方法让它工作。

这是你需要做的:

在上层表单标签中加入一个id属性:

<form id="myForm">

• 使用输入标签删除按钮。

• 添加 <button>在表单的外部 标记。必须在表格之外。并使用 document.getElementById('myForm') 获取表格

  <form id="myForm">
    <input type="file" name="uploadedFile"> 
  </form>
  
  <button onclick="validateForm(document.getElementById('myForm'))">submit</button>
  

我已经测试过了。它获取文件，并将其发送到表单元素内的服务器。

您可以使用Logger.log()在不使用调试器的服务器代码中。

function uploadFile(form) {
  Logger.log('form: ' + form);
  Logger.log('form.uploadedFile: ' + form.uploadedFile);
  Logger.log('form.uploadedFile: ' + form.uploadedFile.getName());