Podo UI

Podo UI

File Upload

A component for selecting and uploading files.

Basic Usage

You can select files using input type='file'.

HTML
<input type="file" />
<input type="file" multiple />
<input type="file" accept="image/*" />
<input type="file" disabled />
Live Example:

File Type Restrictions

You can restrict to specific file types using the accept attribute.

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 File Selection

You can select multiple files at once using the multiple attribute.

HTML
<input type="file" multiple />
<input type="file" accept="image/*" multiple />
Live Example:

SCSS Styling

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);
    }
  }
}