ReactJS- Directory selection dialog not working

Question

I want a directory selection dialog in my React App. I followed this SO thread that might work for some people but not for me. Getting compile time error as

Property 'directory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'.

I upgraded react to the latest RC-version 17.rc.1 thinking that there may be a bug fix for this but no success.

Edit

There is a hack to add this script at the end of file using tag for directory selection, suggested by @Scratch'N'Purr in comments.

declare module 'react' {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    // extends React's HTMLAttributes
    directory?: string;
    webkitdirectory?:string;
  }
}

can't you skip using it? just keep webkitdirectory ? I cant find any attribute related to 'directory' — Kalhan.Toress, Sep 09 '20 at 10:08
@Kalhan.Toress is there a way to override the default JSX input to solve this issue? — DevLoverUmar, Sep 09 '20 at 10:15
This sounds like a typescript specific issue. I'm not a typescript expert but looking at this [answer](https://stackoverflow.com/a/49467111/6245650) may shed some light. Considering `input` is an HTML element, I'm not sure how you can go about defining the prop type. Perhaps someone with more experience can add to the discussion. — Scratch'N'Purr, Sep 09 '20 at 10:24
So I might have found the answer for you: https://stackoverflow.com/a/56110375/6245650 — Scratch'N'Purr, Sep 09 '20 at 10:26
Perfect (Y) You saved my Day! Please Add this solution as an answer so that I can award points :) — DevLoverUmar, Sep 09 '20 at 10:33

score 10 · Accepted Answer · answered Sep 09 '20 at 10:39

It works fine in Javascript but the problem is with Typescript. Guess, you are right about it being an issue.

You can set it manually using ref though.

import * as React from "react";
import "./styles.css";

export default function App() {
  const ref = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (ref.current !== null) {
      ref.current.setAttribute("directory", "");
      ref.current.setAttribute("webkitdirectory", "");
    }
  }, [ref]);

  return <input type="file" ref={ref} />;
}

very rare answer for `ReactJS` with `TypeScript`, to add `directory` and `webkitdirectory` to `input` files, very good reply. — ArifMustafa, Jul 26 '23 at 17:55

ReactJS- Directory selection dialog not working

1 Answers1