파일 업로드 File upload

파일 업로드는 하나 이상의 디바이스의 로컬 파일을 선택하고 첨부하는 데 사용하는 입력 컴포넌트이다.

기본

v-model에 파일 목록(FileInfo[])을 바인딩합니다. 컴포넌트는 파일을 서버로 보내지 않습니다. 추가된 파일은 pending 상태로 목록에 들어가므로 실제 업로드와 상태 변경은 직접 처리합니다.

타이틀영역

컨텐츠 영역

첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFileUpload } from '@krds.ui/vue'
  import type { FileInfo } from '@krds.ui/vue'

  const files = ref<FileInfo[]>([])
</script>

<template>
  <KrdsFileUpload v-model="files" title="타이틀영역" description="컨텐츠 영역" />
</template>

파일 상태별 표시

FileInfo의 status에 따라 표시가 달라집니다. uploading은 스피너, completed는 완료 아이콘, pending은 삭제 버튼, error는 errorMessage를 표시합니다. downloadUrl이 있으면 다운로드·바로보기 버튼이 표시되고, 누르면 download·preview 이벤트가 발생합니다.

타이틀영역

컨텐츠 영역

첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.

4개 / 10개

위임장(주민등록법 시행령 별지 제15호의2호서식) [hwp, 17KB]
업로드 중
위임장(주민등록법 시행령 별지 제15호의2호서식) [hwp, 17KB]
업로드 완료
위임장(주민등록법 시행령 별지 제15호의2호서식) [hwp, 17KB]
전입재등록신고서 [주민등록법 시행령 별지서식 15, 15호의2호] [hwp, 25MB]
등록 가능한 파일 용량을 초과하였습니다.
20MB 미만의 파일만 등록할 수 있습니다.
위임장(주민등록법 시행령 별지 제15호의2호서식) [hwp, 17KB]

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFileUpload } from '@krds.ui/vue'
  import type { FileInfo } from '@krds.ui/vue'

  const files = ref<FileInfo[]>([
    {
      id: '1',
      file: new File([''], '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp'),
      name: '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp',
      size: 17 * 1024,
      type: 'application/x-hwp',
      status: 'uploading'
    },
    {
      id: '2',
      file: new File([''], '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp'),
      name: '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp',
      size: 17 * 1024,
      type: 'application/x-hwp',
      status: 'completed'
    },
    {
      id: '3',
      file: new File([''], '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp'),
      name: '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp',
      size: 17 * 1024,
      type: 'application/x-hwp',
      status: 'pending'
    },
    {
      id: '4',
      file: new File([''], '전입재등록신고서 [주민등록법 시행령 별지서식 15, 15호의2호].hwp'),
      name: '전입재등록신고서 [주민등록법 시행령 별지서식 15, 15호의2호].hwp',
      size: 25 * 1024 * 1024,
      type: 'application/x-hwp',
      status: 'error',
      errorMessage: '등록 가능한 파일 용량을 초과하였습니다.\n20MB 미만의 파일만 등록할 수 있습니다.'
    },
    {
      id: '5',
      file: new File([''], '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp'),
      name: '위임장(주민등록법 시행령 별지 제15호의2호서식).hwp',
      size: 17 * 1024,
      type: 'application/x-hwp',
      status: 'completed',
      downloadUrl: '/files/sample.hwp'
    }
  ])
</script>

<template>
  <KrdsFileUpload v-model="files" title="타이틀영역" description="컨텐츠 영역" />
</template>

파일 선택 동작

파일선택 버튼이나 업로드 영역으로 끌어다 놓아 파일을 추가합니다. maxFileSize(기본 20MB) 이상인 파일은 error 상태로 추가되고 개수에서 빠집니다. maxFiles(기본 10개)에 이르면 더 추가되지 않습니다.