GAS(Google Apps Script)でGoogleDriveにファイルをアップロード

こんにちは。「新田いおり」といいます。今回はGASを使用してGoogleDriveにファイルをアップロードする簡単なアプリを作成します。

code.gs

function doGet() {
  const htmlOutput = HtmlService.createTemplateFromFile('index').evaluate();
  return htmlOutput;
}

// Htmlから動画を取得する
function postForm(formObject) {
  const blob = formObject.file;

  const folder_id = '< GoogleDriveの保存するフォルダーのID >'; // Google DriveのフォルダーID
  const folder = DriveApp.getFolderById(folder_id);
  folder.createFile(blob);
}

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <base target="_top">

    <title>
      Gasを使用してファイルをGoogleDriveにあげる
    </title>
    <?!=HtmlService.createHtmlOutputFromFile('style').getContent();?>
    <?!=HtmlService.createHtmlOutputFromFile('script').getContent();?>
  </head>
  <body>
    <h1>GASでファイルをGoogleDriveにアップロード</h1>
    <h3>ファイルを選択してください(50MBまで)</h3>
    <form id="upload_form" onsubmit="handleFormSubmit(this)">
      <div>
        <input id="file_input" name="file" type="file"><br>
      </div>
      <div>
        <input id="upload_button" type="submit" value="アップロード">
      </div>
    </form>
    <div id="message" class="center"></div>

    <span>
      Created by: <a href="https://nitta-iori.com/">新田いおり</a>
    </span>
  </body>
</html>

style.html

<style>
  body {
    text-align: center;
  }
</style>

script.html

<script>
  // ポストした際画面を切り替えないようにする
  function preventFormSubmit() {
    const upload_form = document.getElementById("upload_form");
    upload_form.addEventListener("submit", e => {
      e.preventDefault();
    });
  }

  // データを送信
  function handleFormSubmit(formObject) {
    const file = formObject.file;
    const len = file.files.length;
    const size = file.files[0].size;
    const maxSize = 1024 * 1024 * 50; // max 50MB

    if (len === 1 && size <= maxSize) {
      const message_div = document.getElementById("message");
      message_div.innerHTML="アップロード中...";
      google.script.run.withSuccessHandler(updateMessage).postForm(formObject);
    }
  }

  // アップロード完了時
  function updateMessage() {
    const message_div = document.getElementById("message");
    message_div.innerHTML = "アップロードが完了しました。";
  }

  // ロード終了時実行
  window.addEventListener("load", preventFormSubmit);

</script>

これで、簡単なファイルをGoogleDriveに送信するアプリが完成しました。

デプロイの部分で他の人も閲覧できるサイトにすると、友達と動画やファイルの共有をする際に便利なサイトが作成できます。

GASを使用して何か開発をする人の簡単な助けになったら幸いです。今後ともよろしくお願いします。

コメントする