Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Upload

파일 업로드 컴포넌트입니다. 업로드 트리거와 파일 삭제는 키보드로도 조작할 수 있습니다.

import { Upload } from 'sud-ui';

사용할 때

하나 이상의 파일을 업로드할 때.

드래그 앤 드롭 방식으로 파일을 업로드할 때.

사용예제

Basic Usage

기본적인 사용 방법입니다.

Accept Specific File Types

ext 속성을 사용하여 특정 파일 형식만 업로드할 수 있습니다. 지원하지 않는 파일 형식은 업로드가 제한됩니다.

Disabled

disabled 속성을 통해 업로드 컴포넌트를 비활성화할 수 있습니다. 비활성화 상태에서는 파일 업로드가 불가능합니다.

Drag & DropYou can upload files using the drag and drop method.

Drag & Drop

drag 속성을 통해 드래그 앤 드롭 방식으로 파일을 업로드 할 수 있습니다. 파일을 드래그하여 영역에 드롭하면 자동으로 업로드됩니다.

import { Upload, Card, Typography } from "sud-ui";
import React, { useState } from "react";

export default function App() {
  const [isDragging, setIsDragging] = useState(false);

  return (
    <Upload
      listType="text"
      drag
      onDrag={(isDrag) => {
        setIsDragging(isDrag);
      }}
    >
      <Card
        style={{ width: "100%" }}
        shadow="none"
        borderType="dashed"
        borderWeight={2}
        borderColor={isDragging ? "sky-6" : "cool-gray-3"}
        background={isDragging ? "sky-2" : "cool-gray-1"}
        color={isDragging ? "sky-8" : "cool-gray-7"}
      >
        <div className="flex flex-col gap-[10px] justify-center items-center">
          <Typography suite="H" size="lg">
            Drag & Drop
          </Typography>
          <Typography color="cool-gray-5">
            You can upload files using the drag and drop method.
          </Typography>
        </div>
      </Card>
    </Upload>
  );
}

Upload

파일 업로드 중 로딩 상태를 표시하는 예제입니다. 업로드 진행 중에는 로딩 스피너가 표시되고, 완료 후에는 업로드된 이미지가 표시됩니다.

import { Upload, Card, Typography } from "sud-ui";
import { Plus } from "sud-icons";
import React, { useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [loadingImg, setLoadingImg] = useState(null);

  const handleLoading = (img) => {
    setLoadingImg(null);
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setLoadingImg(URL.createObjectURL(img));
    }, 3000);
  };

  return (
    <Upload
      listType="none"
      onChange={(img) => {
        handleLoading(img);
      }}
    >
      {loadingImg ? (
        <Image
          shape="rounded"
          src={loadingImg}
          alt="profile"
          width={150}
          height={150}
          preview={false}
          mask={
            <div className="flex flex-col gap-[10px] justify-center items-center text-center">
              <Typography>Profile Update</Typography>
            </div>
          }
        />
      ) : (
        <Card
          shadow="none"
          borderType="dashed"
          borderWeight={2}
          background="cool-gray-1"
          width={150}
          height={150}
          className="justify-center items-center"
        >
          <div className="flex flex-col gap-[10px] justify-center items-center">
            {isLoading ? (
              <DotSpinner text="Uploading..." />
            ) : (
              <>
                <Plus />
                <Typography>Upload</Typography>
              </>
            )}
          </div>
        </Card>
      )}
    </Upload>
  );
}

Multiple Files

여러 파일을 동시에 업로드할 수 있습니다. maxCount 속성을 통해 최대 업로드 가능한 파일 개수를 제한할 수 있습니다.

File Size Limit

maxFileSize 속성을 통해 업로드 가능한 파일의 최대 크기를 제한할 수 있습니다. 제한된 크기를 초과하는 파일은 업로드가 제한됩니다.

text

thumbnail

card

none

List Type

listType 속성을 통해 업로드된 파일 목록의 표시 방식을 설정할 수 있습니다. text, thumbnail, card, none 중 선택 가능합니다.

import { Upload, Button, Card, Radio } from "sud-ui";
import { Upload as UploadIcon } from "sud-icons";
import React, { useState } from "react";

const listTypeOptions = [
  { label: "text", value: "text" },
  { label: "thumbnail", value: "thumbnail" },
  { label: "card", value: "card" },
  { label: "none", value: "none" }
];

export default function App() {
  const [listType, setListType] = useState("text");

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={listTypeOptions}
            direction="horizontal"
            value={listType}
            onChange={setListType}
          />
        </div>
      </Card>
      <Upload
        listType={listType}
        multiple
        listDirection={listType === "card" ? "row" : "column"}
      >
        <Button icon={<UploadIcon size={16} />}>File Upload</Button>
      </Upload>
    </div>
  );
}

Upload

Custom Upload

프로필 사진 업로드를 위한 커스텀 예제입니다. 이미지 업로드 시 미리보기를 제공하고, 업로드 전/후의 상태를 구분하여 표시합니다.

import { Upload, Card, Typography, Image } from "sud-ui";
import { Plus } from "sud-icons";
import React, { useState } from "react";

export default function App() {
  const [hasProfile, setHasProfile] = useState(false);
  const [profile, setProfile] = useState(null);

  return (
    <Upload
      listType="none"
      onChange={(img) => {
        if (img) {
          setHasProfile(true);
          setProfile(URL.createObjectURL(img));
        } else {
          setHasProfile(false);
          setProfile(null);
        }
      }}
    >
      {hasProfile ? (
        <Image
          shape="circle"
          src={profile}
          alt="profile"
          width={150}
          height={150}
          preview={false}
          mask={
            <div className="flex flex-col gap-[10px] justify-center items-center text-center">
              <Typography>Profile Update</Typography>
            </div>
          }
        />
      ) : (
        <Card
          shadow="none"
          borderType="dashed"
          borderWeight={2}
          background="cool-gray-1"
          shape="circle"
          width={150}
          height={150}
          className="justify-center items-center"
        >
          <div className="flex flex-col gap-[10px] justify-center items-center p-[10px]">
            <Plus />
            <Typography>Upload</Typography>
          </div>
        </Card>
      )}
    </Upload>
  );
}

File List Customization

업로드된 파일 목록을 커스텀하게 표시하는 예제입니다. 파일 이름, 크기 정보를 표시하고 개별 파일 삭제 기능을 제공합니다.

import { Upload, Button, Card, Typography } from "sud-ui";
import { TrashOutline, Upload as UploadIcon } from "sud-icons";
import React, { useState } from "react";

export default function App() {
  const [fileList, setFileList] = useState([]);

  return (
    <div className="flex flex-col gap-[20px]">
      <Upload
        listType="none"
        onChange={(files) => {
          setFileList(files);
        }}
        multiple
      >
        <Button icon={<UploadIcon size={16} />}>File Upload</Button>
      </Upload>
      <div className="flex flex-col gap-[10px] w-full">
        {fileList.map((file, index) => (
          <Card
            key={`${file.name}-${index}`}
            shadow="none"
            colorType="sub"
            className="flex justify-between items-center p-[10px]"
          >
            <div className="flex flex-col gap-[5px]">
              <Typography>{file.name}</Typography>
              <Typography size="sm" color="cool-gray-5">
                {(file.size / 1024).toFixed(2)} KB
              </Typography>
            </div>
            <Button
              icon={<TrashOutline size={16} />}
              colorType="danger"
              onClick={() => {
                setFileList(fileList.filter((f) => f.name !== file.name));
              }}
            >
              Delete
            </Button>
          </Card>
        ))}
      </div>
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

listType

파일 목록 표시 타입

text

thumbnail

card

none

text

ext

허용할 파일 확장자

string[]

multiple

다중 파일 업로드 여부

boolean

false

maxCount

최대 파일 개수

number

maxFileSize

최대 파일 크기 (bytes)

number

disabled

비활성화 여부

boolean

false

fileList

파일 목록

File[]

[]

showUploadList

파일 목록 표시 여부

boolean

true

onChange

파일 변경 시 호출되는 함수

(files: File | File[]) => void

onRemove

파일 제거 시 호출되는 함수

(files: File[]) => void

onDrag

드래그 상태 변경 시 호출되는 함수

(isDragging: boolean) => void

listColorType

파일 목록 색상 타입

default

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

default

listErrorColorType

파일 목록 에러 색상 타입

위와 동일

red

listHoverColorType

파일 목록 호버 색상 타입

위와 동일

sky

listDeleteColorType

파일 목록 삭제 색상 타입

위와 동일

coral

listDirection

파일 목록 방향

row

column

thumbnailSize

썸네일 크기

number

cardSize

카드 크기

number

200

drag

드래그 앤 드롭 활성화 여부

boolean

false

className

추가 클래스명

string

ariaLabel

ARIA 라벨

string

role

ARIA 역할

string

button

개인정보 처리방침

서비스 약관