Sonic UIv0.6.2

FileList

고른 파일과 업로드 상태를 보여 줘요. 일반 파일은 list, 이미지는 grid예요.

변형

Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.

  • 계약서_최종.pdf45%
    x
list · uploading
list · done
  • 계약서_최종.pdf2.3 MB
    네트워크가 끊겨 올리지 못했어요. 다시 시도해 주세요.
list · error
  • x
    screenshot-01.png
grid · uploading
  • screenshot-01.png
grid · done
  • screenshot-01.png네트워크가 끊겨 올리지 못했어요. 다시 시도해 주세요.
grid · error

사용법

  • 업로드는 프로젝트가 해요컴포넌트는 표시만 하고, 진행률과 재시도는 API를 아는 쪽이 items로 넘겨요.
  • 미리보기는 previewUrl 하나서버 썸네일 주소, base64, 인증 파일은 blob URL. 방금 고른 파일은 file만 넘기면 돼요.

Props

prop값기본값
itemsFileItemData[] (status: uploading · done · error)—
layoutlist · gridlist
onRemove · onRetry(id) => void, 넘기면 버튼이 생겨요—

코드

tsx
<FileList items={items} onRemove={remove} onRetry={retry} />
<FileList layout="grid" items={images} onRemove={remove} />