문제명

JSX render won't allow webkitdirectory and directory to be used.

개요

• React v18
• input의 속성인 webkitdirectory를 사용할 수 없는 현상

=> React내에서 typescript를 사용시 발생하는 현상. DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> 타입에 webkitdirectory랑 directory 타입이 존재하지 않아서 생기는 오류이다.

해결법

1. if (inputRef.current && isUploadedDir) {
         inputRef.current.setAttribute('mozdirectory', 'mozdirectory');
         inputRef.current.setAttribute('webkitdirectory', 'webkitdirectory'); 
         inputRef.current.setAttribute('directory', 'directory');
       }
   	return ( <input ref={inputRef} id={id} ... />
   )
   

2. 직접 타입을 선언해주는 방법

// index.d.ts
import 'react';

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

// FileUploadMenu.tsx
<input
  id={id}
  type="file"
  className={customStyles.fileInput}
  multiple
  accept="*"
  onChange={onChange}
  webkitdirectory={isUploadedDir ? 'true' : undefined}
  mozdirectory={isUploadedDir ? 'true' : undefined}
  directory={isUploadedDir ? 'true' : undefined}
/>

참조

JSX render won't allow webkitdirectory and directory to be used · Issue #3468 · facebook/react