Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Verwenden Sie Google Apps Script, um Dateien direkt auf mein Google Drive hochzuladen (ohne Google Forms zu verwenden).
P粉785905797
P粉785905797 2024-01-21 15:39:43
0
2
596

Im Grunde ist die Aufgabe also sehr einfach, aber ich habe keine praktikable Lösung für mein Problem gefunden. Ich habe ein riesiges Upload-Skript auf meiner Website (derzeit localhost), aber reduzieren wir die Komplexität auf das Notwendige.

Ich möchte also nur Google App Script verwenden, um eine einzelne Datei auf Google Drive hochzuladen und deren URL zu erhalten, um sie in einer Variablen zu speichern, damit ich diese Informationen später in meiner Funktion verwenden kann.

Das Problem ist nun, dass ich das Formular bereits auf meiner Website habe und das Formular nicht als zusätzliches HTML in script.google.com haben möchte, sondern meine Benutzereingaben an Google App Script übertragen und dann hochladen möchte Wenn ich auf Google Drive gehe und die URL zu meiner Website zurückgebe, kann ich sie in einer Variable speichern.

Mein Problem ist jetzt, dass ich nicht alles zusammenfassen kann.

Das ist das Formular auf meiner Website (vereinfacht): 

<form name="myForm" method="post">
            <!-- <form name="first-form"> -->

  <input type="text" placeholder="Name" id="myName">
  <input type="file" name="myFile" id="myFile">
  <button onclick="UploadFile()" type="submit">submit</button>

</form>

Wie lade ich meine Informationen in Google Drive hoch und erhalte die Ergebnisse? Wie kann ich Daten von Google App Script übertragen, ohne iFrames oder etwas anderes zu verwenden?

Danke!

**** Funktionierendes Beispiel, wenn HTML in script.google.com ****

ist

GS

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Google File Upload by CTRLQ.org");
}


function uploadFileToGoogleDrive(data, file, name, email) {
  
  try {
    
    var dropbox = "Received Files";
    var folder, folders = DriveApp.getFoldersByName(dropbox);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    
    /* Credit: www.labnol.org/awesome */
    
    var contentType = data.substring(5,data.indexOf(';')),
        bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
        blob = Utilities.newBlob(bytes, contentType, file),
        file = folder.createFolder([name, email].join(" ")).createFile(blob);
    
    return "OK";
    
  } catch (f) {
    return f.toString();
  }
  
}
html in

apps.googlescript

<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google File Upload by CTRLQ.org</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <style>
      .disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
    </style>
  </head>
  <body>

    <!-- Written by Amit Agarwal amit@labnol.org --> 

    <form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
      <div id="forminner">
        <div class="row">
          <div class="col s12">
            <h5 class="center-align teal-text">Upload Files to my Google Drive</h5>
            <p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) is powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
            <label for="name">Name</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
            <label for="email">Email Address</label>
          </div>
        </div>

        <div class="row">
          <div class="file-field input-field col s12">
            <div class="btn">
              <span>File</span>
              <input id="files" type="file">
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text" placeholder="Select a file on your computer">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="input-field col s6">
            <button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
          </div>   
        </div>
        <div class="row">
          <div class="input-field col s12" id = "progress">
          </div>
        </div>
      </div>
      <div id="success" style="display:none">
        <h5 class="left-align teal-text">File Uploaded</h5>
        <p>Your file has been successfully uploaded.</p>
        <p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>    
        <p class="center-align"><a  class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
      </div>
    </form>

    <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">menu</i>
      </a>
      <ul>
        <li><a class="btn-floating red"  href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
        <li><a class="btn-floating blue"  href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
        <li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
      </ul>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <script src="https://gumroad.com/js/gumroad.js"></script>

    <script>

      var file, 
          reader = new FileReader();

      reader.onloadend = function(e) {
        if (e.target.error != null) {
          showError("File " + file.name + " could not be read.");
          return;
        } else {
          google.script.run
            .withSuccessHandler(showSuccess)
            .uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
        }
      };

      function showSuccess(e) {
        if (e === "OK") { 
          $('#forminner').hide();
          $('#success').show();
        } else {
          showError(e);
        }
      }

      function submitForm() {

        var files = $('#files')[0].files;

        if (files.length === 0) {
          showError("Please select a file to upload");
          return;
        }

        file = files[0];

        if (file.size > 1024 * 1024 * 5) {
          showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
          return;
        }

        showMessage("Uploading file..");

        reader.readAsDataURL(file);

      }

      function showError(e) {
        $('#progress').addClass('red-text').html(e);
      }

      function showMessage(e) {
        $('#progress').removeClass('red-text').html(e);
      }


    </script>

  </body>

</html>

Wie vorgeschlagen, werde ich den Vorgang hier beschreiben.

Wir sind also auf der Website: www.example.com und haben ein Formular mit einem Texteingabefeld und einem Dateifeld. Nehmen wir an, wir fügen ein Bild ein und nennen es ein Beispiel. Wenn wir nun auf „Senden“ klicken, möchte ich das Bild ohne oAuth auf Google Drive hochladen (deshalb müssen wir hier Google App Script verwenden) und es so benennen, wie wir es in das Textfeld eingegeben haben. Sobald der Upload abgeschlossen ist, möchte ich, dass die URL des Google Drive-Images an die Website zurückgegeben wird, damit das Formular diese Informationen weiterhin verwenden kann. Ich möchte die zurückgegebene URL in einer Variablen speichern und sie später in der Datenbank speichern. Deshalb muss ich die Ergebnisse an meine Website zurückgeben.

Die Lösung sieht also so aus:

Geben Sie Informationen in das Formular auf der Website ein –> Weiterleitung zum Google-App-Skript: Rufen Sie die Informationen des Website-Formularfelds ab, laden Sie die Datei auf Google Drive hoch und benennen Sie sie als Texteingabeeintrag –> Verwenden Sie die Google Drive-URL als Endergebnis das endgültige URL-Ergebnis zurück zur Website-> Speichern Sie das URL-Ergebnis in var und führen Sie die Vorgänge auf der Website weiter aus-> Speichern Sie schließlich die Informationen in var in der Datenbank->

---------------------------------------------------------------- ---------- - Herausgeber: -----

Dank @Tanaike bin ich meinem Herausforderungsziel näher gekommen. Um zu sehen, wo ich steckengeblieben bin, kopiere ich jetzt meine Frage:

Ich habe das Formular mithilfe des Skripts aus Ihrem Beispiel erhalten: 

<form id="form">
  <input name="file" id="uploadfile" type="file">
  <input name="filename" id="filename" type="text">
  <input id="submit" type="submit">
</form>
<script>
const form = document.getElementById('form');
form.addEventLis tener('submit', e => {
  e.preventDefault();
  const file = form.file.files[0];
  const fr = new FileReader();
  fr.readAsArrayBuffer(file);
  fr.onload = f => {
    
    const url = "https://script.google .com/macros/s/###/exec";  // <--- Please set the URL of Web Apps.
    
    const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
    fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
    .then(res => res.json())
    .then(e => console.log(e))  // <--- You can retrieve the returned value here.
    .catch(err => console.log(err));
  }
});
</script>

Für Google Script: 

function doPost(e) {
  // const folderId = "###";  // Folder ID which is used for putting the file, if you need.

  const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
  const file = DriveApp.getFolderById(folderId || "root").createFile(blob);
  const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
  return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}

Wenn ich jetzt versuche, etwas hochzuladen, erhalte ich die folgende Fehlermeldung: CORS-Richtlinie kann nicht abgerufen werden. Deshalb habe ich diesen Teil wie folgt geändert und keinen Cors-Modus hinzugefügt: 

const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
        fetch(`${url}?${qs}`, {method: "POST", mode: "no-cors", body: JSON.stringify([...new Int8Array(f.target.result)])})

Das funktioniert. Der zweite Versuch, die Datei hochzuladen, führt zu folgendem Fehler: Da steht: syntax错误：输入意外结束

Also habe ich diese Zeile geändert und die Klammern aus res.json entfernt 

JSON.stringify([...new Int8Array(f.target.result)])})
        .then(res => res.json)

Als ich zum dritten Mal versuchte, eine tatsächlich gültige Datei hochzuladen, waren die Konsolenergebnisse wie folgt: 

ƒ json() { [native code] }

Aber es gibt keine hochgeladenen Dateien in Google Drive. Mir fehlt irgendwo etwas. Vielleicht sollten wir einen Ordner erstellen und die Dateien darin ablegen.

Oh, noch eine Info: Wenn ich die doPost-Funktion im Google App-Skript ausführe, heißt es: 

TypeError: Cannot read property 'postData' of undefined (line 13

Bearbeiten 2 ---------------------------------------------- --- ------

Ich habe https://drive.google .com/uc?export=download&id=###fileId### zu Ihrem Code hinzugefügt und alles funktioniert einwandfrei. Datei wird hochgeladen.

Angenommen, wir laden die Datei test.mp3 hoch und nennen sie testdata. Das haben wir erhalten: 

{
  "filename": "testdata",
  "fileId": "###some id##",
  "fileUrl": "https://drive.google .com/uc?export=download&id=###fileId###"
}

Wenn ich jetzt die Datei-URL öffne, lädt der Browser die Datei herunter, aber ihr Name lautet: testdata statt testdata.mp3. Das Ende des Dateityps fehlt.

Zweite Aufgabe: Wenn Sie auf den Link klicken, möchte ich die Datei im Browser öffnen. Wenn es sich beispielsweise um eine MP3-Datei handelt, möchte ich, dass Sie den Ton in der Webansicht abspielen, wie hier: https:// Dateien .freemusicarchive .org/storage-freemusicarchive-org/music/Creative_Commons/Dead_Combo/CC_Affiliates_Mixtape_1/Dead_Combo_-_01_-_Povo_Que_Cas_Decalo.mp3

Ich hoffe, du kannst mich führen!

P粉785905797
P粉785905797

Antworte allen(2)
P粉512729862
P粉5127298622024-01-22 14:32:10 2 Etage

https://stackoverflow.com/a/63391363/1585523 答案中有很多有用的提示！感谢你的分享。除了 POST 文件之外，我们还可以使用

在客户端：index.html

google.script.run.withSuccessHandler(fileName => {}).withFailureHandler(error => {}).saveInDrive(fileAsByteArray);

在服务器上：Code.gs

function saveInDrive(f) {
  const blob = Utilities.newBlob(f, "image/jpeg", "some-name");
  const file = DriveApp.getFolderById("root").createFile(blob);
  return file.getName()
}

您甚至可以用这种方法交换复杂类型，例如 JS 对象与二进制信息作为值。

Wie +0
Antwort hinzufügen
P粉298305266
P粉2983052662024-01-22 13:48:47 1 Etage

我相信您的目标如下。

  • 您的网站与 Google 帐户无关。它是独立的。
  • 您的网站有一个用于上传文件的表单。
  • 当用户提交表单时，您希望在未经授权的情况下将文件上传到您的 Google 云端硬盘，并希望返回已上传文件在 Google 云端硬盘上的网址。
  • 关于“数据库”，这是您的数据库。您将检索到的文件 URL 放入客户端的“数据库”中。

在这种情况下，我认为使用 Google Apps 脚本创建的网络应用程序可以实现您的目标。

用法：

请执行以下流程。

1。创建 Google Apps 脚本的新项目。

Web Apps 的示例脚本是 Google Apps 脚本。因此，请创建一个 Google Apps 脚本项目。

如果您想直接创建，请访问https://script.new/。在这种情况下，如果您尚未登录 Google，则会打开登录屏幕。所以请登录谷歌。这样，Google Apps 脚本的脚本编辑器就会打开。

2。准备脚本。

请将以下脚本（Google Apps 脚本）复制并粘贴到脚本编辑器中。该脚本适用于网络应用程序。

服务器端：Google Apps 脚本

请设置要放置文件的文件夹ID。

function doPost(e) {
  const folderId = "root";  // Or Folder ID which is used for putting the file instead of "root", if you need.

  const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
  const file = DriveApp.getFolderById(folderId).createFile(blob);
  const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
  return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}

3。部署网络应用程序。

  1. 在脚本编辑器中，通过“发布”->“部署为网络应用”打开一个对话框。
  2. 为“执行应用程序：”选择“我”。
    • 这样，脚本就会以所有者的身份运行。
  3. 为“谁有权访问该应用：”选择“任何人，甚至匿名”。
  4. 点击“部署”按钮作为新的“项目版本”。
  5. 自动打开“需要授权”对话框。
    1. 点击“查看权限”。
    2. 选择自己的帐户。
    3. 点击“此应用未经验证”处的“高级”。
    4. 点击“转到 ### 项目名称 ###（不安全）”
    5. 点击“允许”按钮。
  6. 点击“确定”。
  7. 复制网络应用程序的 URL。就像https://script.google.com/macros/s/###/exec。
    • 修改 Google Apps 脚本后，请重新部署为新版本。这样，修改后的脚本就会反映到Web Apps中。请小心这一点。

4。从客户端上传文件到服务器端。

客户端：HTML 和 Javascript

请将您的 Web 应用程序的 URL 设置为以下脚本。
  • 在客户端，当您从本地 PC 选择文件并按下按钮时，系统会通过在网络应用（服务器端）检索数据来将该文件上传到您的 Google 云端硬盘。

结果：

运行上述脚本时，将返回以下值。由此，您可以检索文件的 URL。

{
  "filename": "### inputted filename ###",
  "fileId": "###",
  "fileUrl": "https://drive.google.com/file/d/###/view?usp=drivesdk"
}

注意：

  • 当您修改Web Apps的脚本时，请将Web Apps重新部署为新版本。这样，最新的脚本就会反映到Web Apps中。请小心这一点。
  • 在上面的脚本中，最大文件大小为 50 MB。因为在当前阶段，Google Apps 脚本的最大 blob 大小为 50 MB。

参考文献：

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage