Podo UI

Podo UI

파일 업로드

파일을 선택하고 업로드할 수 있는 컴포넌트입니다.

기본 사용법

input type='file'을 사용하여 파일을 선택할 수 있습니다.

HTML
<input type="file" />
<input type="file" multiple />
<input type="file" accept="image/*" />
<input type="file" disabled />
실제 예제:

파일 타입 제한

accept 속성을 사용하여 특정 파일 타입만 선택할 수 있도록 제한할 수 있습니다.

HTML
<!-- 이미지만 -->
<input type="file" accept="image/*" />

<!-- PDF만 -->
<input type="file" accept=".pdf" />

<!-- 문서 파일 -->
<input type="file" accept=".doc,.docx,.pdf" />

<!-- 비디오만 -->
<input type="file" accept="video/*" />

다중 파일 선택

multiple 속성을 사용하여 여러 파일을 한 번에 선택할 수 있습니다.

HTML
<input type="file" multiple />
<input type="file" accept="image/*" multiple />
실제 예제:

SCSS 스타일

component.module.scss
@use 'podo-ui/mixin' as *;

.fileInput {
  width: 100%;
  padding: s(3) s(4);
  border: 1px solid color(border-disabled);
  border-radius: r(3);
  background: color(bg-block);

  &::before {
    content: icon(upload-cloud);
    font-family: 'podo-ui-icon';
    font-size: 24px;
    color: color(default-deep-reverse);
  }

  &::file-selector-button {
    padding: s(3) s(8);
    border: none;
    border-radius: r(3) 0 0 r(3);
    background-color: color(default-deep);
    color: color(default-deep-reverse);
    cursor: pointer;
  }

  &:disabled {
    cursor: not-allowed;

    &::file-selector-button {
      background-color: color(bg-disabled);
      color: color(text-action-disabled);
    }
  }
}