FileUploadList() — ui Function Reference

Architecture documentation for the FileUploadList() function in file-upload-list.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ FileUploadList() — ui Function Reference

Dependency Diagram

graph TD
  b7b67801_88f7_c846_9014_abb2f9528ac4["FileUploadList()"]
  4eb47040_5e59_95a2_31b8_07dc79739dde["file-upload-list.tsx"]
  b7b67801_88f7_c846_9014_abb2f9528ac4 -->|defined in| 4eb47040_5e59_95a2_31b8_07dc79739dde
  style b7b67801_88f7_c846_9014_abb2f9528ac4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/file-upload-list.tsx lines 15–68

export function FileUploadList() {
  const files = React.useMemo(
    () => [
      {
        id: "1",
        name: "document.pdf",
        progress: 45,
        timeRemaining: "2m 30s",
      },
      {
        id: "2",
        name: "presentation.pptx",
        progress: 78,
        timeRemaining: "45s",
      },
      {
        id: "3",
        name: "spreadsheet.xlsx",
        progress: 12,
        timeRemaining: "5m 12s",
      },
      {
        id: "4",
        name: "image.jpg",
        progress: 100,
        timeRemaining: "Complete",
      },
    ],
    []
  )

  return (
    <ItemGroup>
      {files.map((file) => (
        <Item key={file.id} size="xs" className="px-0">
          <ItemMedia variant="icon">
            <FileIcon className="size-5" />
          </ItemMedia>
          <ItemContent className="inline-block truncate">
            <ItemTitle className="inline">{file.name}</ItemTitle>
          </ItemContent>
          <ItemContent>
            <Progress value={file.progress} className="w-32" />
          </ItemContent>
          <ItemActions className="w-16 justify-end">
            <span className="text-muted-foreground text-sm">
              {file.timeRemaining}
            </span>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  )
}