title: webkitdirectory in typescript and react
body: <p>The exact error is</p>
  <pre><code>Type '{ webkitdirectory: string; type: &quot;file&quot;; }' is not assignable to type 'DetailedHTMLProps&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;'.
    Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;'.ts(2322)
  </code></pre>
  <p>or</p>
  <pre><code>Type '{ webkitdirectory: true; multiple: true; type: &quot;file&quot;; }' is not assignable to type 'DetailedHTMLProps&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;'.
    Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;'.ts(2322)
  (JSX attribute) webkitdirectory: true
  </code></pre>
  <p>The components just have a simple input with <code>webkitdirectory</code>, I've also tried <code>webkitdirectory=''</code></p>
  <pre><code>import React from &quot;react&quot;;
  
  function FolderUpload() {
    return (
      &lt;div className=&quot;FolderUpload&quot;&gt;
        &lt;input  webkitdirectory=&quot;&quot; type=&quot;file&quot; /&gt; // webkitdirectory has the error
      &lt;/div&gt;
    );
  }
  
  export default FolderUpload;
  </code></pre>
  <p>I understand its non-standard but its covered in the major desktop browsers which is enough for this project
  <a href="https://caniuse.com/input-file-directory" rel="nofollow noreferrer">https://caniuse.com/input-file-directory</a>
  and the moz doc <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory</a></p>