chore: forward-merge main into next

docs/content/docs/components/file-field.mdx

@@ -57,7 +57,7 @@ First you will need to follow the [manual install setup](./manual-install) guide
 
 - [uploader-provider](./uploader-provider)
 - [dropzone](./dropzone)
-- [multi-file](./multi-file)
+- [file-list](./file-list)
 
 </Step>
 

docs/content/docs/components/file-list.mdx

@@ -0,0 +1,103 @@
+---
+title: File List
+description: Lists the files of an UploaderProvider with their status, progress and actions.
+---
+
+import { LimitedCode } from '@/components/ui/limited-code';
+import {
+  OpenTabs,
+  OpenTabsContent,
+  OpenTabsList,
+  OpenTabsTrigger,
+} from '@/components/ui/open-tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+`file-list.tsx` exports:
+
+- `FileList`: lists the files of the nearest `UploaderProvider`.
+- `FileListItem`: renders one file with its status, progress and actions (retry, cancel, remove).
+- `FileBadge`: renders the colored file-type tile.
+
+Use it next to an [Upload Button](./upload-button), or anywhere you want the files of an `UploaderProvider` shown as a list.
+
+<Callout>
+  The [multi-file](./multi-file) and [file field](./file-field) components
+  install it automatically via the CLI.
+</Callout>
+
+## Installation
+
+<OpenTabs defaultValue="cli">
+
+<OpenTabsList>
+  <OpenTabsTrigger value="cli">CLI</OpenTabsTrigger>
+  <OpenTabsTrigger value="manual">Manual</OpenTabsTrigger>
+</OpenTabsList>
+
+<OpenTabsContent value="cli">
+
+Use the shadcn CLI to add the component to your project.
+
+```package-install
+npx shadcn@latest add https://edgestore.dev/r/file-list.json
+```
+
+</OpenTabsContent>
+
+<OpenTabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+### Setup for manual installation
+
+First you will need to follow the [manual install setup](./manual-install) guide.
+
+</Step>
+
+<Step>
+
+### Install required components
+
+- [uploader-provider](./uploader-provider)
+- [progress-bar](./progress-bar)
+
+</Step>
+
+<Step>
+
+### Copy this component
+
+<LimitedCode>
+
+<include lang="tsx" meta='title="components/upload/file-list.tsx"'>../../../src/components/upload/file-list.tsx</include>
+
+<include lang="tsx" meta='title="components/upload/upload-utils.ts"'>../../../src/components/upload/upload-utils.ts</include>
+
+</LimitedCode>
+
+</Step>
+
+</Steps>
+
+</OpenTabsContent>
+
+</OpenTabs>
+
+## Usage
+
+```tsx
+<UploaderProvider uploadFn={uploadFn} autoUpload>
+  {/* anything that adds files, e.g. <UploadButton /> */}
+  <FileList />
+</UploaderProvider>
+```
+
+## Props
+
+| Prop       | Type      | Default | Description                                 |
+| ---------- | --------- | ------- | ------------------------------------------- |
+| `disabled` | `boolean` | `false` | Hides the retry, cancel and remove actions. |
+| `...`      |           |         | Any other `<ul>` prop, such as `className`. |

docs/content/docs/components/multi-file.mdx

@@ -57,7 +57,7 @@ First you will need to follow the [manual install setup](./manual-install) guide
 
 - [uploader-provider](./uploader-provider)
 - [dropzone](./dropzone)
-- [progress-bar](./progress-bar)
+- [file-list](./file-list)
 - [shadcn/ui button](https://ui.shadcn.com/docs/components/button)
 
 </Step>
@@ -143,8 +143,4 @@ export function MultiFileDropzoneUsage() {
 
 ### Building your own layout
 
-`multi-file.tsx` also exports the pieces it is made of, so you can arrange them differently:
-
-- `FileList` lists the files of the nearest `UploaderProvider`.
-- `FileListItem` renders one file with its status and actions.
-- `FileBadge` renders the colored file-type tile.
+`FileUploader` is a `Dropzone` and a [`FileList`](./file-list), so you can arrange the two differently.

docs/content/docs/components/upload-button.mdx

@@ -18,7 +18,7 @@ import { Step, Steps } from 'fumadocs-ui/components/steps';
   <UploadButtonBlock />
 </DemoBlock>
 
-It takes the same props as the shadcn/ui `Button`. Several buttons can feed the same `UploaderProvider`, so you can pair them with a `FileList` or build your own list with `useUploader`.
+It takes the same props as the shadcn/ui `Button`. Several buttons can feed the same `UploaderProvider`, so you can pair them with a [`FileList`](./file-list) or build your own list with `useUploader`.
 
 ## Installation
 
@@ -81,13 +81,17 @@ First you will need to follow the [manual install setup](./manual-install) guide
 
 ## Usage
 
-Install or copy the component from [Installation](#installation) before using this example.
+Install or copy the component from [Installation](#installation) before using this example. It also uses [`FileList`](./file-list):
+
+```package-install
+npx shadcn@latest add https://edgestore.dev/r/file-list.json
+```
 
 ```tsx
 'use client';
 
 import { UploadErrors } from '@/components/upload/dropzone';
-import { FileList } from '@/components/upload/multi-file';
+import { FileList } from '@/components/upload/file-list';
 import { UploadButton } from '@/components/upload/upload-button';
 import {
   UploaderProvider,

docs/content/docs/components/uploader-provider.mdx

@@ -69,7 +69,7 @@ function MyUploaderPage() {
   // Define the upload function
   const uploadFn: UploadFn = React.useCallback(
     async ({ file, onProgressChange, signal }) => {
-      // Example using Edge Store client
+      // Example using EdgeStore client
       const res = await edgestore.publicFiles.upload({
         file,
         signal,

docs/content/docs/meta.json

@@ -18,6 +18,7 @@
     "components/avatar",
     "components/file-field",
     "components/upload-button",
+    "components/file-list",
     "components/uploader-provider",
     "components/dropzone",
     "components/progress-circle",

docs/public/r/avatar-dropzone-block.json

@@ -11,8 +11,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/avatar-block.tsx",
       "content": "'use client';\n\nimport { AvatarDropzone } from '@/components/upload/avatar-dropzone';\nimport {\n  UploaderProvider,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport * as React from 'react';\n\nexport default function AvatarDropzoneBlock() {\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicImages.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <div className=\"w-full max-w-md\">\n        <UploaderProvider uploadFn={uploadFn} autoUpload>\n          <AvatarDropzone\n            label=\"Profile photo\"\n            maxSize={1024 * 1024 * 2} // 2MB\n            minDimension={128}\n          />\n        </UploaderProvider>\n      </div>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicImages: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/avatar-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"

docs/public/r/file-field-block.json

@@ -12,8 +12,8 @@
     {
       "path": "examples/components/src/components/upload/blocks/file-field-block.tsx",
       "content": "'use client';\n\nimport { FileField } from '@/components/upload/file-field';\nimport { DOCUMENT_ACCEPT } from '@/components/upload/upload-utils';\nimport {\n  UploaderProvider,\n  type UploadFn,\n} from '@/components/upload/uploader-provider';\nimport * as React from 'react';\n\nexport default function FileFieldBlock() {\n  const { edgestore } = useMockEdgeStore(); // Mock edgestore for easy v0 integration\n\n  const uploadFn: UploadFn = React.useCallback(\n    async ({ file, signal, onProgressChange }) => {\n      const res = await edgestore.myPublicFiles.upload({\n        file,\n        signal,\n        onProgressChange,\n      });\n      // you can run some server action or api here\n      // to add the necessary data to your database\n      return { url: res.url };\n    },\n    [edgestore],\n  );\n\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-4\">\n      <div className=\"grid w-full max-w-md gap-1.5\">\n        <label\n          id=\"resume-label\"\n          htmlFor=\"resume-input\"\n          className=\"text-sm font-medium\"\n        >\n          Resume\n        </label>\n        <UploaderProvider uploadFn={uploadFn} autoUpload>\n          <FileField\n            inputId=\"resume-input\"\n            aria-labelledby=\"resume-label\"\n            accept={DOCUMENT_ACCEPT}\n            typesLabel=\"PDF, DOC or DOCX\"\n            maxSize={1024 * 1024 * 5} // 5MB\n          />\n        </UploaderProvider>\n      </div>\n    </div>\n  );\n}\n\n// Mock implementation of EdgeStore\nfunction useMockEdgeStore() {\n  return {\n    edgestore: {\n      myPublicFiles: {\n        upload: async ({\n          signal,\n          onProgressChange,\n        }: {\n          file: File;\n          signal?: AbortSignal;\n          onProgressChange?: (progress: number) => void | Promise<void>;\n        }) => {\n          // Simulate upload progress. Rejects like EdgeStore when the upload is aborted.\n          await new Promise<void>((resolve, reject) => {\n            let progress = 0;\n            const interval = setInterval(() => {\n              progress = Math.min(\n                progress + Math.floor(Math.random() * 21) + 10,\n                100,\n              );\n              void onProgressChange?.(progress);\n              if (progress >= 100) {\n                clearInterval(interval);\n                resolve();\n              }\n            }, 300);\n            signal?.addEventListener('abort', () => {\n              clearInterval(interval);\n              reject(new DOMException('Upload aborted', 'AbortError'));\n            });\n          });\n\n          return {\n            url: 'https://edgestore.dev/img/upload-demo.webp',\n          };\n        },\n      },\n    },\n  };\n}\n",
-      "type": "registry:block",
-      "target": "components/upload/blocks/file-field-block.tsx"
+      "type": "registry:page",
+      "target": "app/page.tsx"
     }
   ],
   "type": "registry:block"