😸

GoogleドライブとGoogle Apps Scriptを用いて匿名のファイルアップローダを作成する

2023/05/11に公開1件

Google Cloud

GAS

tech

概要

GoogleドライブとGoogle Apps Scriptを用いて匿名のファイルアップローダを作成する機会がありましたので、その備忘録です。

以下の記事などを参考にさせていただきました。

ウェブアプリの作成

まず、以下のURLから、Apps Scriptにアクセスします。

https://script.google.com/

「新しいプロジェクト」をクリック。

以下のような画面が表示されます。

以下のコードをコピペします。2行目の<Google Driveのアップロード用フォルダのID>について、事前にGoogleドライブでアップロード用のフォルダを作成しておき、そのIDを取得しておいてください。

// 定数: Google Driveのアップロード用フォルダのID
const FOLDER_ID = '<Google Driveのアップロード用フォルダのID>';

// doGet関数: index.htmlファイルを表示する
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

// processForm関数: フォームオブジェクトを受け取り、Google Driveにファイルをアップロードする
function processForm(formObject) {
  // フォームからファイルデータを取得
  var formBlob = formObject.myFile;
  
  // アップロード用フォルダを取得
  var uploadFolder = DriveApp.getFolderById(FOLDER_ID);

  // 現在の日時をフォルダ名に使用
  var today = new Date();
  const folderName = today.toString();
  
  // アップロード用フォルダ内に新しいフォルダを作成
  const customFolder = uploadFolder.createFolder(folderName);

  // 新しいフォルダ内にファイルをアップロード
  customFolder.createFile(formBlob);

  // 新しいフォルダ名を戻り値として返す
  return folderName;
}

次に、画面左上の「+」ボタンを押して、HTMLを選択します。

ファイル名に「index」を与えます。

以下のコードをコピペします。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // フォームのデフォルトの送信動作を無効にする
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      // アップロードボタンを最初は無効にする
      document.addEventListener("DOMContentLoaded", function () {
        document.getElementById("upload").disabled = true;
      }, false);

      // 制限サイズ以内のファイルが選択されたらアップロードボタンを有効にする
      function changeSubmitButton() {
        const len = document.getElementById("file").files.length;
        const size = document.getElementById("file").files[0].size;
        const maxSize = 1024 * 1024 * 10; // 10MB
        const uploadButton = document.getElementById("upload");

        if (len > 0 && size < maxSize) {
          uploadButton.disabled = false;
        } else {
          uploadButton.disabled = true;
        }
      }

      // アップロードボタンが押されたらファイルをアップロード
      function handleFormSubmit(formObject) {
        document.getElementById("upload").disabled = true;
        const div = document.getElementById('progress');
        div.innerHTML = 'アップロード中...';

        // アップロード成功した場合はupdateView()実行
        google.script.run.withSuccessHandler(updateView).processForm(formObject);
      }

      // アップロード完了画面に変える（動的）
      function updateView(id) {
        var div = document.getElementById('myform');
        div.innerHTML = `<div>アップロードが完了しました。</div>`;
      }
    </script>
  </head>
  <body>
    <div id="myform" style="text-align:center;">
      ファイルを選択してからアップロードしてください（10MBまで）<br><br>
      <form onsubmit="handleFormSubmit(this)">
        <input id="file" name="myFile" type="file" onchange="changeSubmitButton()" />
        <input id="upload" type="submit" value="アップロード" />
      </form>
      <div id="progress"></div>
    </div>
  </body>
</html>

デプロイ

画面右上の「デプロイ」ボタンをクリック後、「新しいデプロイ」をクリックします。

歯車アイコンをクリックして、「ウェブアプリ」を選択します。

「次のユーザーとして実行」を自分として、「アクセスできるユーザー」を全員にします。

承認を行います。

以下のような警告画面が表示されます。「Advanced」をクリックします。

「Go to ...」のリンクをクリックします。

結果、以下のような画面が表示されますので、画面下部のURLにアクセスします。

以下のようなウェブアプリにアクセスできます。

ファイルをアップロードしてみると、先にIDを指定したGoogleドライブのフォルダに、時間に基づくフォルダが作成され、その中にアップロードしたファイルが格納されます。

まとめ

GoogleドライブとGoogle Apps Scriptを用いた匿名のファイルアップローダの作成方法について紹介しました。

アップロード対象のフォルダIDを変更したい場合などは、「コード.gs」を編集の上、「新しいデプロイ」を行うことで対応可能です。ただしこの場合、新しいURLが発行されてしまいます。編集前（一つ前のバージョンなど）のURLを継続して使用したい場合には、「デプロイの管理」からバージョンの指定を変更することで対応可能です。

具体的には、以下の記事などを参考にしてください。

本記事がお役に立ちましたら幸いです。

Discussion

黄色いアクエリ

初めまして、記事を参考にさせていただきました。
困っていたところが解決できました。
ありがとうございます。