【JavaScript入門】ドラック＆ドロップとファイルの読み込む（imageArea.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
 ├─ index.js                    ← API/サーバ側（今回触れず）
 ├─ upload_images/
 └─ post-dat.txt

/* ---------------------------------------------------
   imageArea.js
   - #imageArea で画像ファイルを受け取り Canvas に描画
   - 受け取り方法は ①ドラッグ＆ドロップ ②クリック→ファイルダイアログ
   - 描画完了後は storage.js の saveCanvasToStorage() を呼び
     次回アクセス時に自動復元できるようにする
--------------------------------------------------- */
window.addEventListener('DOMContentLoaded', () => {
  const dropZone   = document.querySelector('#imageArea');
  const hiddenFile = document.querySelector('#file');
  const canvas     = document.querySelector('#view');
  const ctx        = canvas.getContext('2d');
  const noView     = document.querySelector('#noView');

  /* === 1. ドラッグオーバー時のハイライト === */
  ['dragenter', 'dragover'].forEach(ev =>
    dropZone.addEventListener(ev, e => {
      e.preventDefault();              // デフォルト挙動(ブラウザ遷移)を阻止
      dropZone.classList.add('isDrag'); // CSS で枠色変更など
    }));

  /* === 2. ドラッグアウト時にハイライト解除 === */
  ['dragleave', 'drop'].forEach(ev =>
    dropZone.addEventListener(ev, () => dropZone.classList.remove('isDrag')));

  /* === 3. ファイルをドロップした瞬間 === */
  dropZone.addEventListener('drop', async e => {
    e.preventDefault();
    if (!e.dataTransfer.files.length) return;
    const file = e.dataTransfer.files[0];
    await drawImageFile(file);
  });

  /* === 4. クリックで隠し <input type=file> を起動 === */
  dropZone.addEventListener('click', () => hiddenFile.click());

  /* === 5. input でファイル選択された場合 === */
  hiddenFile.addEventListener('change', async () => {
    if (!hiddenFile.files.length) return;
    const file = hiddenFile.files[0];
    await drawImageFile(file);
    hiddenFile.value = '';             // 同じファイルでも change が発火するようリセット
  });

  /* -------------------------------------------------
     drawImageFile()
     指定 File → Base64 取得 → <img> → Canvas 描画
  ------------------------------------------------- */
  async function drawImageFile(file){
    if (!file.type.startsWith('image/')){
      alert('画像ファイルを指定してください');
      return;
    }
    try{
      // FileReader を Promise ラップで DataURL 取得
      const dataURL = await readAsDataURL(file);

      // <img> に読み込んでから Canvas へ描画
      await new Promise((res, rej) => {
        const img = new Image();
        img.onload = () => res(img);
        img.onerror= () => rej(new Error('画像の読み込みに失敗しました'));
        img.src = dataURL;
      }).then(img => {
        // Canvas のサイズをアップロード画像の比率で調整したい場合はここで
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        canvas.style.display = 'block';
        noView.style.display = 'none';
        canvas.setAttribute('time', Date.now());
      });

      // 永続化 (storage.js)
      saveCanvasToStorage();

    }catch(err){
      console.error(err);
      alert('ファイルの読み込みに失敗しました');
    }
  }

  /* -------------------------------------------------
     readAsDataURL() : File → Base64 を Promise 化
  ------------------------------------------------- */
  function readAsDataURL(file){
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload  = () => resolve(reader.result);
      reader.onerror = () => reject(reader.error);
      reader.readAsDataURL(file);        // ★ここが本題
    });
  }
});