Basic UI

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

( 참고: Input Component | Common options )

1. Inline Type

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

Open

Open

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의 경우 업로드한 파일이 하단에 순차적으로 리스트업 된다.