Google Apps Script（以下GAS）を使用してファイルをアップロードする方法が調べても日本語の情報が古くて役に立たなかったためドキュメントを漁った結果＋αのメモ。
##情報が古くて役に立たない
日本語の情報
https://groups.google.com/forum/#!topic/google-apps-api-japan/EaQzf5GwVp8
##最新の情報
公式ドキュメント（英語）
https://developers.google.com/apps-script/guides/html/communication#forms
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function processForm(formObject) {
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
return driveFile.getUrl();
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent forms from submitting.
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);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = '<a href="' + url + '">Got it!</a>';
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<input name="myFile" type="file" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
#サンプルを改造
##ついでにコメントも送信できるようにする
textareaを追加
html
<textarea name='mytext'></textarea>
textareaの読み込み
gas
mailbody.mytext = formObject.myText;
##Gメール送信部分
- htmlメール非対応の場合
not htmlと表示されます。 - ファイル指定方法はcidで指定したキーと
同じキーでinlineImagesにBlobを指定します。（下記例の場合"myfile"を指定）
メール送信
GmailApp.sendEmail(
'宛先メールアドレス',
'メールタイトル',
'not html',{
htmlBody: '<img src="cid:myfile">',
inlineImages:{myfile:formBlob},
}
);
##ファイルが指定されていない場合の考慮
ファイルが指定されていない場合、0バイトのUntitledというファイルが作成されてしまうため事前にサイズを確認しなければいけません。
0バイトファイル判定
formObject.myFile.getBytes().length > 0
しかし、このままだとIEとEdgeではエラーになってしまいます。（相変わらずめんどくさい）
調べた結果、IEとEdgeではformObject.myFileがundefinedとなるみたいなのでこの場合も除外します。
IE,Edge対応
typeof(formObject.myFile) != "undefined"
#最終コード
最終的には下記のようなコードになりました。
流れとしてはこのようになっています。
- 指定されたファイルをGoogleドライブにアップロード
- フォームにて入力されたコメントとアップロードされたファイルを元にメール本文を作成
- メールを送信
- Googleドライブに保存されたファイルのURLを返す
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function processForm(formObject) {
var mytext = formObject.myText;
if(typeof(formObject.myFile) != "undefined" && formObject.myFile.getBytes().length > 0){
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
var image = {myfile:formBlob};
}else{
var formBlob = null;
var image = {};
}
var mailbody = HtmlService.createTemplateFromFile('mail');
mailbody.mytext = mytext;
GmailApp.sendEmail(
'宛先メールアドレス',
'メールタイトル',
'not html',{
htmlBody: mailbody.evaluate().getContent(),
inlineImages:image,
}
);
if (formBlob){
return driveFile.getUrl();
}else{
return "";
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent forms from submitting.
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);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
}
function updateUrl(url) {
if (url){
var div = document.getElementById('output');
div.innerHTML = '<a href="' + url + '">Got it!</a>';
}
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<input name="myFile" type="file" /><br><br>
<textarea name="myText"></textarea>
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
mail.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<img src="cid:myfile"><br><?= mytext ?>
</body>
</html>