Typescript upload directory, Property 'directory' does not exist on type

June 28, 2022

I’ve got a basic file input and i want to allow users to upload an entire directory

      <input
        type='file'
        directory=''
        webkitdirectory=''
        className={cssClass}
        onChange={processFiles}
      />

which gives the typescript error

Type '{ type: "file"; directory: string; webkitdirectory: string; className: string; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Property 'directory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.ts(2322)

>Solution :

As of today, there doesn’t seem to be a "native" way to do this with the current types React offers. You can checkout this issue on React’s repo. The best way seems to be declaring those types yourself:

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

According to this comment on the issue.

This type definition will just chill Typescript, but remember that React forwards props that it doesn’t recognize to the underlying DOM element (a.k.a <input />) making this work even though React doesn’t know about this (checkout this blog post on React’s website).