useFileReader.tsx

useFileReader.tsx

import { useSyncExternalStore } from "react";

enum ReadyState {
  EMPTY,
  LOADING,
  DONE,
}

const useFileReader = () => {
  const fileReader = new FileReader();

  // Error may be"AbortError" DOMException
  const error = useSyncExternalStore(
    (onStoreChange) => {
      fileReader.addEventListener("error", onStoreChange);
      fileReader.addEventListener("abort", onStoreChange);

      return () => {
        fileReader.removeEventListener("error", onStoreChange);
        fileReader.removeEventListener("abort", onStoreChange);
      };
    },
    () => fileReader.error,
  );
  const readyState = useSyncExternalStore(
    (onStoreChange) => {
      fileReader.addEventListener("loadend", onStoreChange);

      return () => fileReader.removeEventListener("loadend", onStoreChange);
    },
    (): ReadyState => fileReader.readyState,
  );
  const result = useSyncExternalStore(
    (onStoreChange) => {
      fileReader.addEventListener("load", onStoreChange);

      return () => fileReader.removeEventListener("load", onStoreChange);
    },
    () => fileReader.result,
  );

  return {
    fileReader,
    error,
    readyState,
    result,
  };
};

export { useFileReader, ReadyState };

How to use:

  const { fileReader, error, readyState, result } = useFileReader();

  if (readyState === ReadyState.EMPTY) {
    fileReader.readAsDataURL(file);
  }

  if (result !== null) {
    // do whatever
  }