Function InputFile

components/base/input/input-file.tsx:47–141

({
    size = "sm",
    label,
    hint,
    placeholder = "Choose a file",
    isDisabled,
    isInvalid,
    isRequired,
    hideRequiredIndicator,
    isLoading,
    acceptedFileTypes,
    allowsMultiple,
    onChange,
    className,
    buttonText = "Upload",
}: InputFileProps)

}

export const InputFile = ({
    size = "sm",
    label,
    hint,
    placeholder = "Choose a file",
    isDisabled,
    isInvalid,
    isRequired,
    hideRequiredIndicator,
    isLoading,
    acceptedFileTypes,
    allowsMultiple,
    onChange,
    className,
    buttonText = "Upload",
}: InputFileProps) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const [fileNames, setFileNames] = useState("");

    const handleClick = () => {
        if (inputRef.current?.value) {
            inputRef.current.value = "";
        }
        inputRef.current?.click();
    };

    const handleChange = () => {
        const files = inputRef.current?.files ?? null;
        if (files && files.length > 0) {
            setFileNames(
                Array.from(files)
                    .map((f) => f.name)
                    .join(", "),
            );
        } else {
            setFileNames("");
        }
        onChange?.(files);
    };

    return (
        <>
            <InputGroup
                size={size}
                label={label}
                hint={hint}
                isDisabled={isDisabled}
                isInvalid={isInvalid}
                isRequired={isRequired}
                hideRequiredIndicator={hideRequiredIndicator}
                className={className}
                trailingAddon={
                    <Button size={size} color="secondary" onClick={handleClick} isDisabled={isDisabled}>
                        {buttonText}
                    </Button>
                }
            >
                <div className="relative flex min-w-0 flex-1">