📁

GASのHTMLからGoogleDriveにファイルを保存

2023/10/06に公開

Google Apps Script

Google Drive

Google Sheets

tech

完成イメージ

GASで作成したwebアプリのformからファイルを送信
GASが受け取ったファイルをGoogleDriveに保存
保存したファイルのリンクをSpreadSheetに追加

実装

GoogleDrive側の準備

GoogleDrive

files : アップロードしたファイルを保存するフォルダ
web-app : webアプリを配信するGAS
db : ファイルのリンク一覧を保存するスプレッドシート

GASコードの実装

コード.gs

folderIDとspreadSheetIDはGoogleDriveでそれぞれを開いた時のURLで確認

https://drive.google.com/drive/u/0/folders/{folderID}
https://docs.google.com/spreadsheets/d/{spreadSheetID}/edit#gid=0

const folderID = "filesフォルダのID";
const spreadSheetID = "dbスプレッドシートのID";
const spreadSheetName = "シート1";

// URLアクセス時にHTMLを返す
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

// HTMLのuploadボタン押下時に実行
function gasUpload(formObject) {
  try {
    const { file } = formObject;
    const name = file.getName();
    const type = file.getContentType();
    const time = new Date().toLocaleString();
    const fileUrl = uploadFileToGoogleDrive(file);

    const values = [name, time, type, fileUrl];
    saveDataToSpreadsheet(values);

    return fileUrl;
  } catch (e) {
    console.log(e);
    throw e;
  }
}

// ファイルをGoogleDriveにアップロード
function uploadFileToGoogleDrive(file) {
  const uploadFolder = DriveApp.getFolderById(folderID);
  const uploadFile = uploadFolder.createFile(file);

  return uploadFile.getUrl();
}

// データをSpreadsheetに追加
function saveDataToSpreadsheet(values) {
  const sheet =
    SpreadsheetApp.openById(spreadSheetID).getSheetByName(spreadSheetName);
  sheet.appendRow(values);
}

index.html

<!DOCTYPE html>
<html>
  <body>
    <form id="myForm">
      <input name="file" type="file" />
      <button type="button" onclick="onSubmit()">upload</button>
    </form>

    <script>
      function onSubmit() {
        const form = document.getElementById("myForm");
        google.script.run
          .withSuccessHandler(onSuccess)
          .withFailureHandler(onFailure)
          .gasUpload(form);
      }

      function onFailure(e) {
        console.log(e.message);
        alert(e.message);
      }

      function onSuccess(url) {
        console.log(url);
        alert("アップロードが成功しました\n" + url);
      }
    </script>
  </body>
</html>