file-typeを使って簡単にMIMEタイプを確認する

file-type便利

MIMEタイプは正確に知ろうと思うとマジックナンバー(フォーマット識別子)によって判断しなければならないです。
しかし、マジックナンバーを確認するにはファイルの先頭文字列を確認しなければならず面倒くさいです。

しかし、パッケージfile-typeを使えば、簡単に判別できます。
https://github.com/sindresorhus/file-type

サポート対象のファイルは、READMEに記載されているので確認しておきましょう。

パッケージのコードをみるとわかるのですが、これだけのファイルの種類をマジックナンバー を見て判別するために実装するのは心が折れそうな感じなので、多くの種類のファイルを扱う必要が出てきたときは便利なパッケージになっています。

Gatsby　(ライブラリ@pixel-point/gatsby-source-wordpress)　でも使われています。

使い方

今回は、ブラウザで使う方法を記載します。
ブラウザで使う場合はfile-type/browserからインポートしたメソッドを使います。

Reactで試したのでJSXでの例です。

import { fromBlob } from 'file-type/browser';

const App: FC = () => (
  <input
    type="file"
    onChange={async (e) => {
      if (!e.target.files) {
        return;
      }
      const fileType = await fromBlob(e.target.files[0]);
      console.log(`ext: ${fileType?.ext}`); // ext: jpg
      console.log(`mine: ${fileType?.mime}`); // mine: image/jpeg
    }}
  ></input>
);

export default App;

例のようにファイルを選択した拡張子とMINEタイプが取得できます。
この拡張子の文字列fileType.extは、文字列リテラル型FileExtensionの文字列が返ってくるため、実際の拡張子が返ってくるわけではないので注意しましょう。