LoginSignup
7
6

More than 5 years have passed since last update.

Google Apps Scriptを使ってアップロードされた画像ファイルをGメールで送信する

Posted at

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" 

最終コード

最終的には下記のようなコードになりました。
流れとしてはこのようになっています。
1. 指定されたファイルをGoogleドライブにアップロード
2. フォームにて入力されたコメントとアップロードされたファイルを元にメール本文を作成
3. メールを送信
4. 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>
7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6