画像をアップロードするHook

useUploadImage.tsx

import React, { useCallback, useState } from 'react';

const useUploadImage = (url: string, file: File) => {
  const [state, setState] = useState<{
    uploadPercent: number;
    downloadPercent: number;
    state:
      | 'none'
      | 'uploading'
      | 'downloading'
      | 'upload-rejected'
      | 'download-rejected'
      | 'success';
    error?: Error;
    response?: ResponseType;
  }>({
    uploadPercent: 0,
    downloadPercent: 0,
    state: 'none',
    error: undefined,
    response: undefined,
  });

  const uploadImage = useCallback(() => {
    const formData = new FormData();
    formData.append('image', file);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url);

    xhr.upload.onloadstart = () => {
      setState({
        uploadPercent: 0,
        downloadPercent: 0,
        state: 'uploading',
        error: undefined,
        response: undefined,
      });
    };
    xhr.upload.onprogress = (event) => {
      if (event.lengthComputable) {
        const uploadPercent = (event.loaded / event.total) * 100;
        setState((prev) => ({ ...prev, uploadPercent }));
      }
    };
    xhr.upload.onload = () => {
      setState((prev) => ({ ...prev, uploadPercent: 100 }));
    };
    xhr.upload.onabort =
      xhr.upload.onerror =
      xhr.upload.ontimeout =
        () => {
          setState((prev) => ({
            ...prev,
            state: 'upload-rejected',
            error: new Error('failed to upload image'),
          }));
        };

    xhr.onloadstart = () => {
      setState((prev) => ({ ...prev, state: 'downloading', downloadPercent: 0 }));
    };
    xhr.onprogress = (event) => {
      if (event.lengthComputable) {
        const downloadPercent = (event.loaded / event.total) * 100;
        setState((prev) => ({ ...prev, downloadPercent }));
      }
    };
    xhr.onload = () => {
      setState((prev) => ({
        ...prev,
        downloadPercent: 100,
        state: 'success',
        response: xhr.response,
      }));
    };
    xhr.onabort =
      xhr.onerror =
      xhr.ontimeout =
        () => {
          setState((prev) => ({
            ...prev,
            state: 'download-rejected',
            error: new Error('failed to download image'),
          }));
        };

    xhr.send();
  }, [file, url]);

  return { state, uploadImage };
};