파일 업로더는 사용자가 파일을 선택하여 첨부할 수 있는 폼 형태의 구성요소 입니다.
Usage
사용자가 직접 파일을 첨부해야 하는 모든 경우에 사용합니다.
•
사용자의 시스템에서 파일을 선택하여 첨부할 때 사용합니다.
•
사용자의 시스템에서 드래그 앤 드롭으로 파일을 첨부할 때 사용합니다.
•
한 번에 1개 이상의 파일을 첨부할 수 있습니다.
Anatomy
1.
File selector
블록을 클릭하면 파일 선택기가 열립니다.
2.
Drop zone
해당 영역에 드래그 앤 드롭으로 파일을 끌어다 위치하면 첨부가 됩니다.
파일을 드래그 할 때 영역을 표시하는 스타일을 적용합니다.
FIle Indicator
1.
첨부한 파일을 시각적으로 쉽게 알아차릴 수 있게 표시합니다.
2.
파일명이 길 경우에는 줄임 패턴을 적용하여 표시합니다.
3.
제거(remove) 컨트롤을 제공합니다.
1.
여러 개의 파일을 첨부하여 블록 영역을 넘는 경우에는 스크롤을 표시합니다.
Guidelines
•
파일 선택기에서는 허용한 확장자의 파일만 표시합니다.
•
오류 메시지는 inline 알림으로 합니다.
•
중단점 1,024px 이하에서는 Drop zone을 제공하지 않습니다. 안내 문구도 변경하여 표시합니다.
Accessibility
•
탭 이동으로 파일 선택기에 포커스 한 후에는 Enter 또는 Space로 파일 선택기를 열도록 사용합니다.
•
React Aria 등 키보드와 스크린 리더로 드래그 앤 드롭을 사용할 수 있는 구현 방안을 강구합니다.
