Reactで、ファイルの大きさを読みやすい単位で表示する方法

// バイト数を、読みやすい単位の文字列にする

export type Base = 1000 | 1024;

const UNITS: Record<Base, readonly string[]> = {
  1000: ['B', 'kB', 'MB', 'GB', 'TB', 'PB'],
  1024: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'],
};

export function formatFileSize(bytes: number, base: Base = 1000, digits = 1, locale?: string): string {
  if (!Number.isFinite(bytes) || bytes < 0) return '-';
  const units = UNITS[base];
  let i = 0;
  let value = bytes;
  while (value >= base && i < units.length - 1) {
    value /= base;
    i++;
  }
  // バイトの桁は小数にしない
  const d = i === 0 ? 0 : digits;
  // 丸めると base に届くとき（999.96 kB → 1000.0 kB）は、次の単位にする
  const p = 10 ** d;
  if (Math.round(value * p) / p >= base && i < units.length - 1) {
    value /= base;
    i++;
  }
  const number = new Intl.NumberFormat(locale, {
    minimumFractionDigits: d,
    maximumFractionDigits: d,
  }).format(value);
  return `${number} ${units[i]}`;
}

// 丸める前の値（バイト数）を、桁区切りで書く
export function formatBytes(bytes: number, locale?: string): string {
  return `${new Intl.NumberFormat(locale).format(bytes)} バイト`;
}

kibibyte: RangeError: Invalid unit argument for Intl.NumberFormat() 'kibibyte'

import { useId, useState } from 'react';
import { formatBytes, formatFileSize, type Base } from './filesize';

export function FileSizeList() {
  const id = useId();
  const [files, setFiles] = useState<File[]>([]);
  const [base, setBase] = useState<Base>(1000);

  const total = files.reduce((sum, f) => sum + f.size, 0);

  return (
    <div className="filesize">
      <label htmlFor={`${id}-file`}>ファイルを選ぶ</label>
      <input
        id={`${id}-file`}
        type="file"
        multiple
        onChange={(e) => setFiles(Array.from(e.target.files ?? []))}
      />

      <fieldset>
        <legend>単位</legend>
        <label>
          <input type="radio" name={`${id}-base`} checked={base === 1000} onChange={() => setBase(1000)} />
          1000 ごと（kB、MB）
        </label>
        <label>
          <input type="radio" name={`${id}-base`} checked={base === 1024} onChange={() => setBase(1024)} />
          1024 ごと（KiB、MiB）
        </label>
      </fieldset>

      {files.length > 0 && (
        <table>
          <tbody>
            {files.map((f, i) => (
              <tr key={`${i}-${f.name}`}>
                <td>{f.name}</td>
                <td className="size">
                  <span title={formatBytes(f.size)}>{formatFileSize(f.size, base)}</span>
                </td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr>
              <th scope="row">合計 {files.length} 件</th>
              <td className="size">
                <span title={formatBytes(total)}>{formatFileSize(total, base)}</span>
              </td>
            </tr>
          </tfoot>
        </table>
      )}
    </div>
  );
}

.filesize {
  display: grid;
  gap: 8px;
  max-width: 420px;
}
.filesize fieldset {
  display: grid;
  gap: 4px;
  border: none;
  padding: 0;
}
.filesize table {
  border-collapse: collapse;
}
.filesize td,
.filesize th {
  border-bottom: 1px solid #cfe9ef;
  padding: 6px 4px;
  text-align: left;
  font-weight: normal;
}
.filesize .size {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.filesize tfoot {
  color: #067a98;
  font-weight: bold;
}