【JavaScript入門】画面遷移しないでファイルをサーバーに送信する（sendArea.js）

node-js/
 └─ app/
     ├─ index.html
     ├─ style.css
     └─ js/
          ├─ common.js
          ├─ storage.js
          ├─ imageArea.js
          ├─ imageEffects.js
          ├─ controlArea.js
          ├─ commentArea.js
          ├─ sendArea.js   ← ★今回実装
          ├─ dateFormat.js
          └─ postListArea.js

/* ---------------------------------------------------
   sendArea.js
   - 画像 + コメント をサーバーへ POST
   - 完了後タイムラインを更新
--------------------------------------------------- */
window.addEventListener('DOMContentLoaded', () => {

  /* === 対象 DOM === */
  const btnSend = document.querySelector('#send');     // 投稿ボタン
  const txtArea = document.querySelector('#comment');  // コメント欄
  const canvas  = document.querySelector('#view');     // プレビューキャンバス

  /* === クリックで非同期送信 === */
  btnSend.addEventListener('click', async () => {

    /* ---------- 1. 入力バリデーション ---------- */
    const comment = txtArea.value;
    const lenMax  = parseInt(txtArea.dataset.lenmax, 10);

    // 文字数チェック
    if (comment.length > lenMax){
      alert(`コメントが ${comment.length} 文字です。\n最大 ${lenMax} 文字を超えています。`);
      return;
    }
    // 画像チェック
    if (!canvas.getAttribute('time')){
      alert('画像が読み込まれていません。');
      return;
    }

    /* ---------- 2. Canvas → PNG Blob 変換 ---------- */
    // Canvas を Base64 → バイナリ配列 → Blob へ
    const base64 = canvas.toDataURL('image/png').split(',')[1];
    const bin    = atob(base64);                 // Base64 → binary string
    const buf    = new Uint8Array(bin.length);
    for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
    const blob   = new Blob([buf.buffer], {type: 'image/png'});

    /* ---------- 3. FormData に詰めて送信 ---------- */
    const fd = new FormData();
    fd.append('comment', comment);
    fd.append('image',   blob);                  // `<input type=file>` 相当

    try{
      const res = await fetch('/post', {method:'POST', body: fd});
      if (!res.ok) throw res;                    // ステータス 2xx 以外は例外
      await res.text();                          // サーバ応答 (ここでは文字列想定)

      updatePostList();                          // 🎉 タイムラインを再取得
      alert('投稿が完了しました！');
    }catch(err){
      alert('投稿に失敗しました。サーバーを確認してください。');
      console.error(err);
    }
  });

});