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

StackOverflow https://stackoverflow.com//questions/21013693

質問

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

完全な例を探しています。サンプルの Google フォーム HTML ソースに追加するコードを指定する必要があります。Google Apps Script を使用して、ビューアのファイルを Google ドライブ アカウントにアップロードするにはどうすればよいですか?

役に立ちましたか？

解決

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

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

注記:例がありました 両方 UI サービスと HTML サービスがありますが、UI サービスは非推奨になっているため、UI サービスの例は削除されました。

注記:現在利用可能なサンドボックス設定は次のとおりです IFRAME. 。使いたいのですが、 onsubmit 開始フォームタグの属性: <form onsubmit="myFunctionName()">, 、フォーム送信後にフォームが画面から消える可能性があります。

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

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

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

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

あなたが必要なもの

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

Google Apps スクリプト

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

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

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

Apps スクリプトの概要

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

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

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

  • 脚本
  • HTML

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

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

  • 権限を設定する

    そして使い始めることができます。

開始方法:

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

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

コード.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) は、内部 HTML を div 「ファイルがアップロードされました!」というメッセージを含む要素

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

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

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

HTML サービスの別の使用例は、StackOverflow のこのリンクで見ることができます。

HTMLサービスによるファイルアップロード

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

UI サービスと Ui には違いがあります getUi() スプレッドシート クラス (または他のクラス) のメソッド Apps Script UI サービスは、12 月 1 日に非推奨になりました。2014 年 11 日。しばらくは機能し続けますが、HTML サービスを使用することをお勧めします。

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

UIサービスであっても、 は 廃止されました。 getUi() 追加するスプレッドシート クラスのメソッド カスタムメニュー, 、つまり ない 非推奨:

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

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

UI メソッドは、 Ui 戻り値の型。

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

以下は、入力フォームを含む共有 Apps Script Web App ファイルへのリンクです。

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

他のヒント

2016年10月現在、GoogleはネイティブのGoogleフォームでファイルアップロードの質問タイプを追加しました.Google Appsスクリプトは必要ありません。ドキュメント。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top