ローカルのファイルをGoogle Driveの指定フォルダにアップロードする
このようなフォームを作ってみる
フォームの例（画像）
アップロードする手順
- 「ファイルを選択」をクリックする
- ローカルファイルの選択画面が開く
- 任意のファイルを選択して「開く」をクリックする
- 「選択されていません」に選択したファイル名が表示される
- 「Submit」をクリックする
- 指定したフォルダにファイルがアップロードされる
- アップロードしたファイルのURLがアラートに出る
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(formObject) {
var folder_id = "FOLDER_ID";
var folder = DriveApp.getFolderById(folder_id);
var file = formObject.myFile;
var drive_file = folder.createFile(file);
var file_url = drive_file.getUrl();
return file_url;
}
|
意訳この機能がやること 指定したHTMLファイルを表示する この機能がやること アップロード先のフォルダIDを指定して フォルダを指定して formObjectの中のnameがmyFileの要素を取得して そのファイルをアップロードして そのURLを取得して 返す |
index.html
<!DOCTYPE html>
<html>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<input name="myFile" type="file" />
<input type="submit" value="Submit" />
</form>
<script>
window.addEventListener('load', preventFormSubmit);
function preventFormSubmit() {
var form = document.getElementById("myForm");
form.addEventListener('submit', function(event) {
event.preventDefault();
});
}
function handleFormSubmit(formObject) {
google.script.run
.withSuccessHandler(updateUrl)
.processForm(formObject);
}
function updateUrl(url) {
alert(url);
}
</script>
</body>
</html>
|
意訳これはHTML5文書です フォームを置く ファイルをアップロードするためのボタンを置く サブミットボタンを置く ページが読み込まれたらpreventFormSubmitを実行する この機能がやること idがmyFormの要素を取得して submit が押されたときに実行するデフォルトのイベントを 無効化する この機能がやること .gsファイルを実行する 成功したらupdateUrlを実行する 実行する.gsファイルはprocessFormでformObjectを渡す この機能がやること 返ってきたurlをアラートに出す |
参考
HTML Service: Communicate with Server Functions / Forms
https://developers.google.com/apps-script/guides/html/communication#forms
HTML Service: Communicate with Server Functions / Forms
https://developers.google.com/apps-script/guides/html/communication#forms
