dropzone.tsx

/* eslint-disable @typescript-eslint/no-empty-object-type */
import { cn } from "@/lib/utils";
import {
  createContext,
  forwardRef,
  useCallback,
  useContext,
  useId,
  useMemo,
  useReducer,
  useState,
} from "react";
import {
  Accept,
  FileRejection,
  useDropzone as rootUseDropzone,
} from "react-dropzone";
import { Button, ButtonProps } from "./ui/button";

type DropzoneResult<TUploadRes, TUploadError> =
  | {
      status: "pending";
    }
  | {
      status: "error";
      error: TUploadError;
    }
  | {
      status: "success";
      result: TUploadRes;
    };

export type FileStatus<TUploadRes, TUploadError> = {
  id: string;
  fileName: string;
  file: File;
  tries: number;
} & (
  | {
      status: "pending";
      result?: undefined;
      error?: undefined;
    }
  | {
      status: "error";
      error: TUploadError;
      result?: undefined;
    }
  | {
      status: "success";
      result: TUploadRes;
      error?: undefined;
    }
);

const fileStatusReducer = <TUploadRes, TUploadError>(
  state: FileStatus<TUploadRes, TUploadError>[],
  action:
    | {
        type: "add";
        id: string;
        fileName: string;
        file: File;
      }
    | {
        type: "remove";
        id: string;
      }
    | ({
        type: "update-status";
        id: string;
      } & DropzoneResult<TUploadRes, TUploadError>),
): FileStatus<TUploadRes, TUploadError>[] => {
  switch (action.type) {
    case "add":
      return [
        ...state,
        {
          id: action.id,
          fileName: action.fileName,
          file: action.file,
          status: "pending",
          tries: 1,
        },
      ];
    case "remove":
      return state.filter((fileStatus) => fileStatus.id !== action.id);
    case "update-status":
      return state.map((fileStatus) => {
        if (fileStatus.id === action.id) {
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          const { id, type, ...rest } = action;
          return {
            ...fileStatus,
            ...rest,
            tries:
              action.status === "pending"
                ? fileStatus.tries + 1
                : fileStatus.tries,
          } as FileStatus<TUploadRes, TUploadError>;
        }
        return fileStatus;
      });
  }
};
type DropZoneErrorCode = (typeof dropZoneErrorCodes)[number];
const dropZoneErrorCodes = [
  "file-invalid-type",
  "file-too-large",
  "file-too-small",
  "too-many-files",
] as const;

const getDropZoneErrorCodes = (fileRejections: FileRejection[]) => {
  const errors = fileRejections.map((rejection) => {
    return rejection.errors
      .filter((error) =>
        dropZoneErrorCodes.includes(error.code as DropZoneErrorCode),
      )
      .map((error) => error.code) as DropZoneErrorCode[];
  });
  return Array.from(new Set(errors.flat()));
};

const getRootError = (
  errorCodes: DropZoneErrorCode[],
  limits: {
    accept?: Accept;
    maxSize?: number;
    minSize?: number;
    maxFiles?: number;
  },
) => {
  const errors = errorCodes.map((error) => {
    switch (error) {
      case "file-invalid-type":
        const acceptedTypes = Object.values(limits.accept ?? {})
          .flat()
          .join(", ");
        return `only ${acceptedTypes} are allowed`;
      case "file-too-large":
        const maxMb = limits.maxSize
          ? (limits.maxSize / (1024 * 1024)).toFixed(2)
          : "infinite?";
        return `max size is ${maxMb}MB`;
      case "file-too-small":
        const roundedMinSize = limits.minSize
          ? (limits.minSize / (1024 * 1024)).toFixed(2)
          : "negative?";
        return `min size is ${roundedMinSize}MB`;
      case "too-many-files":
        return `max ${limits.maxFiles} files`;
    }
  });
  const joinedErrors = errors.join(", ");
  return joinedErrors.charAt(0).toUpperCase() + joinedErrors.slice(1);
};

type UseDropzoneProps<TUploadRes, TUploadError> = {
  onDropFile: (
    file: File,
  ) => Promise<
    Exclude<DropzoneResult<TUploadRes, TUploadError>, { status: "pending" }>
  >;
  onRemoveFile?: (id: string) => void | Promise<void>;
  onFileUploaded?: (result: TUploadRes) => void;
  onFileUploadError?: (error: TUploadError) => void;
  onAllUploaded?: () => void;
  onRootError?: (error: string | undefined) => void;
  maxRetryCount?: number;
  autoRetry?: boolean;
  validation?: {
    accept?: Accept;
    minSize?: number;
    maxSize?: number;
    maxFiles?: number;
  };
  shiftOnMaxFiles?: boolean;
} & (TUploadError extends string
  ? {
      shapeUploadError?: (error: TUploadError) => string | void;
    }
  : {
      shapeUploadError: (error: TUploadError) => string | void;
    });

interface UseDropzoneReturn<TUploadRes, TUploadError> {
  getRootProps: ReturnType<typeof rootUseDropzone>["getRootProps"];
  getInputProps: ReturnType<typeof rootUseDropzone>["getInputProps"];
  onRemoveFile: (id: string) => Promise<void>;
  onRetry: (id: string) => Promise<void>;
  canRetry: (id: string) => boolean;
  fileStatuses: FileStatus<TUploadRes, TUploadError>[];
  isInvalid: boolean;
  isDragActive: boolean;
  rootError: string | undefined;
  inputId: string;
  rootMessageId: string;
  rootDescriptionId: string;
  getFileMessageId: (id: string) => string;
}

const useDropzone = <TUploadRes, TUploadError = string>(
  props: UseDropzoneProps<TUploadRes, TUploadError>,
): UseDropzoneReturn<TUploadRes, TUploadError> => {
  const {
    onDropFile: pOnDropFile,
    onRemoveFile: pOnRemoveFile,
    shapeUploadError: pShapeUploadError,
    onFileUploaded: pOnFileUploaded,
    onFileUploadError: pOnFileUploadError,
    onAllUploaded: pOnAllUploaded,
    onRootError: pOnRootError,
    maxRetryCount,
    autoRetry,
    validation,
    shiftOnMaxFiles,
  } = props;

  const inputId = useId();
  const rootMessageId = `${inputId}-root-message`;
  const rootDescriptionId = `${inputId}-description`;
  const [rootError, _setRootError] = useState<string | undefined>(undefined);

  const setRootError = useCallback(
    (error: string | undefined) => {
      _setRootError(error);
      if (pOnRootError !== undefined) {
        pOnRootError(error);
      }
    },
    [pOnRootError, _setRootError],
  );

  const [fileStatuses, dispatch] = useReducer(fileStatusReducer, []);

  const isInvalid = useMemo(() => {
    return (
      fileStatuses.filter((file) => file.status === "error").length > 0 ||
      rootError !== undefined
    );
  }, [fileStatuses, rootError]);

  const _uploadFile = useCallback(
    async (file: File, id: string, tries = 0) => {
      const result = await pOnDropFile(file);

      if (result.status === "error") {
        if (autoRetry === true && tries < (maxRetryCount ?? Infinity)) {
          dispatch({ type: "update-status", id, status: "pending" });
          return _uploadFile(file, id, tries + 1);
        }

        dispatch({
          type: "update-status",
          id,
          status: "error",
          error:
            pShapeUploadError !== undefined
              ? pShapeUploadError(result.error)
              : result.error,
        });
        if (pOnFileUploadError !== undefined) {
          pOnFileUploadError(result.error);
        }
        return;
      }
      if (pOnFileUploaded !== undefined) {
        pOnFileUploaded(result.result);
      }
      dispatch({
        type: "update-status",
        id,
        ...result,
      });
    },
    [
      autoRetry,
      maxRetryCount,
      pOnDropFile,
      pShapeUploadError,
      pOnFileUploadError,
      pOnFileUploaded,
    ],
  );

  const onRemoveFile = useCallback(
    async (id: string) => {
      await pOnRemoveFile?.(id);
      dispatch({ type: "remove", id });
    },
    [pOnRemoveFile],
  );

  const canRetry = useCallback(
    (id: string) => {
      const fileStatus = fileStatuses.find((file) => file.id === id);
      return (
        fileStatus?.status === "error" &&
        fileStatus.tries < (maxRetryCount ?? Infinity)
      );
    },
    [fileStatuses, maxRetryCount],
  );

  const onRetry = useCallback(
    async (id: string) => {
      if (!canRetry(id)) {
        return;
      }
      dispatch({ type: "update-status", id, status: "pending" });
      const fileStatus = fileStatuses.find((file) => file.id === id);
      if (!fileStatus || fileStatus.status !== "error") {
        return;
      }
      await _uploadFile(fileStatus.file, id);
    },
    [canRetry, fileStatuses, _uploadFile],
  );

  const getFileMessageId = (id: string) => `${inputId}-${id}-message`;

  const dropzone = rootUseDropzone({
    accept: validation?.accept,
    minSize: validation?.minSize,
    maxSize: validation?.maxSize,
    onDropAccepted: async (newFiles) => {
      setRootError(undefined);

      // useDropzone hook only checks max file count per group of uploaded files, allows going over if in multiple batches
      const fileCount = fileStatuses.length;
      const maxNewFiles =
        validation?.maxFiles === undefined
          ? Infinity
          : validation?.maxFiles - fileCount;

      if (maxNewFiles < newFiles.length) {
        if (shiftOnMaxFiles === true) {
        } else {
          setRootError(getRootError(["too-many-files"], validation ?? {}));
        }
      }

      const slicedNewFiles =
        shiftOnMaxFiles === true ? newFiles : newFiles.slice(0, maxNewFiles);

      const onDropFilePromises = slicedNewFiles.map(async (file, index) => {
        if (fileCount + 1 > maxNewFiles) {
          await onRemoveFile(fileStatuses[index].id);
        }

        const id = crypto.randomUUID();
        dispatch({ type: "add", fileName: file.name, file, id });
        await _uploadFile(file, id);
      });

      await Promise.all(onDropFilePromises);
      if (pOnAllUploaded !== undefined) {
        pOnAllUploaded();
      }
    },
    onDropRejected: (fileRejections) => {
      const errorMessage = getRootError(
        getDropZoneErrorCodes(fileRejections),
        validation ?? {},
      );
      setRootError(errorMessage);
    },
  });

  return {
    getRootProps: dropzone.getRootProps,
    getInputProps: dropzone.getInputProps,
    inputId,
    rootMessageId,
    rootDescriptionId,
    getFileMessageId,
    onRemoveFile,
    onRetry,
    canRetry,
    fileStatuses: fileStatuses as FileStatus<TUploadRes, TUploadError>[],
    isInvalid,
    rootError,
    isDragActive: dropzone.isDragActive,
  };
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const DropZoneContext = createContext<UseDropzoneReturn<any, any>>({
  getRootProps: () => ({}) as never,
  getInputProps: () => ({}) as never,
  onRemoveFile: async () => {},
  onRetry: async () => {},
  canRetry: () => false,
  fileStatuses: [],
  isInvalid: false,
  isDragActive: false,
  rootError: undefined,
  inputId: "",
  rootMessageId: "",
  rootDescriptionId: "",
  getFileMessageId: () => "",
});

const useDropzoneContext = <TUploadRes, TUploadError>() => {
  return useContext(DropZoneContext) as UseDropzoneReturn<
    TUploadRes,
    TUploadError
  >;
};

interface DropzoneProps<TUploadRes, TUploadError>
  extends UseDropzoneReturn<TUploadRes, TUploadError> {
  children: React.ReactNode;
}
const Dropzone = <TUploadRes, TUploadError>(
  props: DropzoneProps<TUploadRes, TUploadError>,
) => {
  const { children, ...rest } = props;
  return (
    <DropZoneContext.Provider value={rest}>{children}</DropZoneContext.Provider>
  );
};
Dropzone.displayName = "Dropzone";

interface DropZoneAreaProps extends React.HTMLAttributes<HTMLDivElement> {}
const DropZoneArea = forwardRef<HTMLDivElement, DropZoneAreaProps>(
  ({ className, children, ...props }, forwardedRef) => {
    const context = useDropzoneContext();

    if (!context) {
      throw new Error("DropzoneArea must be used within a Dropzone");
    }

    const { onFocus, onBlur, onDragEnter, onDragLeave, onDrop, ref } =
      context.getRootProps();

    return (
      // A11y behavior is handled through Trigger. All of these are only relevant to drag and drop which means this should be fine?
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      <div
        ref={(instance) => {
          // TODO: test if this actually works?
          ref.current = instance;
          if (typeof forwardedRef === "function") {
            forwardedRef(instance);
          } else if (forwardedRef) {
            forwardedRef.current = instance;
          }
        }}
        onFocus={onFocus}
        onBlur={onBlur}
        onDragEnter={onDragEnter}
        onDragLeave={onDragLeave}
        onDrop={onDrop}
        {...props}
        aria-label="dropzone"
        className={cn(
          "flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
          context.isDragActive && "animate-pulse bg-black/5",
          context.isInvalid && "border-destructive",
          className,
        )}
      >
        {children}
      </div>
    );
  },
);
DropZoneArea.displayName = "DropZoneArea";

export interface DropzoneDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {}

const DropzoneDescription = forwardRef<
  HTMLParagraphElement,
  DropzoneDescriptionProps
>((props, ref) => {
  const { className, ...rest } = props;
  const context = useDropzoneContext();
  if (!context) {
    throw new Error("DropzoneDescription must be used within a Dropzone");
  }

  return (
    <p
      ref={ref}
      id={context.rootDescriptionId}
      {...rest}
      className={cn("pb-1 text-sm text-muted-foreground", className)}
    />
  );
});
DropzoneDescription.displayName = "DropzoneDescription";

interface DropzoneFileListContext<TUploadRes, TUploadError> {
  onRemoveFile: () => Promise<void>;
  onRetry: () => Promise<void>;
  fileStatus: FileStatus<TUploadRes, TUploadError>;
  canRetry: boolean;
  dropzoneId: string;
  messageId: string;
}

const DropzoneFileListContext = createContext<
  DropzoneFileListContext<unknown, unknown>
>({
  onRemoveFile: async () => {},
  onRetry: async () => {},
  fileStatus: {} as FileStatus<unknown, unknown>,
  canRetry: false,
  dropzoneId: "",
  messageId: "",
});

const useDropzoneFileListContext = () => {
  return useContext(DropzoneFileListContext);
};

interface DropZoneFileListProps
  extends React.OlHTMLAttributes<HTMLOListElement> {}

const DropzoneFileList = forwardRef<HTMLOListElement, DropZoneFileListProps>(
  (props, ref) => {
    const context = useDropzoneContext();
    if (!context) {
      throw new Error("DropzoneFileList must be used within a Dropzone");
    }
    return (
      <ol
        ref={ref}
        aria-label="dropzone-file-list"
        {...props}
        className={cn("flex flex-col gap-4", props.className)}
      >
        {props.children}
      </ol>
    );
  },
);
DropzoneFileList.displayName = "DropzoneFileList";

interface DropzoneFileListItemProps<TUploadRes, TUploadError>
  extends React.LiHTMLAttributes<HTMLLIElement> {
  file: FileStatus<TUploadRes, TUploadError>;
}

const DropzoneFileListItem = forwardRef<
  HTMLLIElement,
  DropzoneFileListItemProps<unknown, unknown>
>(({ className, ...props }, ref) => {
  const fileId = props.file.id;
  const {
    onRemoveFile: cOnRemoveFile,
    onRetry: cOnRetry,
    getFileMessageId: cGetFileMessageId,
    canRetry: cCanRetry,
    inputId: cInputId,
  } = useDropzoneContext();

  const onRemoveFile = useCallback(
    () => cOnRemoveFile(fileId),
    [fileId, cOnRemoveFile],
  );
  const onRetry = useCallback(() => cOnRetry(fileId), [fileId, cOnRetry]);
  const messageId = cGetFileMessageId(fileId);
  const isInvalid = props.file.status === "error";
  const canRetry = useMemo(() => cCanRetry(fileId), [fileId, cCanRetry]);
  return (
    <DropzoneFileListContext.Provider
      value={{
        onRemoveFile,
        onRetry,
        fileStatus: props.file,
        canRetry,
        dropzoneId: cInputId,
        messageId,
      }}
    >
      <li
        ref={ref}
        aria-label="dropzone-file-list-item"
        aria-describedby={isInvalid ? messageId : undefined}
        className={cn(
          "flex flex-col justify-center gap-2 rounded-md bg-muted/40 px-4 py-2",
          className,
        )}
      >
        {props.children}
      </li>
    </DropzoneFileListContext.Provider>
  );
});
DropzoneFileListItem.displayName = "DropzoneFileListItem";

interface DropzoneFileMessageProps
  extends React.HTMLAttributes<HTMLParagraphElement> {}

const DropzoneFileMessage = forwardRef<
  HTMLParagraphElement,
  DropzoneFileMessageProps
>((props, ref) => {
  const { children, ...rest } = props;
  const context = useDropzoneFileListContext();
  if (!context) {
    throw new Error(
      "DropzoneFileMessage must be used within a DropzoneFileListItem",
    );
  }

  const body =
    context.fileStatus.status === "error"
      ? String(context.fileStatus.error)
      : children;
  return (
    <p
      ref={ref}
      id={context.messageId}
      {...rest}
      className={cn(
        "h-5 text-[0.8rem] font-medium text-destructive",
        rest.className,
      )}
    >
      {body}
    </p>
  );
});
DropzoneFileMessage.displayName = "DropzoneFileMessage";
interface DropzoneMessageProps
  extends React.HTMLAttributes<HTMLParagraphElement> {}

const DropzoneMessage = forwardRef<HTMLParagraphElement, DropzoneMessageProps>(
  (props, ref) => {
    const { children, ...rest } = props;
    const context = useDropzoneContext();
    if (!context) {
      throw new Error("DropzoneRootMessage must be used within a Dropzone");
    }

    const body = context.rootError ? String(context.rootError) : children;
    return (
      <p
        ref={ref}
        id={context.rootMessageId}
        {...rest}
        className={cn(
          "h-5 text-[0.8rem] font-medium text-destructive",
          rest.className,
        )}
      >
        {body}
      </p>
    );
  },
);
DropzoneMessage.displayName = "DropzoneMessage";

interface DropzoneRemoveFileProps extends ButtonProps {}

const DropzoneRemoveFile = forwardRef<
  HTMLButtonElement,
  DropzoneRemoveFileProps
>(({ className, ...props }, ref) => {
  const context = useDropzoneFileListContext();
  if (!context) {
    throw new Error(
      "DropzoneRemoveFile must be used within a DropzoneFileListItem",
    );
  }
  return (
    <Button
      ref={ref}
      onClick={context.onRemoveFile}
      type="button"
      size="icon"
      {...props}
      className={cn(
        "aria-disabled:pointer-events-none aria-disabled:opacity-50",
        className,
      )}
    >
      {props.children}
      <span className="sr-only">Remove file</span>
    </Button>
  );
});
DropzoneRemoveFile.displayName = "DropzoneRemoveFile";

interface DropzoneRetryFileProps extends ButtonProps {}

const DropzoneRetryFile = forwardRef<HTMLButtonElement, DropzoneRetryFileProps>(
  ({ className, ...props }, ref) => {
    const context = useDropzoneFileListContext();

    if (!context) {
      throw new Error(
        "DropzoneRetryFile must be used within a DropzoneFileListItem",
      );
    }

    const canRetry = context.canRetry;

    return (
      <Button
        ref={ref}
        aria-disabled={!canRetry}
        aria-label="retry"
        onClick={context.onRetry}
        type="button"
        size="icon"
        {...props}
        className={cn(
          "aria-disabled:pointer-events-none aria-disabled:opacity-50",
          className,
        )}
      >
        {props.children}
        <span className="sr-only">Retry</span>
      </Button>
    );
  },
);
DropzoneRetryFile.displayName = "DropzoneRetryFile";

interface DropzoneTriggerProps
  extends React.LabelHTMLAttributes<HTMLLabelElement> {}

const DropzoneTrigger = forwardRef<HTMLLabelElement, DropzoneTriggerProps>(
  ({ className, children, ...props }, ref) => {
    const context = useDropzoneContext();
    if (!context) {
      throw new Error("DropzoneTrigger must be used within a Dropzone");
    }

    const { fileStatuses, getFileMessageId } = context;

    const fileMessageIds = useMemo(
      () =>
        fileStatuses
          .filter((file) => file.status === "error")
          .map((file) => getFileMessageId(file.id)),
      [fileStatuses, getFileMessageId],
    );

    return (
      <label
        ref={ref}
        {...props}
        className={cn(
          "cursor-pointer rounded-sm bg-secondary px-4 py-2 font-medium ring-offset-background transition-colors focus-within:outline-none hover:bg-secondary/80 has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-2",
          className,
        )}
      >
        {children}
        <input
          {...context.getInputProps({
            style: {
              display: undefined,
            },
            className: "sr-only",
            tabIndex: undefined,
          })}
          aria-describedby={
            context.isInvalid
              ? [context.rootMessageId, ...fileMessageIds].join(" ")
              : undefined
          }
          aria-invalid={context.isInvalid}
        />
      </label>
    );
  },
);
DropzoneTrigger.displayName = "DropzoneTrigger";

interface InfiniteProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  status: "pending" | "success" | "error";
}

const valueTextMap = {
  pending: "indeterminate",
  success: "100%",
  error: "error",
};

const InfiniteProgress = forwardRef<HTMLDivElement, InfiniteProgressProps>(
  ({ className, ...props }, ref) => {
    const done = props.status === "success" || props.status === "error";
    const error = props.status === "error";
    return (
      <div
        ref={ref}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuetext={valueTextMap[props.status]}
        {...props}
        className={cn(
          "relative h-2 w-full overflow-hidden rounded-full bg-muted",
          className,
        )}
      >
        <div
          //   TODO: add proper done transition
          className={cn(
            "h-full w-full rounded-full bg-primary",
            done ? "translate-x-0" : "animate-infinite-progress",
            error && "bg-destructive",
          )}
        />
      </div>
    );
  },
);
InfiniteProgress.displayName = "InfiniteProgress";

export {
  Dropzone,
  DropZoneArea,
  DropzoneDescription,
  DropzoneFileList,
  DropzoneFileListItem,
  DropzoneFileMessage,
  DropzoneMessage,
  DropzoneRemoveFile,
  DropzoneRetryFile,
  DropzoneTrigger,
  InfiniteProgress,
  useDropzone,
};