web-dev-qa-db-ja.com

Googleフォームファイルのアップロードの完全な例

視聴者がGoogleフォームを使用して一部のファイルをフォームにアップロードし、Googleドライブに保存できるようにするにはどうすればよいですか？

完全な例を探しています。例のGoogle Form HTMLソースに追加するコードを指定する必要があります。 Google Apps Scriptを使用して視聴者のファイルをGoogleドライブアカウントにアップロードする方法

file-uploadgoogle-apps-scriptgoogle-form
36
Tem Pora

更新：Googleフォームでファイルをアップロードできるようになりました。この回答は、Google Formsがファイルをアップロードする前に投稿されました。

このソリューションでは、Googleフォームは使用しません。これは、Google Scriptとは非常に異なるApps Script Webアプリの使用例です。 Webアプリは基本的にWebサイトですが、ドメイン名を取得することはできません。これはGoogleフォームの変更ではなく、ファイルをアップロードするために行うことはできません。

NOTE：bothの例はありましたが、UIサービスの例を削除しました、UIサービスが非推奨になったため。

NOTE：現在使用できるサンドボックス設定はIFRAMEのみです。開始フォームタグ<form onsubmit="myFunctionName()">でonsubmit属性を使用したい場合、フォーム送信後にフォームが画面から消える場合があります。

ネイティブモードを使用していた場合、ファイルアップロードWebアプリが機能しなくなっている可能性があります。 NATIVEモードでは、フォームを送信しても、画面から消えるページのデフォルトの動作は呼び出されません。 NATIVEモードを使用していて、ファイルアップロードフォームが機能しなくなった場合は、「送信」タイプのボタンを使用している可能性があります。サーバーにデータを送信するために「google.script.run」クライアント側APIを使用している可能性もあると思います。フォームの送信後にページを画面から非表示にする場合は、別の方法で行うことができます。しかし、あなたは気にしないかもしれませんし、ページを画面にとどめることを好むかもしれません。必要に応じて、設定を構成し、特定の方法でコーディングする必要があります。

「送信」タイプのボタンを使用していて、それを引き続き使用したい場合は、送信イベントハンドラー関数のコードにevent.preventDefault();を追加してみてください。または、google.script.runクライアント側APIを使用する必要があります。

AppsスクリプトHTMLサービスを使用して、ユーザーのコンピュータードライブからGoogleドライブにファイルをアップロードするためのカスタムフォームを作成できます。この例ではプログラムを作成する必要がありますが、ここではすべての基本的なコードを提供しています。

この例は、Google Apps Script HTMLサービスを使用したアップロードフォームを示しています。

あなたが必要なもの

  • Googleアカウント
  • グーグルドライブ
  • Google Apps Script-Google Scriptとも呼ばれます

Google Apps Script

Google Apps Scriptコードエディターを使用するには、さまざまな方法があります。

  • WebアドレスからAppsスクリプトを直接ロードします： https://script.google.com
  • 最初にGoogleスプレッドシートを開き、次にAppsスクリプトを開きます
  • Googleドライブに移動して、アプリスクリプトを開きます： https://drive.google.com/drive/#my-drive
  • Googleドライブに移動し、Apps Scriptプロジェクトファイルをクリックします
  • GoogleドキュメントからAppsスクリプトを開く
  • 等

あなたがすべての可能性に気付いていないなら、それは少し混乱するかもしれないので、私はこれに言及します。 Google Apps Scriptは、Googleサイト、スプレッドシート、ドキュメント、フォームに埋め込むか、スタンドアロンアプリとして使用できます。

アプリスクリプトの概要

この例は、HTMLサービスを備えた「スタンドアロン」アプリです。

HTMLサービス-HTML、CSS、およびJavaScriptを使用してWebアプリを作成します

Google Apps Scriptには、Project内に2種類のファイルしかありません。

  • 脚本
  • HTML

スクリプトファイルの拡張子は.gsです。 .gsコードは、JavaScriptで記述されたサーバー側コードであり、Google独自のAPIの組み合わせです。

  • 次のコードをコピーして貼り付けます
  • それを保存
  • 最初の名前付きバージョンを作成する
  • 公開する

  • 許可を設定する

    そして、あなたはそれを使い始めることができます。

開始：

  • Appsスクリプトで新しい空のプロジェクトを作成する
  • このコードをコピーして貼り付けます：

HTMLサービスを使用してファイルをアップロードします。

Code.gsファイル（デフォルトで作成）

//For this to work, you need a folder in your Google drive named:
// 'For Web Hosting'
// or change the hard coded folder name to the name of the folder
// you want the file written to

function doGet(e) {
  return HtmlService.createTemplateFromFile('Form')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setTitle('Name To Appear in Browser Tab')
    .setSandboxMode();//Defaults to IFRAME which is now the only mode available
}

function processForm(theForm) {
  var fileBlob = theForm.picToLoad;

  Logger.log("fileBlob Name: " + fileBlob.getName())
  Logger.log("fileBlob type: " + fileBlob.getContentType())
  Logger.log('fileBlob: ' + fileBlob);

  var fldrSssn = DriveApp.getFolderById(Your Folder ID);
    fldrSssn.createFile(fileBlob);

  return true;
}

htmlファイルの作成：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1 id="main-heading">Main Heading</h1>
    <br/>
    <div id="formDiv">

      <form id="myForm">

        <input name="picToLoad" type="file" /><br/>
        <input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" />

      </form>
    </div>


  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
</div>

</body>
<script>

function picUploadJs(frmData) {

  document.getElementById('status').style.display = 'inline';

  google.script.run
    .withSuccessHandler(updateOutput)
    .processForm(frmData)
};
  // Javascript function called by "submit" button handler,
  // to show results.

  function updateOutput() {

    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
  }

</script>
</html>

これは完全に機能する例です。 2つのボタンと1つの<div>要素のみがあるため、画面にはあまり表示されません。 .gsスクリプトが成功した場合、trueが返され、onSuccess関数が実行されます。 onSuccess関数（updateOutput）は、「The File was UPLOADED！」というメッセージとともにdiv要素に内部HTMLを挿入します。

  • ファイルを保存し、プロジェクトに名前を付けます
  • メニューの使用：File、Manage Versionその後、最初のバージョンを保存
  • Publish、Deploy As Web Appその後更新

スクリプトを初めて実行すると、ファイルがドライブに保存されるため、アクセス許可が求められます。初めてアクセス許可を付与した後、Appsスクリプトは停止し、実行は完了しません。そのため、再度実行する必要があります。スクリプトは、初回以降、再度許可を要求しません。

AppsスクリプトファイルがGoogleドライブに表示されます。 Googleドライブでは、スクリプトにアクセスして使用できるユーザーの権限を設定できます。スクリプトは、ユーザーにリンクを提供するだけで実行されます。 Webページを読み込むのと同じようにリンクを使用します。

HTMLサービスを使用する別の例は、StackOverflowの次のリンクにあります。

HTMLサービスを使用したファイルのアップロード

非推奨のUIサービスに関する注意：

UIサービスと、スプレッドシートクラス（または他のクラス）のUi getUi()メソッドには違いがあります。AppsスクリプトUIサービスは、2014年12月11日に廃止されました。ただし、HTMLサービスを使用することをお勧めします。

Googleドキュメント-UIサービス

UIサービスisは非推奨ですが、追加するスプレッドシートクラスのgetUi()メソッドがありますカスタムメニュー、これはNOT非推奨：

スプレッドシートクラス-UIメソッドの取得

両方とも用語UIを使用しているため、混乱を招く可能性があるため、これについて言及します。

UIメソッドは、Ui戻り型を返します。

UIサービスにHTMLを追加できますが、UIサービスでHTMLの<button>、<input>、または<script>タグを使用することはできません。

入力フォームを使用した共有Apps Script Webアプリファイルへのリンクは次のとおりです。

共有ファイル-お問い合わせフォーム

62
Alan Wells

2016年10月の時点で、GoogleはネイティブのGoogleフォームにファイルアップロードの質問タイプを追加しました。GoogleAppsスクリプトは不要です。 ドキュメントを参照 。

2
jarvis