## 소개

File Uploader는 프레임워크에 독립적인 Web Component 기반 파일 업로더입니다.

그누보드5, 영카트5는 물론이고 React, Vue, Angular 등 모든 환경에서 사용할 수 있습니다.

## 주요 기능

- 드래그 앤 드롭: 파일을 드래그하여 쉽게 업로드

- 이미지 미리보기: 업로드 전 이미지 썸네일 표시

- PDF 렌더링: PDF.js로 첫 페이지 썸네일 자동 생성

- 파일 검증: 파일 타입, 크기, 개수 제한 설정

- 드래그 정렬: 파일 순서 변경 지원

- 수정 모드: 기존 파일 로드 및 편집 지원

## 사용 방법

HTML에서 스크립트를 로드하고 태그 하나만 추가하면 됩니다:

[code]

<script type="module" src="/assets/js/file-uploader.js"></script>

<file-uploader></file-uploader>

[/code]

다양한 옵션도 지원합니다:

[code]

<file-uploader

    accept="image/*"

    max-files="5"

    max-size="5242880"

    view-mode="grid"

></file-uploader>

[/code]

## 주요 속성

- accept: 허용 파일 타입 (예: image/*, .pdf)

- max-size: 최대 파일 크기 (bytes, 기본 10MB)

- max-files: 최대 파일 개수 (기본 10개)

- view-mode: 보기 모드 (list 또는 grid)

- compact: 컴팩트 모드 (폼 내부용)

- readonly: 읽기 전용 모드

## 메서드

- getFiles(): 선택된 파일 목록 반환

- clearFiles(): 모든 파일 제거

- loadFiles(fileInfos): 기존 파일 로드 (수정 모드)

- getNewFiles(): 새로 추가된 파일만 반환

- getDeletedFileIds(): 삭제된 기존 파일 ID 목록

## 이벤트

- files-selected: 파일이 선택되었을 때

- file-removed: 파일이 삭제되었을 때

- files-reordered: 파일 순서가 변경되었을 때

- upload-requested: 업로드 버튼 클릭 시

## 그누보드5 연동 팁

폼 제출 시 FormData를 사용하여 파일을 서버로 전송할 수 있습니다:

[code]

const uploader = document.getElementById('uploader');

const formData = new FormData();

const files = uploader.getFiles();

files.forEach((file, i) => formData.append('bf_file[]', file));

[/code]

수정 페이지에서는 loadFiles()로 기존 파일을 불러오고,

getNewFiles()와 getDeletedFileIds()로 변경사항을 추적할 수 있습니다.

관심 있으신 분들은 사용해 보시고 피드백 주시면 감사하겠습니다!

자세한 사용법은 

https://custom-file-upload.oootool.com/example/ 을 방문해주세요.

게시판 적용 샘플

https://custom-file-upload.oootool.com/front/