Zenn
📤

ローカルにあるファイルを指定のGoogleDriveフォルダに送る

2024/08/26に公開
Google Drive
tech

はじめに

GoogleDriveを使用するWebアプリでは、Webアプリ上で作ったファイルをGoogleDriveに送りたい場面が多く出て来ると思います。その際に使用できる簡便な方法をまとめておきます。

form.html

<html>
<body>
<form id="myForm">
    <input type="file" id="fileInput" />
    <input type="button" value="Upload File" onclick="uploadFile()" />
</form>
<div id="output"></div>
<script>
    function uploadFile() {
        // ユーザーが選択したファイルを取得します。
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        // FileReader は、ファイルを非同期で読み込むためのオブジェクトです。
        var reader = new FileReader();
        var appurl = 'https://script.google.com/macros/s/xxxxx/exec';
        reader.onload = function (e) {
            var data = e.target.result;
            // appurlに対してファイルデータをPOSTリクエストとして送信します。
            fetch(appurl, {
                method: 'POST',
                mode: 'no-cors',
                cache: 'no-cache',
                // データ形式はJSONになります
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ data: data, fileName: file.name })
            }).then(response => {
                document.getElementById('output').innerHTML = 'File uploaded successfully';
            }).catch(error => {
                console.error('Error:', error);
                document.getElementById('output').innerHTML = 'Error uploading file';
            });
        };
        // // ここでBase64でエンコードして、その結果をJSONの一部として送信します。
        reader.readAsDataURL(file);
    }
</script>
</body>
</html>

appurlは、次に示すsendfile.gsをwebアプリとしてデプロイすることで取得できます。

sendfile.gs

// WebアプリケーションのGETリクエストに応答します。
function doGet() {
  return HtmlService.createHtmlOutputFromFile('form.html')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

//  Base64エンコードされたファイルデータをGoogle Driveに保存します。
function uploadFileToDrive(data, fileName) {
  var folder = DriveApp.getFolderById('xxxxx');  // フォルダIDを指定
  var contentType = data.substring(5, data.indexOf(';'));
// サーバーはJSONを受け取り、Base64部分をデコードして元のバイナリデータに戻し、保存や処理を行います。
  var bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,') + 7));
  var blob = Utilities.newBlob(bytes, contentType, fileName);
  var file = folder.createFile(blob);
  return file.getUrl();
}
// WebアプリケーションのPOSTリクエストに応答します。
function doPost(e) {
  var data = JSON.parse(e.postData.contents);
  var fileUrl = uploadFileToDrive(data.data, data.fileName);
  return ContentService.createTextOutput(fileUrl);
}

GoogleAppScriptの中で、ファイルを格納するフォルダのIDを記載します。
フォルダIDは、フォルダのurl (https ://drive.google.com/drive/u/0/folders/xxxxx) のxxxxx部分になります。

終わりに

今回お示しした方法により、ユーザーがWebフォームを通じて画像やcsvなどのファイルをGoogle Driveに送信し保存するプロセスを実現します。設定が簡便である反面、スケーラビリティに限界があるため、小規模のプロジェクトに向いています。

より拡張性が高い方法として Google Cloud APIを使用する方法もありますが、設定や管理がやや複雑になります。ご自身のニーズに応じて、適切に選択をしてください。

Discussion