Вызов файла изображения в скриптах приложения Google для загрузки в GoogleDrive - PullRequest
0 голосов
/ 11 марта 2020

Я пытаюсь настроить способ загрузки файлов изображений на диск Google. Он создаст папку с использованием timeid и поместит изображение в созданную папку. У меня проблемы с вызовом файла изображения. Вот как я пытаюсь это сделать, папка создается, но без изображения.

Пожалуйста, игнорируйте все пропущенные переменные для переменной timeid. Это работает нормально.

Ошибка выдана: ReferenceError: imgInp не определено

Заранее спасибо за вашу помощь!

Code.gs

  var day = d.getDate();
  var month = d.getUTCMonth();
  var hour = d.getHours();
  var minutes = d.getMinutes();
  var realmonth = month+1;
  var timeid = String(year)+"-"+String(realmonth)+"-"+String(day)+"-"+String(hour)+"-"+String(minutes);
  var foldername=timeid;
  var parentFolder=DriveApp.getFolderById("##############");

function upload(){
  var newFolder=parentFolder.createFolder(timeid);

  var folderidlookup = newFolder.getId();

  var destination = DriveApp.getFolderById(folderidlookup);
  var imgf = imgInp;
  var contentType = 'image/jpeg';
  var imgf = imgf.getAs(contentType);
  destination.createFile(imgf)


}

Html

       <form>

        <div class="file-field input-field">

         <div class="waves-effect waves-light btn" id="wholebtn"><i class="material-icons right">cloud</i>Browse
         <input type="file" name="imgInp" id="imgInp" onchange="loadFile(event)">

        </div> 
        <div class="file-path-wrapper">
         <input type="text" class="file-path">
        </div>
        </div>
       </form>
    <button class="btn waves-effect waves-light" type="submit" name="action" id ="button">Submit
      <i class="material-icons right">send</i>
    </button>

JS

<script>
  document.getElementById("button").addEventListener("click",upload); 

  function upload(){

     google.script.run.upload();

  }
</script>

Ответы [ 2 ]

0 голосов
/ 13 марта 2020

Ошибка, которую вы получаете, заключается в том, что вы пытаетесь использовать переменную imgInp, которая не определена ни в одной части кода. Вы можете получить файл BLOB из входных данных, преобразовать его в строку двоичного массива, передать его на серверную сторону и, наконец, использовать его для создания своего BLOB-объекта и данного файла Drive, для этого я использовал код из этого ответ .

Используя примеры для работы с формами и обработчиками успеха и сбоев из HTML Руководства по обслуживанию , я собрал приведенный ниже код, который успешно работал при загрузке данного изображения:

Указатель. html

<!DOCTYPE html>
<html>
<head>
    <base target="_top">
</head>
<body>
    <form>
        <div class="file-field input-field">
            <div class="waves-effect waves-light btn" id="wholebtn"><i class="material-icons right">cloud</i>Browse
                <input type="file" name="imgInp" id="imgInp">
            </div>
            <div class="file-path-wrapper">
                <input type="text" class="file-path">
            </div>
        </div>
        <button class="btn waves-effect waves-light" name="action" id="button">Submit
            <i class="material-icons right">send</i>
        </button>
    </form>
    <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();
                });
            }
        }

        // Add event listeners 
        window.addEventListener('load', preventFormSubmit);
        document.getElementById("button").addEventListener("click", upload);

        // Handler function
        function logger(e) {
            console.log(e)
        }

        async function upload() {
            // Get all the file data
            let file = document.querySelector('input[type=file]').files[0];

            // Get binary content, we have to wait because it returns a promise 
            let fileBuffer = await file.arrayBuffer();
            // Get the file content as binary and then convert it to string 
            const data = (new Uint8Array(fileBuffer)).toString();
            // Pass the binary array string to uploadG funciton on code.gs
            google.script.run.withFailureHandler(logger).withSuccessHandler(logger).uploadG(data);
        }
    </script>
</body>
</html>

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function uploadG(imgInp){
  var parentFolder=DriveApp.getFolderById("[FOLER-ID]");
  var newFolder = parentFolder.createFolder('test webApp');
  var folderidlookup = newFolder.getId();

  var destination = DriveApp.getFolderById(folderidlookup);
  var contentType = 'image/jpeg';
  // Convert the binary array string to array and use it to create the Blob
  var blob = Utilities.newBlob(JSON.parse("[" + imgInp + "]"), contentType);
  blob = blob.getAs(contentType);
  destination.createFile(blob)

  return 'Filed uploaded!';
}
0 голосов
/ 11 марта 2020

Диалог загрузки файла

Запустите upLoadMyDialog() из редактора сценариев, чтобы начать. Выберите файл и нажмите «Загрузить».

function fileUpload(obj) {
  var d=new Date();
  var ts=Utilities.formatDate(d, Session.getScriptTimeZone(), "yyyy-MM-dd-HH-mm");
  var folder=DriveApp.getFolderById("****** Enter FolderId *******");
  var file=folder.createFile(obj.file1).setName(ts);
}

function uploadMyDialog() {
  var ss=SpreadsheetApp.getActive();
  var html='<form><input type="file" name="file1"/><br /><input type="button" value="Upload" onClick="google.script.run.fileUpload(this.parentNode);" /></form>';  
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");
}

С помощью EventListener:

function uploadMyDialog() {
  var ss=SpreadsheetApp.getActive();
  var html='<form id="f1"><input type="file" name="file1"/><br /><input type="button" value="Upload" id="btn1" /></form>'; 
  html+='<script>window.onload=function(){document.getElementById("btn1").addEventListener("click",function(){google.script.run.fileUpload(document.getElementById("f1"))})}</script>';
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...