GASでドライブに送ったPDFの中身が適切でない...

Question

実現したいこと

htmlのinputタグ(type="file")でPDFをアップロードしてGASに送って、Googleドライブに保存したいのですが、実際にドライブに保存されたPDFには、以下の文章が記載されたものが保存されており、適切でありませんでした。わかる方がいらっしゃたら教えていただきたいです。

発生している問題・エラーメッセージ![イメージ説明]

実際にPDFファイルとして保存されてたもの⇩
(https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-17/89e67127-5c69-47b2-aaee-5fafea843ec3.png)

該当のソースコード

  <div class="input">
    <form action="https://script.google.com/macros/s/AKfycbw6csvxkY10UG5D_eNNPSsqTI0sxhm5qkhBHSRrS_nM4wKfrd1cFUs1Sp0Q4L1AXCbwQg/exec" method="POST">

      <!--ほかの質問は略-->

      <div style="height: 20px;"></div>
      <!--No.3-->
      <legend style="text-align: start;">身分証明書の提出(提出可能書類から1点)*<br>提出可能書類(運転免許証, 運転経歴証明書, パスポート, マイナンバーカード, 在留カード・特別永住者証明書, 官公庁化顔写真を貼付した各種福祉手帳(障がい者手帳など), 各種健康保険証, 顔写真が貼付されていない各種福祉手帳(母子健康手帳など), 住民票の写し・住民票の記載事項証明書, 印鑑登録証明書)</legend>
      <input type="file" name="fileUpload" accept=".pdf" />
      
      <div style="height: 20px;"></div>
      <div style="width: 100%;text-align: center;"><input id="playButton" class="btn" type="submit" value="送信"></div>
    </form>
    <audio id="Audio" src="btn.mp3"></audio>
    <iframe name="audioFrame" style="display:none;"></iframe>
  </div>

  <script>
    var audio = document.getElementById("Audio");
    var playButton = document.getElementById("playButton");
          
    playButton.addEventListener('click', function() {
      audio.play();
      alert("コメントを送信しました。");
    });
  </script>

// フォルダ内で使用可能なファイル名を取得する関数
function getNextAvailableFileName(folder) {
  var fileNameBase = "file";
  var fileExtension = ".pdf";
  var counter = 1;

  // フォルダ内のファイルを取得
  var files = folder.getFiles();

  // 連番のファイル名が存在するか確認
  while (files.hasNext()) {
    var file = files.next();
    var existingFileName = file.getName();
    var expectedFileName = fileNameBase + counter + fileExtension;

    // 連番が存在する場合、カウンターを増やして再試行
    if (existingFileName === expectedFileName) {
      counter++;
    } else {
      // 連番が存在しない場合、そのファイル名を使用
      return expectedFileName;
    }
  }

  // すべての連番が使用されている場合、最後の連番を使用
  return fileNameBase + counter + fileExtension;
}

// 5桁の乱数を生成して、重複がないか確認する関数
function generateUniqueRandomNumber(existingNumbers) {
  var newNumber;
  do {
    newNumber = Math.floor(10000 + Math.random() * 90000);
  } while (existingNumbers.indexOf(newNumber) !== -1);
  return newNumber;
}

function sendMail(emailAdress,name,birthday,sex, pdfId) {
  if(sex=="male"){var Sex = "男性"}else {var Sex = "女性"}
  const recipient = '[e-mail]';　        　　　　  　//送信先のメールアドレス
  const subject = '身分証確認用メール'; 　　     　 　//件名
  const recipientName = name;　                   　//送信先の担当者名
  const body = `☆新規ユーザー☆\n氏名：${recipientName}\n生年月日：${birthday}\n性別：${Sex}\nemail：${emailAdress}\n`
    + '\n\n＊身分確認後は許諾用URLより手続きを行ってください。＊\n';                 
        //本文

    //添付ファイルの取得
  let attachmentFile = DriveApp.getFileById(pdfId).getBlob();

  let options = {
    attachments :attachmentFile,
    name: 'メール担当 ○○'
  };
  GmailApp.sendEmail(recipient, subject, body, options);
}

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  ss1 = new Ssheet(ssID1);


  var columnIndex = 2; // 例としてA列を指定
  var data = sheet.getRange(1, columnIndex, sheet.getLastRow(), 2).getValues();
  var rowData = [];
  rowData.push(new Date()); 
  // 5桁の乱数を生成してセルに代入
  var randomNumber=0;
  for (var i = 0; i < data.length; i++) {
    randomNumber = generateUniqueRandomNumber(data);
  }

//ほかの質問のセル追加は略
  
  var blob = Utilities.newBlob(e.postData.getDataAsString(), e.postData.getContentType(), e.parameter.fileUpload);
  // ファイルを保存するGoogle Driveのフォルダ
  var folder = DriveApp.getFolderById("1hKsF5Z-nFhq0bQk6PTZxStaAfk4yFmRY");

  // フォルダ内で使用可能なファイル名を取得
  var fileName = getNextAvailableFileName(folder);

  // ファイル名を指定してファイルを保存
  var file = folder.createFile(blob.setName(fileName));

  // 保存したファイルのURLを取得
  var fileUrl = file.getUrl();
  var fileId = file.getId();
  rowData.push(fileUrl);
  rowData.push(e.parameter.other);
  sendMail(e.parameter.email,e.parameter.name,e.parameter.birthday,e.parameter.contact3, fileId);


  sheet.appendRow(rowData); 
  return 0; 

  

}

Comments

[退会済みユーザー]

htmlから、アップロードに関する部分の情報が故意に省略されているため、現状のままではおそらく誰も回答できないでしょう。
本文を編集して全部のコードを追記いただけますか？

[katokato123456]

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。

Answer 1

form に action の URL を指定している場合にファイルを送信するには、form の enctype に multipart/form-data の指定が必要です。

enctype を省略するとデフォルトで application/x-www-form-urlencoded になるので、ファイルを送信しても中身が送られず、質問にあるような変な文字列が送られるだけです。

しかし GAS の web アプリでは、 enctype に multipart/form-data を指定するだけではファイルを正常に送ることはできません。（仕様）
GASでやるには、HTTPリクエストをごりごり書く必要があります。

それは面倒なので、submitイベントを捕捉して、その中でbase64にエンコードして、fetch等で送るのが楽。
質問のコードでは、GASで受け取ってデータ加工してるので google.script.runが使える。

なお、仮に省略されてる部分に起因するバグや要件の違いがあっても対応できませんので、御自分で調整してください。

<div class="input">
  <form>

      <!--ほかの質問は略-->

    <div style="height: 20px;"></div>
    <!--No.3-->
    <legend style="text-align: start;">身分証明書　～長くて見にくいので略～
    </legend>
    <input id="file-upload" type="file" name="fileUpload" accept=".pdf" />

    <div style="height: 20px;"></div>
    <div style="width: 100%;text-align: center;">
      <input id="playButton" class="btn" type="submit" value="送信">
    </div>
  </form>
  <audio id="Audio" src="btn.mp3"></audio>
  <iframe name="audioFrame" style="display:none;"></iframe>
</div>

<script>
    const audio = document.getElementById("Audio");
    const playButton = document.getElementById("playButton");
    const form = document.querySelectorAll('form')[0];

    // submitイベントを捕捉
    form.addEventListener('submit', function(event) {
      const file = document.getElementById('file-upload').files[0];
      const reader = new FileReader();
      const formData = new FormData(this);
      // ファイル読込が完了したら送信
      reader.addEventListener('load', (e) => {
        const base64EncodedFileContent = reader.result.split(',')[1];
        google.script.run.processFormData(
          base64EncodedFileContent, JSON.stringify([...formData])
        );
        audio.play();
        alert("コメントを送信しました。");
      }, false);
      if (file) {
        // ファイルを読み込む
        reader.readAsDataURL(file);
      } else {
          alert("ファイルが指定されていません");
          event.preventDefault();
      }
    });
</script>

// フォルダ内で使用可能なファイル名を取得する関数
function getNextAvailableFileName(folder) {
 // 同名のファイルを作ってしまう論理バグがあるが、ここでは本題ではないので修正は省略
}

..他の関数は変える必要がないので略..

function doPost(e) {
  // 中身全削除。
  return 0;
}

// ファイル生成、フォーム内容加工の関数。
function processFormData(base64EncodedFileContent, formdata) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  ss1 = new Ssheet(ssID1); // 謎

  var columnIndex = 2; // 例としてA列を指定
  var data = sheet.getRange(1, columnIndex, sheet.getLastRow(), 2).getValues();
  var rowData = [];
  rowData.push(new Date());
  // 5桁の乱数を生成してセルに代入
  var randomNumber = 0;
  for (var i = 0; i < data.length; i++) {
    randomNumber = generateUniqueRandomNumber(data);
  }

  //ほかの質問のセル追加は略
  const e = {parameter: Object.fromEntries(JSON.parse(formdata))};
  var blob = Utilities.newBlob(Utilities.base64Decode(base64EncodedFileContent), 'application/pdf', fileName);
  // ファイルを保存するGoogle Driveのフォルダ
  var folder = DriveApp.getFolderById("1hKsF5Z-nFhq0bQk6PTZxStaAfk4yFmRY");
  var fileName = getNextAvailableFileName(folder);
  // ファイル名を指定してファイルを保存
  var file = folder.createFile(blob.setName(fileName));
  var fileUrl = file.getUrl();
  var fileId = file.getId();
  rowData.push(fileUrl);
  rowData.push(e.parameter.other);
  sendMail(e.parameter.email, e.parameter.name, e.parameter.birthday, e.parameter.contact3, fileId);
  sheet.appendRow(rowData);

}