Пытаюсь захватить текстовый ввод html-формы из скриптов Google Apps для входа в электронную таблицу

-----Обновленный рабочий код находится внизу -----

-----Обновлено Git Here --------

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

Я сделал гит https://gist.github.com/4n7h0ny/c879c72888db1a2cd891f6f83db7e332

URL веб-приложения — https://script.google.com/macros/s/AKfycby59WOCrFAUhM3o13PGiDPMyrkp9qeFhuqKnoSJBHTn6rBOfJroue29TU-lgxlsgRAX6g/exec

Я хочу захватить эту часть html-формы

type  <TEXTAREA name = "projectDescription" 
          id = "projectDesctiptionIndex"
          placeholder = "Index"
          style  = "width:400px; height:200px;"
          ></TEXTAREA>here

Code.gs код

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


    var sid = '1eQIZESbrhst6FUza8t_SEwy5bnKBTarNwDDuIVKsLiw';  //URL OF GOOGLE SHEET;


function uploadFileToDrive(base64Data, fileName) {
  try{
    var splitBase = base64Data.split(','),
        type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName);

    
    var folder = DriveApp.getFolderById("1h7hMHz7XD1oFKFY_jotrcVdq6Bn0uXfY");

  

    var file = folder.createFile(ss);

    console.info(file);

    var ssss = SpreadsheetApp.openById(sid).getSheetByName("Sheet1");
    ssss.appendRow([file.getName(), file.getUrl(), Date()]);

   

    return file.getName();
  }catch(e){
    return 'Error: ' + e.toString();
  }
}

form.html код

<body>
  <div id = "formcontainer">



    <br><br>


    <form id = "myForm"> 
      <div>


      </div>
      <div>

      <label for = "fileText" id = "fileTextIndex" >Index:</label>

          <TEXTAREA name = "projectDescription" 
          id = "projectDesctiptionIndex"
          placeholder = "Index"
          style  = "width:400px; height:200px;"
          ></TEXTAREA>


      </div> 
      <br>



      <label for = "myFile">Upload Attachment(s):</label>
      <br>


      <input type = "file" name = "filename" id = "myFile" multiple>

      <input type = "button" value = "Submit" onclick = "iteratorFileUpload()">


    </form>
  </div>

  <div id = "output"></div>
<div id = "progressbar">
    <div class = "progress-label"></div>
</div>

<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>

var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;

// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
    var allFiles = document.getElementById('myFile').files;

    if (allFiles.length == 0) {
        alert('No file selected!');
    } else {
        //Show Progress Bar

        numUploads.total = allFiles.length;
        $('#progressbar').progressbar({
        value : false
        });//.append("<div class='caption'>37%</div>");
        $(".progress-label").html('Preparing files for upload');
        // Send each file at a time
        for (var i = 0; i < allFiles.length; i++) {
            console.info(i);
            sendFileToDrive(allFiles[i]);
        }
    }
}

function sendFileToDrive(file) {
        var reader = new FileReader();
    reader.onload = function (e) {
        var content = reader.result;
        console.info('Sending ' + file.name);
        var currFolder = 'Something';
          
        
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
    }
    reader.readAsDataURL(file);
}

function updateProgressbar( idUpdate ){
   console.info('Received: ' + idUpdate);
   numUploads.done++;
   var porc = Math.ceil((numUploads.done / numUploads.total)*100);
   $("#progressbar").progressbar({value: porc });
   $(".progress-label").text(numUploads.done +'/'+ numUploads.total);
   if ( numUploads.done == numUploads.total ){
      //uploadsFinished();
      numUploads.done = 0;
   };
}
</script>

  <script>
    function fileUploaded(status) {
      document.getElementById('myForm').style.display = 'none';
      document.getElementById('output').innerHTML = status;
    }

  </script>

  <style>
    body {
      max-width: 400px;
      padding: 20px;
      margin: auto;
    }
    input {
      display: inline-block;
      width: 100%;
      padding: 5px 0px 5px 5px;
      margin-bottom: 10px;
      -webkit-box-sizing: border-box;
      ‌ -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    select {
      margin: 5px 0px 15px 0px;
    }
    input[type = "submit"] {
      width: auto !important;
      display: block !important;
    }
    input[type = "file"] {
      padding: 5px 0px 15px 0px !important;
    }
#progressbar{
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
    vertical-align: middle;

}
.progress-label {
      float: left;
margin-top: 5px;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff;
          width: 100%;
    height: 100%;
    position: absolute;
    vertical-align: middle;
    }
  </style>
</body>

Я пытался использовать

document.getElementById('projectDesctiptionIndex').innerHTLM = PROJECTDESCRIPTION

но я недостаточно понимаю этот метод, чтобы вернуться к стороне JS, и после 80+ итераций неудач я просто не могу понять это самостоятельно на данный момент.

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

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


    var sid = '1eQIZESbrhst6FUza8t_SEwy5bnKBTarNwDDuIVKsLiw';  //ID OF GOOGLE SHEET;


function uploadFileToDrive(base64Data, fileName,textY, textIndex, textDescription) {
  try{
    var splitBase = base64Data.split(','),
        type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName);

    
    var folder = DriveApp.getFolderById("1h7hMHz7XD1oFKFY_jotrcVdq6Bn0uXfY");  //Google Drive folder ID of the folder the files get uploaded to
  
  
       
  
    
    var file = folder.createFile(ss);

    console.info(file);

    var ssss = SpreadsheetApp.openById(sid).getSheetByName("Sheet4");


    console.info(decodeURI(textDescription));

    ssss.appendRow([file.getName(), file.getUrl(), Date(), file.getId(), "0", textDescription, textIndex]);
 
    return file.getName();
      }catch(e){
    return 'Error: ' + e.toString();
  }

  
}

form.html


<body>
  <div id = "formcontainer">



  


    <form id = "myForm"> 
      <br>
      <div>

             <label for = "projectDescription" >Index:</label>
             <input type = "text" name = "projectDescription1" id = "idIndex" placeholder = "Index">


             <label for = "projectDescription555" >Description:</label>
             <input type = "text" name = "projectDescription5551" id = "idText" placeholder = "Description">
             </div>
          
            


   
     



      <!-- <label for = "myFile">Upload Attachment(s):</label> -->
   

      <br>


      <input type = "file" name = "filename" id = "myFile" multiple>

      <input type = "button" value = "Submit" onclick = "iteratorFileUpload()">


    </form>
  </div>

  <div id = "output"></div>
<div id = "progressbar">
    <div class = "progress-label"></div>
</div>

<script src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>

var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;

// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
    var allFiles = document.getElementById('myFile').files;

    if (allFiles.length == 0) {
        alert('No file selected!');
    } else {
        //Show Progress Bar

        numUploads.total = allFiles.length;
        $('#progressbar').progressbar({
        value : false
        });//.append("<div class='caption'>37%</div>");
        $(".progress-label").html('Preparing files for upload');
        // Send each file at a time
        for (var i = 0; i < allFiles.length; i++) {
            console.info(i);
            sendFileToDrive(allFiles[i]);
        }
    }
}

function sendFileToDrive(file) {
        var reader = new FileReader();
    reader.onload = function (e) {
        var content = reader.result;
        console.info('Sending ' + file.name);
        var currFolder = 'Something';
          var textIndex = document.getElementById("idIndex").value;
          var textDescription = document.getElementById("idText").value;
          var textY = document.getElementById("idText").value;
  
        
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder, textIndex, textDescription, textY);
    }
    reader.readAsDataURL(file);
}

function updateProgressbar( idUpdate ){
   console.info('Received: ' + idUpdate);
   numUploads.done++;
   var porc = Math.ceil((numUploads.done / numUploads.total)*100);
   $("#progressbar").progressbar({value: porc });
   $(".progress-label").text(numUploads.done +'/'+ numUploads.total);
      if ( numUploads.done == numUploads.total ){

   var text = document.getElementById("idText").value;
   var text1 = document.getElementById("idIndex").value;
   google.script.run.putText(text, text1);

   uploadsFinished();
   numUploads.done = 0;
};
 
 
 
  //  if ( numUploads.done == numUploads.total ){
  //     //uploadsFinished();
  //     numUploads.done = 0;
  //  };
}
</script>

  <script>
    function fileUploaded(status) {
      document.getElementById('myForm').style.display = 'none';
      document.getElementById('output').innerHTML = status;
    }

  </script>

  <style>
    body {
      max-width: 400px;
      padding: 20px;
      margin: auto;
    }
    input {
      display: inline-block;
      width: 100%;
      padding: 5px 0px 5px 5px;
      margin-bottom: 10px;
      -webkit-box-sizing: border-box;
      ‌ -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    select {
      margin: 5px 0px 15px 0px;
    }
    input[type = "submit"] {
      width: auto !important;
      display: block !important;
    }
    input[type = "file"] {
      padding: 5px 0px 15px 0px !important;
    }
#progressbar{
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
    vertical-align: middle;

}
.progress-label {
      float: left;
margin-top: 5px;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff;
          width: 100%;
    height: 100%;
    position: absolute;
    vertical-align: middle;
    }
  </style>
</body>

Я должен извиниться за мое плохое знание английского языка. К сожалению, я не могу понять вашу текущую проблему и вашу цель. Могу я спросить вас о деталях их? Во-первых, хотелось бы правильно понять ваш вопрос.

— 11.04.2023 01:38

Когда вы открываете форму, есть место для ввода текста, я бы хотел, чтобы этот текст также был зарегистрирован в электронной таблице.

— 11.04.2023 03:15

Спасибо за ответ. Когда я увидел ваш скрипт, мне показалось, что вы хотите использовать google.script.run с асинхронным процессом. В этом случае, когда запускается I would like this text to also be logged onto the spreadsheet, какой результат вы хотите ожидать? К сожалению, я пока не могу представить ожидаемый вами результат. Прошу прощения за это.

— 11.04.2023 04:00

Хорошо, постараюсь объяснить получше: при нажатии на эту ссылку script.google.com/macros/s/… и загрузке файлов данные записываются в эту таблицу docs.google.com/spreadsheets/d/… В форме есть место для ввода текста, и я хочу, чтобы оно было размещено и в электронной таблице, я загрузил несколько скриншотов здесь photos.app.goo.gl/ZbeqC6i4JwdBPQvR9 photos.app.goo.gl /fWwYbfsSj6nWyYGo9

— 11.04.2023 19:51

Спасибо за ответ. Из вашего ответа я предложил пункт модификации в качестве ответа. Пожалуйста, подтвердите это. Если я неправильно понял ваш ожидаемый результат, приношу свои извинения.

— 12.04.2023 02:18

javascript html css forms google-apps-script

10.04.2023 23:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Из вашего ответа я полагаю, что ваша цель заключается в следующем.

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

В таком случае, как насчет следующей модификации? В этой модификации изменены как Javascript, так и Google Apps Script.

Сторона Javascript:

Пожалуйста, измените функцию updateProgressbar Javascript следующим образом.

От:

if ( numUploads.done == numUploads.total ){
   //uploadsFinished();
   numUploads.done = 0;
};

К:

if ( numUploads.done == numUploads.total ){

   // I added the below script.
   var text = document.getElementById("projectDesctiptionIndex").value;
   google.script.run.putText(text);

   //uploadsFinished();
   numUploads.done = 0;
};

Сторона скрипта Google Apps:

Добавьте следующую функцию в скрипт Google Apps.

function putText(text) {
  var sheet = SpreadsheetApp.openById(sid).getSheetByName("Sheet1");
  sheet.getRange("D" + sheet.getLastRow()).setValue(text);
}

В соответствии с приведенной выше модификацией, когда вы устанавливаете файлы и значение для тега текстовой области и нажимаете кнопку «Отправить», файлы загружаются, а введенный текст помещается в столбец «D».
В вашем показанном образце изображения кажется, что вы хотите поместить текст в столбец «C». Но в вашем скрипте кажется, что столбец "C" - это дата. Итак, я помещаю текст в столбец «D». Пожалуйста, будьте осторожны с этим.

Примечание:

Когда вы изменили сценарий Google Apps для веб-приложений, измените развертывание как новую версию. При этом измененный скрипт отражается в веб-приложениях. Пожалуйста, будьте осторожны с этим.
Вы можете увидеть подробности этого в моем отчете «Повторное развертывание веб-приложений без изменения URL-адреса веб-приложений для новой IDE (Автор: я)».

Большое спасибо за вашу помощь, я пытался разобраться в этом почти три недели, вы мне очень помогли!

— 12.04.2023 08:04

12.04.2023 02:18