Overview

I had the opportunity to create an anonymous file uploader using Google Drive and Google Apps Script, so this is a memo of the process.

I referenced the following article.

https://qiita.com/v2okimochi/items/06ed1ce7c56a877a1e10

Creating the Web App

First, access Apps Script from the following URL.

https://script.google.com/

Click “New project.”

The following screen will be displayed.

Copy and paste the following code. For the second line, <Google Drive upload folder ID>, create an upload folder in Google Drive in advance and obtain its 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;
}

Next, click the “+” button in the upper left of the screen and select HTML.

Name the file “index.”

Copy and paste the following code.

<!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>

Deployment

Click the “Deploy” button in the upper right of the screen, then click “New deployment.”

Click the gear icon and select “Web app.”

Set “Execute as” to yourself and “Who has access” to everyone.

Proceed with the authorization.

A warning screen like the following will appear. Click “Advanced.”

Click the “Go to …” link.

As a result, the following screen will be displayed. Access the URL at the bottom of the screen.

You can access a web app like the following.

When you upload a file, a time-based folder will be created in the Google Drive folder whose ID you specified earlier, and the uploaded file will be stored inside it.

Summary

I introduced how to create an anonymous file uploader using Google Drive and Google Apps Script.

If you want to change the target upload folder ID, you can edit “Code.gs” and perform a “New deployment.” However, in this case, a new URL will be issued. If you want to continue using the URL from the previous version, you can change the version specification from “Manage deployments.”

For details, please refer to the following article.

https://ryjkmr.com/gas-web-app-deploy-new-same-url/

I hope you find this article helpful.