File UI

파일 업로드 기능을 가지고 있는 파일 컴포넌트는 다음과 같이 2가지 타입의 UI로 사용 할 수 있다.

( 참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1543733287/Input+Component#Common-options )

1. Inline Type

파일 컴포넌트의 기본 UI는 Inline Type이다. 파일을 업로드 하면, 하단에 차례로 리스트업 된다.

2. Card Type

파일 컴포넌트의 List Type을 Card Type 으로 변경 할 수 있다. 파일을 업로드 하면 좌측에 차례로 리스트업 된다. 이미지 파일의 경우 파일명은 생략되고 이미지 정보만 출력된다.

Function

파일 컴포넌트는 다음과 같은 기능을 제공한다.

1. Accept

업로드 파일 확장자를 제한 할 수 있다. 지정해 놓은 확장자 외의 파일을 업로드 하는 경우, 아래와 같이 빨간색으로 사용자에게 경고하고 마우스오버시 안내 문구도 출력한다.

2. Preview/Download

미리보기와 다운로드 기능을 사용 할 수 있다.

EX 미리보기 아이콘 클릭 시 출력되는 Modal

3. Min/Max File Size

업로드 파일의 Min/Max 사이즈를 직접 입력하여 제한 할 수 있다. 설정한 사이즈보다 작거나 큰 사이즈의 파일을 업로드 하는 경우, 아래와 같이 빨간색으로 사용자에게 경고하고 마우스오버시 안내 문구도 출력한다.

4. Use Crop

업로드 진행 중 이미지를 편집할 수 있는 Use Crop 기능을 제공한다. [Upload] 버튼을 클릭하면, 다음과 같은 이미지 편집 화면이 Modal로 출력된다. 사이즈 조절 및 회전 등의 편집 기능을 제공한다.

5. Select Modal Button

사용자가 이미 셋팅된 데이터 목록에서 업로드를 진행하게 해야하는 경우 사용하는 기능으로, 업로드 컴포넌트 상단에 검색 바가 다음과 같이 출력된다. 검색바 클릭 시 데이터 상세 목록이 Modal로 출력된다.

6. FileMultiple

파일 다중 업로드 기능을 제공한다. Inline Type의 경우 업로드한 파일이 좌측에 순차적으로 리스트업 되고, Card Type의 경우 업로드한 파일이 하단에 순차적으로 리스트업 된다.

Multiple File Upload	Multiple Image Upload