Блог

Главная - Вопросы по программированию - Загрузите файлы на Google Диск из HTML-формы и сохраните URL-адрес в Google листе

Загрузите файлы на Google Диск из HTML-формы и сохраните URL-адрес в Google листе

#javascript #html #forms #google-drive-api

Вопрос:

Я совершенно новичок в этом деле и совершенно ничего в нем не понимаю. Я использовал несколько учебных пособий, чтобы написать это, но я не знаю, как получить ссылку на загруженный документ в Google листе.

Это код скрипта приложения:

 function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


// App Script function to save data to sheet
function saveData(data) {
  var sheet = SpreadsheetApp.getActiveSheet();
  sheet.appendRow(data);

}



function uploadFiles(data)
{
 var file = data.myFile;
 var folder = DriveApp.getFolderById('1NWq9CoBxzYumYQzTlCjLMS95Y6G2NY6X');
 var createFile = folder.createFile(file);
 return createFile.getUrl();
 var uploadURL = file.getUrl();
  
}

И вот HTML-код в: index.html 

 <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <br>
        <h1>Custom HTML Forms to Google Sheet</h1>
      <br>
      <div id="form">
        <form>
          <div class="form-group">
            <label for="Name">Name</label>
            <input type="text" class="form-control form-data" id="Name">
          </div>
          <div class="form-group">
            <label for="Email">Email</label>
            <input type="text" class="form-control form-data" id="Email">
          </div>
          <div class="form-group">
            <label for="Age">Age</label>
            <input type="text" class="form-control form-data" id="Age">
          </div>
          <div class="form-group">
            <label for="Company">Company</label>
            <input type="text" class="form-control form-data" id="Company">
          </div>
          <div class="form-group">
            <label for="Mob">Mob</label>
            <input type="text" class="form-control form-data" id="Mob">
          </div>
          <div>
            <input type="file" name="myFile">
          </div>
          <button type="button" class="btn btn-primary" onclick="send_data()" id="submitBtn" value="Upload Files">Submit</button>
          
        </form>
      </div>

      <!-- Optional if you want to give a completion feedback! -->
      <div id="completion-msg" style="display: none;">
        Thank you for completing this form!
        <label id="resp"></label>
      </div>

    </div>

    <script>
      document.getElementById('submitBtn').addEventListener('click',
      function send_data(){
        google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
        var form_data = document.getElementsByClassName("form-data"); //retrieve filled form data
        var i;
        var data = [];
        for(i=0; i<form_data.length; i  ){
          data.push(form_data[i].value);
        }
        
        
        google.script.run.saveData(data); // send to google app script
        document.getElementById("form").style.display = "none"; // make form invisible
        document.getElementById("completion-msg").style.display = "block"; // Optional if you want to give a completion feedback!
      })
   function onSuccess(data){
          document.getElementById('resp').innerHTML = "File Uploaded to the path "  data;
        }
    </script>

  </body>
</html>

Это совершенно нормально, если вы скажете, что нет никакого способа превратить этот код во что-то, что работает, но, пожалуйста, скажите, как я мог бы решить это в другом месте.
Я был бы очень признателен, если бы вы мне помогли. Спасибо!

Комментарии:

1. При беглом взгляде я вижу, что у вас есть 2 функции «доГет». Как вы узнаете, какое из них выполняется?

2. Я не. Я использовал два учебных пособия и объединил их вместе. Из-за этого существуют две функции «догета». Какие из них я должен удалить?

3. У вас должен быть только один, выберите один.

4. Я сделал это, но это все еще не работает :/

Метки: