Как связать html обратно в скрипт-скрипт загрузки Google Drive

Я изначально видел этот код в интернете, который позволяет пользователям загружать файлы на свой google Диск через страницу. Скрипт автоматически создает папку

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

Таким образом, Вы заметите, что изначально коды должны быть развернуты как веб-приложение, но я настроил его, чтобы он работал на боковой панели. Html-часть загружается нормально, вы можете фактически ввести все данные, но как только вы нажмете форму загрузки, она просто возвращает пустую страницу. Я уверен, что это потому, что кнопка click не подключается к скрипту снова, что делает его неудачным

Это исходный код

/* 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>

Поэтому из исходного кода я подправил его, чтобы заменить верхнюю часть

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 «форма», но появляется ошибка, что при нажатии upload, он не работает.

Я предполагаю, что это часть

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

так onClickкак, он должен запустить функциюuploadFile(), но она не работает.
Я пытаюсь понять это в течение некоторого времени, но не могу, кажется, сделать эту последнюю часть работы. Поэтому я здесь спрашиваю, Может ли кто-нибудь помочь мне решить эту проблему с кодированием

1 ответ

  1. На основе этой документации: служба HTML: связь с функциями сервера

    google.script.run является асинхронным клиентским API JavaScript, который позволяет страницам HTML-службы вызывать серверные функции сценариев приложений. В следующем примере показана основная функциональностьgoogle.script.runвызов функции на сервере из клиентского JavaScript.

    Проверьте, как форма взаимодействует со сценарием приложений. При вызове функции сервера с элементом формы в качестве параметра форма становится единым объектом с именами полей в качестве ключей и значениями полей в качестве значений. Все значения преобразуются в строки, за исключением содержимого полей ввода файлов, которые становятся Blobобъектами.

    Вот там образец кода:

    <!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
        <script>
          // Prevent forms from submitting.
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit', function(event) {
                event.preventDefault();
              });
            }
          }
          window.addEventListener('load', preventFormSubmit);
    
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
          }
          function updateUrl(url) {
            var div = document.getElementById('output');
            div.innerHTML = '<a href="' + url + '">Got it!</a>';
          }
        </script>
      </head>
      <body>
        <form id="myForm" onsubmit="handleFormSubmit(this)">
          <input name="myFile" type="file" />
          <input type="submit" value="Submit" />
        </form>
        <div id="output"></div>
     </body>
    </html>
    

    Лучше всего упростить вызов функции в OnSubmitсобытии. Кроме того , вы можете отлаживать сценарий с помощью транскрипта выполнения, который представляет собой запись каждого вызова службы сценариев Google Apps, выполняемого во время выполнения сценария.

    Надеюсь, это поможет!