Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/FileSelector.tsx (TypeScript)

Code before:
    uploadData?: string;
}

const handleDragOver = (evt: DragEvent) => {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer && (evt.dataTransfer.dropEffect = "copy");
};

const defaultSx = { minWidth: "0px" };

const FileSelector = (props: FileSelectorProps) => {
    const {
        id,
        onAction,
        defaultLabel = "",
        updateVarName = "",
        multiple = false,
        selectionType = "file",
        extensions = ".csv,.xlsx",
        dropMessage = "Drop here to Upload",
        label,
        notify = true,
        withBorder = true,
    } = props;
    const directoryProps = ["d", "dir", "directory", "folder"].includes(selectionType) ? {webkitdirectory: "", directory: "", mozdirectory: "", nwdirectory: ""} : undefined;
    const [dropLabel, setDropLabel] = useState("");
    const [dropSx, setDropSx] = useState<SxProps | undefined>(defaultSx);
    const [upload, setUpload] = useState(false);
    const [progress, setProgress] = useState(0);
    const { state, dispatch } = useContext(TaipyContext);
    const butRef = useRef<HTMLElement>(null);
    const inputId = useMemo(() => (id || `tp-${Date.now()}-${Math.random()}`) + "-upload-file", [id]);
    const module = useModule();

    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
    const active = useDynamicProperty(props.active, props.defaultActive, true);
    const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);

    useEffect(
        () =>
            setDropSx((sx: SxProps | undefined) =>
                expandSx(
                    sx,
                    props.width ? { width: getCssSize(props.width) } : undefined,
                    withBorder ? undefined : { border: "none" }
                )
            ),
        [props.width, withBorder]
    );


Review comment (suggestion):
I would check for selectionType?.toLowerCase().startsWith("d") || selectionType?.toLowerCase()).startsWith("folder")

Code after:
    uploadData?: string;
}

const handleDragOver = (evt: DragEvent) => {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer && (evt.dataTransfer.dropEffect = "copy");
};

const defaultSx = { minWidth: "0px" };

const FileSelector = (props: FileSelectorProps) => {
    const {
        id,
        onAction,
        defaultLabel = "",
        updateVarName = "",
        multiple = false,
        selectionType = "file",
        extensions = ".csv,.xlsx",
        dropMessage = "Drop here to Upload",
        label,
        notify = true,
        withBorder = true,
    } = props;
    const directoryProps = ["d", "dir", "directory", "folder"].includes(selectionType?.toLowerCase()) ? 
                           {webkitdirectory: "", directory: "", mozdirectory: "", nwdirectory: ""} : 
                           undefined;
    const [dropLabel, setDropLabel] = useState("");
    const [dropSx, setDropSx] = useState<SxProps | undefined>(defaultSx);
    const [upload, setUpload] = useState(false);
    const [progress, setProgress] = useState(0);
    const { state, dispatch } = useContext(TaipyContext);
    const butRef = useRef<HTMLElement>(null);
    const inputId = useMemo(() => (id || `tp-${Date.now()}-${Math.random()}`) + "-upload-file", [id]);
    const module = useModule();

    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
    const active = useDynamicProperty(props.active, props.defaultActive, true);
    const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);

    useEffect(
        () =>
            setDropSx((sx: SxProps | undefined) =>
                expandSx(
                    sx,
                    props.width ? { width: getCssSize(props.width) } : undefined,
                    withBorder ? undefined : { border: "none" }
                )
            ),
        [props.width, withBorder]