Reactでファイルをアップロードし、進み具合を表示する方法

import { useCallback, useEffect, useRef, useState } from 'react';

export type UploadStatus = 'idle' | 'uploading' | 'processing' | 'done' | 'error' | 'canceled';

export type UploadState = {
  status: UploadStatus;
  loaded: number; // 送り終えたバイト数
  total: number; // 送るバイト数の合計
  message?: string;
};

export function useUpload(url: string) {
  const [state, setState] = useState<UploadState>({ status: 'idle', loaded: 0, total: 0 });
  const xhrRef = useRef<XMLHttpRequest | null>(null);

  const start = useCallback(
    (file: File) => {
      // 送っている途中なら、前のアップロードは止める
      const prev = xhrRef.current;
      xhrRef.current = null;
      prev?.abort();

      const xhr = new XMLHttpRequest();
      xhrRef.current = xhr;
      const isCurrent = () => xhrRef.current === xhr;
      setState({ status: 'uploading', loaded: 0, total: file.size });

      // 送る側の進み具合は xhr.upload に届く。リスナーは send() の前に付ける
      xhr.upload.onprogress = (event) => {
        if (!isCurrent() || !event.lengthComputable) return;
        setState({ status: 'uploading', loaded: event.loaded, total: event.total });
      };
      // 送り終えた。ここからはサーバーの応答を待つ
      xhr.upload.onload = () => {
        if (isCurrent()) setState((s) => ({ ...s, status: 'processing' }));
      };
      // サーバーの応答が届いた
      xhr.onload = () => {
        if (!isCurrent()) return;
        xhrRef.current = null;
        if (xhr.status >= 200 && xhr.status < 300) {
          setState((s) => ({ ...s, status: 'done' }));
        } else {
          setState((s) => ({ ...s, status: 'error', message: `サーバーがエラーを返しました（${xhr.status}）` }));
        }
      };
      xhr.onerror = () => {
        if (!isCurrent()) return;
        xhrRef.current = null;
        setState((s) => ({ ...s, status: 'error', message: '通信のエラーで送れませんでした' }));
      };
      xhr.onabort = () => {
        if (!isCurrent()) return;
        xhrRef.current = null;
        setState((s) => ({ ...s, status: 'canceled' }));
      };

      const body = new FormData();
      body.append('file', file);
      xhr.open('POST', url);
      xhr.send(body);
    },
    [url],
  );

  const cancel = useCallback(() => {
    xhrRef.current?.abort();
  }, []);

  // コンポーネントを外したら、送っている途中のアップロードも止める
  useEffect(() => () => xhrRef.current?.abort(), []);

  return { state, start, cancel };
}

import { useState } from 'react';
import { useUpload, type UploadStatus } from './useUpload';

const labels: Record<UploadStatus, string> = {
  idle: '未送信',
  uploading: '送信中',
  processing: 'サーバーの処理待ち',
  done: '完了',
  error: 'エラー',
  canceled: '中止しました',
};

export function UploadDemo({ url }: { url: string }) {
  const [file, setFile] = useState<File | null>(null);
  const { state, start, cancel } = useUpload(url);
  const busy = state.status === 'uploading' || state.status === 'processing';
  const percent = state.total > 0 ? Math.floor((state.loaded / state.total) * 100) : 0;

  return (
    <div>
      <input type="file" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
      <p>
        <button disabled={!file || busy} onClick={() => file && start(file)}>
          アップロード
        </button>
        <button disabled={state.status !== 'uploading'} onClick={cancel}>
          中止
        </button>
      </p>
      <progress value={state.loaded} max={state.total || 1} />
      <p>
        {percent}%（{(state.loaded / 1024 / 1024).toFixed(1)} / {(state.total / 1024 / 1024).toFixed(1)} MB）
      </p>
      <p>{labels[state.status]}</p>
      {state.message && <p>{state.message}</p>}
    </div>
  );
}

選んだファイルの大きさ (file.size): 5242880
押してから約1000ms: 18%（0.9 / 5.0 MB）、送信中
押してから約2500ms: 48%（2.4 / 5.0 MB）、送信中
送り終えた直後: 100%（5.0 / 5.0 MB）、サーバーの処理待ち、サーバーの記録 {"id":1,"contentLength":5243079,"received":5243079,"ended":true,"aborted":false}
応答が届いたあと: 100%（5.0 / 5.0 MB）、完了

send() の前に付けた progress の回数 20、間隔 最小 97ms、最大 101ms、中央値 101ms

最後の3件: [{"t":5087,"status":"uploading","loaded":5160960,"total":5243079},{"t":5189,"status":"processing","loaded":5243079,"total":5243079},{"t":6175,"status":"done","loaded":5243079,"total":5243079}]
押してから送り終えるまで 5034ms、送り終えてから応答まで 986ms

結果: 100%（5.0 / 5.0 MB）、エラー、サーバーがエラーを返しました（500）

結果: 40%（2.0 / 5.0 MB）、エラー、通信のエラーで送れませんでした

サーバーが受けたリクエスト 2 件: [{"id":6,"contentLength":5243079,"received":2113536,"ended":false,"aborted":true,"cut":true},{"id":7,"contentLength":5243079,"received":2113536,"ended":false,"aborted":true,"cut":true}]

中止を押した直後: 40%（2.0 / 5.0 MB）、中止しました
1秒後のサーバーの記録: {"id":2,"contentLength":5243079,"received":2129920,"ended":false,"aborted":true}
中止のあとのボタン: アップロード disabled=false、中止 disabled=true

記事のフック: 外した時点でサーバーが受けたバイト数 約1589248、6秒後のサーバーの記録 {"id":3,"contentLength":5243079,"received":1605632,"ended":false,"aborted":true}
外したときに止めない書き方: 外した時点でサーバーが受けたバイト数 約1589248、6秒後のサーバーの記録 {"id":4,"contentLength":5243079,"received":5243079,"ended":true,"aborted":false}

send() の前に付けた progress の回数 20、間隔 最小 97ms、最大 101ms、中央値 101ms
send() のあとに付けた progress の回数 0

  [console.error] Failed to load resource: net::ERR_ALPN_NEGOTIATION_FAILED
ReadableStream を本文にした fetch: TypeError: Failed to fetch（ページの通信は http/1.1）、サーバーに届いたリクエスト 0 件