Skip to main content

Dropzone

MSK Dropzone는 파일 입력 셸 primitive입니다. 드래그앤드롭/클릭으로 파일을 선택하면 이름과 크기 목록을 표시합니다. 업로드 자체는 처리하지 않습니다.

Preview​

파일을 끌어다 놓거나 클릭
  • report-2026.pdf248 KB
  • cover.png1.2 MB

Data API​

<label data-msk-dropzone>
  <input type="file" multiple hidden data-msk-dropzone-input>
  <span class="msk-ui-dropzone__prompt" data-msk-dropzone-prompt>
    파일을 끌어다 놓거나 클릭
  </span>
  <ul data-msk-dropzone-list></ul>
</label>

Events​

root.addEventListener('msk:dropzone-change', (event) => {
  // event.detail.files: File[]
  uploadFiles(event.detail.files);
});

Accessibility​

  • <label>로 감싸면 클릭이 네이티브 파일 입력으로 전달됩니다.
  • 드래그 중에는 data-state="dragover"로 시각 피드백을 제공합니다.
  • 업로드 로직은 포함되지 않으므로 msk:dropzone-change 이벤트에 연결합니다.