bytes.jsを使ってファイルサイズ表示を分かりやすくする

jsでFileを扱う際にsizeプロパティを利用するとファイルサイズを取得できる。

ただ、サイズがバイト数で返ってくるため人間にとってはパッと分かりづらい。

そこで、bytes.jsを使って単位付きの表示に変換することにした。

• インストール

yarn add bytes
yarn add -D @types/bytes

• 使い方

import bytes from 'bytes'
import React from 'react'

const Sample = () => {
  return (
    <>
      <p>{bytes(1024, { unitSeparator: ' ' })}</p>
      <p>{bytes(1024 * 1024, { unitSeparator: ' ' })}</p>
      <p>{bytes(1024 * 1024 * 1024, { unitSeparator: ' ' })}</p>
    </>
  )
}

export default Sample

• 結果

1 KB
1 MB
1 GB

分かりやすい。