ScFileUploader

ScFileUploader 컴포넌트는 첨부 파일 목록 표시, 파일 업로드/삭제/다운로드 제어, 커스텀 버튼 및 유효성 검증을 포함한 파일 첨부 UI 컴포넌트입니다.

TIP

해당 Sample은 예제를 위해 작성되었으며 실제 업로드 되지는 않습니다.

---

✅ 기본 사용법

첨부가 가능한 파일 확장자: jpg, jpeg, png, xls, xlsx, xlsm, docx, eml, gif, html, mht, mhtml, msg, pdf, pptm, pptx, txt

@added : 파일이 첨부되었을때 발생

@removed : 파일이 삭제되었을때 발생

@changed : 파일이 추가되거나 삭제되었을때 발생

@download : 파일 다운로드 눌렀을때 발생

:add-label : 추가하기 버튼 라벨

:download-label : Download 버튼 라벨

:sortable : 순서버튼 노출 여부 (기본값: true)

:multiple : 기본값 true, false로 변경시 한건씩 밖에 선택할 수 없음 하지만 이벤트는 Array 객체로 동일

Total 00 KB

첨부할 파일을 여기 올려주세요.

<sc-file-uploader
  :init-list="emptyList"
  :only-download="false"
  @added="onFileHandle('added', $event)"
  @removed="onFileHandle('removed', $event)"
  @changed="onFileHandle('changed', $event)"
  @download="onFileHandle('download', $event)"
  add-label="추가하기"
  download-label="다운로드"
/>

<script setup>
const emptyList = ref([]);
function onFileHandle(type, fileList) {
  console.log(type, fileList);
}
</script>

---

✨ 사용 예시 모음

▸ 확장자/용량 제한

Total 00 KB / 10 MB

첨부할 파일을 여기 올려주세요.

Total 45 MB / 10 MB

첨부할 파일을 여기 올려주세요.

test1.txt(7 KB)

test2.jpg(542 KB)

test3.xlsx(2 MB)

test4.ppt(3 MB)

<sc-file-uploader
  :init-list="emptyList"
  :only-download="false"
  :file-size-limit="10"
  accepted-files=".png,.jpg"
/>

<sc-file-uploader
  :init-list="fakeFileList"
  :only-download="false"
  :file-size-limit="10"
  accepted-files=".png,.jpg"
/>

<script setup>
  const emptyList = ref([]);
  const fakeFileList = ref([
    { fileName: 'test1.txt', fileSize: 7451, fileId: 'test1' },
    { fileName: 'test2.jpg', fileSize: 555451, fileId: 'test2' },
    { fileName: 'test3.xlsx', fileSize: 2234451 },
    { fileName: 'test4.ppt', fileSize: 3451412 },
  ]);
</script>

▸ 초기 파일 목록

Total 2549 KB

첨부할 파일을 여기 올려주세요.

test1.txt(7 KB)

test2.jpg(542 KB)

<sc-file-uploader
  :init-list="[
    { fileName: 'test1.txt', fileSize: 7451, fileId: 'test1' },
    { fileName: 'test2.jpg', fileSize: 555451 },
  ]"
  :only-download="false"
/>

▸ 첨부 전 유효성 검사

Total 00 KB

첨부할 파일을 여기 올려주세요.

<sc-file-uploader
  :before-add-validation="beforeAddValidation"
/>

<script setup>
function beforeAddValidation() {
  return confirm('파일을 업로드하시겠습니까?');
}
</script>

▸ 커스텀 버튼 영역

Total 00 KB

첨부할 파일을 여기 올려주세요.

<sc-file-uploader>
  <template #leftButton>
    <sc-button small>왼쪽 버튼1</sc-button>
    <sc-button small>왼쪽 버튼2</sc-button>
  </template>
  <template #rightButton>
    <sc-button small>오른쪽 버튼</sc-button>
  </template>
</sc-file-uploader>

▸ 다운로드 전용 모드

Total 45 MB

첨부할 파일을 여기 올려주세요.

test1.txt(7 KB)

test2.jpg(542 KB)

test3.xlsx(2 MB)

test4.ppt(3 MB)

<sc-file-uploader
  :init-list="fakeFileList"
  :only-download="true"
  @download="onFileHandle('download', $event)"
/>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
initList	Array<Object>	[]	초기 파일 목록
onlyDownload	Boolean	false	다운로드 전용 모드 활성화
fileSizeLimit	Number	null	업로드 가능한 최대 파일 크기(MB)
acceptedFiles	String	'*'	허용할 확장자 목록 (예: ".jpg,.png")
sortable	Boolean	true	파일 정렬 기능 활성화 여부
multiple	Boolean	true	다중 파일 업로드 허용 여부
addLabel	String	'첨부'	첨부 버튼 라벨 텍스트
downloadLabel	String	'다운로드'	다운로드 버튼 라벨 텍스트
beforeAddValidation	Function	null	파일 첨부 전 실행할 유효성 검사 함수 (true일 때만 허용)

---

📤 이벤트 (Emits)

이벤트 이름	설명
added	파일이 첨부될 때 발생
removed	파일이 삭제될 때 발생
changed	첨부 또는 삭제로 파일 목록이 변경될 때 발생
download	다운로드 버튼 클릭 시 발생

---

🔳 슬롯 (Slots)

슬롯 이름	설명
leftButton	첨부 버튼 왼쪽에 표시할 버튼 영역
rightButton	첨부 버튼 오른쪽에 표시할 버튼 영역

---

🎨 스타일 클래스

클래스 이름	설명
.sc-file-uploader	컴포넌트 최상위 래퍼
.file-list	첨부된 파일 리스트 영역
.upload-button	첨부 버튼 스타일
.download-button	다운로드 버튼 스타일

---