Photo by
shinsukesugie
GASでファイルアップローダーを作ってみる
Chrome V8 ランタイムを有効にするとファイルのアップロードに失敗するというバグが、いつの間にか普通に使えるようになっていたので備忘録として残しておく。
最低限の機能のみ、スプレッドシートからダイアログを表示する+画像をドライブに格納するという感じで作る。
ダイアログ画面（dialog.html）
fileの渡し口と渡した後に実行する関数を準備する。
最終的にはGAS側に渡したいのでgoogle.script.runを利用する。
<!DOCTYPE html>
<html>
<head>
<base target='_top'>
</head>
<body>
<form onsubmit='return false;'>
<input type='file' name='targetFile' />
<input type='button' value='格納する' onclick='clickSubmit(this.form);'>
</form>
<script>
function clickSubmit(form) {
google.script.run
.withSuccessHandler(() => {
form.reset();
})
.withFailureHandler((e) => {
alert(e)
})
.uploadFile(form);
}
</script>
</body>
</html>ダイアログを表示させる処理（functions.gs - showForm）
画像をクリックしたとき、この処理で上記のダイアログ画面を呼び出す。
今回はshowModalDialog()を利用するが、サイドバーやモードレスなどを使っても良さそう。
function showForm() {
const fileName = 'dialog';
const title = 'ファイルアップロードの検証';
const html = HtmlService.createTemplateFromFile(fileName).evaluate();
SpreadsheetApp.getUi().showModalDialog(html, title);
}スプレッドシート側は、図形挿入して右上の三点リーダーからスクリプトを割り当てを選択し、設定する。
ダイアログから格納ボタンを押下した後のGAS側の処理（functions.gs - uploadFile）
マイドライブに準備したフォルダ内に、フォームから受け取ったファイルを渡す。
function uploadFile(form) {
// 格納したいフォルダのURLからidを取得: https://drive.google.com/drive/folders/*****
const folder = DriveApp.getFolderById('*****');
folder.createFile(form.targetFile);
}実際に実行した様子
（対象のフォルダに格納されていることを確認）
まとめ
実際に使うときは、formにちゃんとファイル渡せてるかチェックもしたいし、アップロードするときファイルに適切な名前をつけてドライブにあげたかったりるのでもう少し処理が複雑になる。
ちゃんと利用するときの感じでもまた気が向いたときに書こうかな。
この記事が気に入ったらサポートをしてみませんか？