[HTML] '<input type='file' />' 스타일커스텀 , 파일 확장자 지정

button을 클릭했을 때 파일 업로드를 하고 바로 띄워줄 수 있는 버튼을 만들고 싶다

 

파일을 업로드 하는건 type='file'의 속성의 input 태그를 이용한다.

 

 

이렇게 입력하면 아래 사진처럼만 나오는데

<input type="file" name="" id="" />

 

난 옆에 선택된 파일없음 도 안 나오게 하고 싶고 버튼도 커스텀을 하고 싶다.

 

그래서 하는 방법이 label 태그와 input 태그를 연결해 주고 label태그를 꾸며주고

input 태그를 숨겨주면 되는 것이다.

 

먼저 label과 input이 연결하는 방법은

 

label의 for와 input의 id를 같게 넣어주면 된다.

<label for='fileUpload'>   

<input id='fileUpload' />  

 

그리고input 태그를 숨겨야 하는데 opacity :0으로 숨겨줘야 한다. 

 

중요한 건 display:none / visibility: hidden 하면 안 된다!!

접근성 보조 기술이 파일 입력 칸을 상호작용 할 수 없는 상태라고 인식하기 때문에 그렇다고 한다.

 

display:none을 했다가 안돼서 이유를 찾는데 고생했다.  휴,,

 

난 엑셀 파일만 올려야 하니 accept 속성을 이용하여 accept='. xls,. xlsx '  이렇게  넣어주면

엑셀 파일만 선택 가능하게 해 준다.

 

 그래서 아래처럼 코드를 작성하였다. 

<label for="fileUpload" className="customFileUpload">
      엑셀 업로드
</label>
<input type="file" name="" id="fileUpload" onChange={excelUpload} accept=".xls,.xlsx" />