From 6589b5e7798c6f2e85107c16b9666c9962debdec Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 7 Aug 2026 21:36:32 +0000 Subject: [PATCH 1/5] feat: sync file component behavior from upstream PR29 Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com> --- .../new-york/blocks/file-picker/index.tsx | 50 ++++++++++++------- .../new-york/blocks/file-preview/index.tsx | 29 ++++++++--- .../new-york/blocks/file-uploader/index.tsx | 6 ++- .../new-york/blocks/image-preview/index.tsx | 27 +++++++--- 4 files changed, 81 insertions(+), 31 deletions(-) diff --git a/registry/new-york/blocks/file-picker/index.tsx b/registry/new-york/blocks/file-picker/index.tsx index d90b77e..b8a71d5 100644 --- a/registry/new-york/blocks/file-picker/index.tsx +++ b/registry/new-york/blocks/file-picker/index.tsx @@ -1,6 +1,6 @@ "use client"; -import { X } from "lucide-react"; +import { Eye, X } from "lucide-react"; import { computed, observable } from "mobx"; import { observer } from "mobx-react"; import { FormComponent, FormComponentProps, reaction } from "mobx-react-helper"; @@ -8,9 +8,11 @@ import { blobOf } from "web-utility"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; -import { FilePreview } from "../file-preview"; +import { FilePreview, FilePreviewProps } from "../file-preview"; -export type FilePickerProps = FormComponentProps; +export interface FilePickerProps extends FormComponentProps { + onView?: (data: Pick) => void; +} const blobCache = new WeakMap(); @@ -105,12 +107,12 @@ export class FilePicker extends FormComponent { } render() { - const { filePath, fileType } = this, - { className = "", style } = this.props; + const { file, filePath, fileType } = this, + { className = "", style, onView } = this.props; return (
{filePath ? ( @@ -118,6 +120,7 @@ export class FilePicker extends FormComponent { className="w-full h-full" type={fileType} path={filePath} + file={file} /> ) : (
@@ -125,17 +128,30 @@ export class FilePicker extends FormComponent {
)} {this.renderInput()} - {filePath && ( - - )} +
+ {onView && ( + + )} + {filePath && ( + + )} +
); } diff --git a/registry/new-york/blocks/file-preview/index.tsx b/registry/new-york/blocks/file-preview/index.tsx index 511740e..23ad33a 100644 --- a/registry/new-york/blocks/file-preview/index.tsx +++ b/registry/new-york/blocks/file-preview/index.tsx @@ -16,7 +16,8 @@ export type FilePreviewProps = ImgHTMLAttributes & HTMLAttributes & HTMLAttributes & { type?: InputHTMLAttributes["accept"]; - path: string; + path?: string; + file?: HTMLMediaElement["srcObject"]; }; export const FileTypeMap: Record = { @@ -48,12 +49,17 @@ export const FilePreview: FC = ({ hidden, type, path, + file, ...props }) => { const [category, ...kind] = type?.split(/\W+/) || [], - fileName = decodeURI( - new URL(path, "http://localhost").pathname.split("/").at(-1) || "", - ); + fileName = + file instanceof File + ? file.name + : decodeURI( + new URL(path || "", "http://localhost").pathname.split("/").at(-1) || + "", + ); const extension = FileTypeMap[kind.at(-1) || ""] || (fileName?.includes(".") ? fileName.split(".").at(-1) : kind.at(-1)); @@ -68,14 +74,25 @@ export const FilePreview: FC = ({ {...props} > {category === "image" ? ( - + ) : category === "audio" ? ( -