画像が不正ファイルの時に実行が失敗する

[kokoichi206]

問題は2つ

• 実行に失敗した時にログから原因がわからない
• .png っていう名前のものが通ってしまうっぽい
  • 今は input tag の accept っていう attribute に image/png で設定している
  • https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/accept

[kokoichi206]

Line Notify

https://notify-bot.line.me/doc/ja/

imageFile 省略可能 File LINE上の画像サーバーにアップロードします。対応している画像形式は、png, jpegです。

[kokoichi206]

PNG のマジックナンバーをチェックする

Portable Network Graphics https://en.wikipedia.org/wiki/PNG

function checkPNG(file) {
  const reader = new FileReader();

  // ファイルの最初の8バイトを読み込む
  const blob = file.slice(0, 8);
  reader.readAsArrayBuffer(blob);

  reader.onloadend = function (e) {
    if (e.target.readyState === FileReader.DONE) {
      const arr = new Uint8Array(e.target.result);
      if (
        arr[0] === 0x89 &&
        arr[1] === 0x50 &&
        arr[2] === 0x4e &&
        arr[3] === 0x47 &&
        arr[4] === 0x0d &&
        arr[5] === 0x0a &&
        arr[6] === 0x1a &&
        arr[7] === 0x0a
      ) {
        console.log("This is a PNG file.");
        return true;
      } else {
        console.log("This is not a PNG file.");
        return false;
      }
    }
  };
}