components/upload
입력과 폼 · 14 / 64

FileUpload

ui.widgets.FileUpload

파일 선택과 드롭 영역.

BEHAVIOR CONTRACT

Browse, 드롭 영역, 파일 목록, 앱 콜백이 하나의 테스트 가능한 상태를 이룹니다.

RECORDED INTERACTION

harness가 Browse…를 클릭하면 story가 결정적인 파일 경로를 채웁니다.

examples/storybook/stories.zig:3069
pub fn buildFileUpload(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);
    const story = try cx.bindState(FileUploadStory, .{ .state = undefined });
    const fu = try ui.widgets.FileUpload(.{
        .width = 380,
        .on_browse = cx.on(FileUploadStory, story, FileUploadStory.browse),
    }, scope, cx);
    story.state = fu.state;
    fu.wrapper.meta.ownership.meta.test_id = "story.upload.wrapper";
    // 拖放 drop zone:e2e 用 dragAt 往这块矩形里注入 entered/dropped
    fu.state.drop_zone.meta.ownership.meta.test_id = "story.upload.dropzone";
    try c.appendChild(a, fu.wrapper);
    return c;
}
GitHub에서 소스 보기examples/storybook/stories.zig:3069

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

zenit · 이중 라이선스오픈 소스 프로젝트는 GPL-3.0-only로 무료 사용할 수 있으며, 비공개 소스나 상용 제품에는 상용 라이선스가 필요합니다.작성자 연락처: zongyi.xzy#gmail.com (#을 @로 바꾸세요)zenit 5f9add5+wip 2026-09-30