GoogleドライブとGoogle Apps Scriptを用いて匿名のファイルアップローダを作成する
概要 GoogleドライブとGoogle Apps Scriptを用いて匿名のファイルアップローダを作成する機会がありましたので、その備忘録です。 以下の記事などを参考にさせていただきました。 https://qiita.com/v2okimochi/items/06ed1ce7c56a877a1e10 ウェブアプリの作成 まず、以下の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> デプロイ 画面右上の「デプロイ」ボタンをクリック後、「新しいデプロイ」をクリックします。 ...
