4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T5d0,"use client"; import * as React from "react"; import type { DropzoneFileItem, DropzoneIntake, } from "@/components/ui/dropzone"; import { ViewerBody } from "@/components/ui/viewer"; import { FileIntakeViewerDropTarget, FileIntakeViewerHeader, FileIntakeViewerProvider, FileIntakeViewerRoot, FileIntakeViewerSidebar, FileIntakeViewerSurface, } from "./dropzone-uploader-viewer-parts"; export type FileIntakeViewerProps = { accept?: string; className?: string; defaultFiles?: DropzoneFileItem[]; disabled?: boolean; files?: DropzoneFileItem[]; maxSize?: number; onFilesChange?: (files: DropzoneFileItem[]) => void; onIntake?: (intake: DropzoneIntake) => void; }; export function FileIntakeViewer({ accept, className, defaultFiles, disabled, files, maxSize, onFilesChange, onIntake, }: FileIntakeViewerProps) { return ( ); } 52:T3991,"use client"; import * as React from "react"; import { Upload, X } from "lucide-react"; import { cn } from "@/lib/utils"; import { blobSource } from "@/lib/viewer-resource"; import type { BlobViewerSource } from "@/lib/viewer-source"; import { useDropzone, type DropzoneFileItem, type DropzoneFileRejection, type DropzoneIntake, type UseDropzoneReturn, } from "@/components/ui/dropzone"; import { formatFileSize } from "@/components/ui/file-size-format"; import { FileThumbnail } from "@/components/ui/file-thumbnail"; import { FileViewerPreview } from "@/components/ui/file-viewer"; import { ViewerHeader, ViewerRoot, ViewerSidebar, ViewerSidebarTrigger, ViewerSurface, } from "@/components/ui/viewer"; const DEFAULT_FILE_INTAKE_VIEWER_ACCEPT = ".pdf,.png,.jpg,.jpeg,.csv,.txt,.md,.json,application/pdf,image/*,text/*,text/csv,application/json"; export interface FileIntakeViewerProviderProps { accept?: string; defaultFiles?: DropzoneFileItem[]; disabled?: boolean; files?: DropzoneFileItem[]; maxSize?: number; onFilesChange?: (files: DropzoneFileItem[]) => void; onIntake?: (intake: DropzoneIntake) => void; children: React.ReactNode; } type FileIntakeViewerModel = { canClear: boolean; hasFile: boolean; isDragging: boolean; rejection: FileIntakeViewerRejection | null; selectedFile: DropzoneFileItem | null; selectedFileSummary: FileIntakeSummary | null; viewerSource: BlobViewerSource | null; }; type FileIntakeSummary = { file: File; fileName: string; fileSizeLabel: string; fileTypeLabel: string; }; export type FileIntakeViewerRejection = { title: string; description: string; }; type FileIntakeViewerActions = { clearFile: () => void; getRootDropProps: UseDropzoneReturn["getRootProps"]; getFileInputProps: UseDropzoneReturn["getInputProps"]; getUploadButtonProps: UseDropzoneReturn["getTriggerProps"]; getEmptySurfaceProps: UseDropzoneReturn["getTriggerProps"]; }; type FileIntakeViewerContextValue = { actions: FileIntakeViewerActions; model: FileIntakeViewerModel; }; type FileIntakeViewerDropTargetState = { getFileInputProps: FileIntakeViewerActions["getFileInputProps"]; getRootDropProps: FileIntakeViewerActions["getRootDropProps"]; isDragging: boolean; }; type FileIntakeViewerHeaderState = { canClear: boolean; clearFile: FileIntakeViewerActions["clearFile"]; getUploadButtonProps: FileIntakeViewerActions["getUploadButtonProps"]; selectedFileSummary: FileIntakeSummary | null; }; type FileIntakeViewerSidebarState = { getUploadButtonProps: FileIntakeViewerActions["getUploadButtonProps"]; selectedFileSummary: FileIntakeSummary | null; }; export type FileIntakeViewerSurfaceState = { getEmptySurfaceProps: UseDropzoneReturn["getTriggerProps"]; rejection: FileIntakeViewerRejection | null; viewerSource: BlobViewerSource | null; }; const FileIntakeViewerContext = React.createContext(null); function useFileIntakeViewerContext(): FileIntakeViewerContextValue { const context = React.useContext(FileIntakeViewerContext); if (!context) { throw new Error( "useFileIntakeViewer must be used within FileIntakeViewerProvider.", ); } return context; } function useFileIntakeViewerDropTarget(): FileIntakeViewerDropTargetState { const { actions, model } = useFileIntakeViewerContext(); return { getFileInputProps: actions.getFileInputProps, getRootDropProps: actions.getRootDropProps, isDragging: model.isDragging, }; } function useFileIntakeViewerHeader(): FileIntakeViewerHeaderState { const { actions, model } = useFileIntakeViewerContext(); return { canClear: model.canClear, clearFile: actions.clearFile, getUploadButtonProps: actions.getUploadButtonProps, selectedFileSummary: model.selectedFileSummary, }; } function useFileIntakeViewerSidebar(): FileIntakeViewerSidebarState { const { actions, model } = useFileIntakeViewerContext(); return { getUploadButtonProps: actions.getUploadButtonProps, selectedFileSummary: model.selectedFileSummary, }; } export function useFileIntakeViewerSurface(): FileIntakeViewerSurfaceState { const { actions, model } = useFileIntakeViewerContext(); return { getEmptySurfaceProps: actions.getEmptySurfaceProps, rejection: model.rejection, viewerSource: model.viewerSource, }; } export function FileIntakeViewerProvider({ accept = DEFAULT_FILE_INTAKE_VIEWER_ACCEPT, defaultFiles, disabled, files, maxSize, onFilesChange, onIntake, children, }: FileIntakeViewerProviderProps) { const dropzone = useDropzone({ accept, defaultFiles, disabled, files, maxFiles: 1, maxSize, multiple: false, onFilesChange, onIntake, }); const { clearFiles, getInputProps, getRootProps, getTriggerProps } = dropzone; const model = React.useMemo( () => createFileIntakeViewerModel({ files: dropzone.files, isDisabled: dropzone.isDisabled, isDragging: dropzone.isDragging, lastIntake: dropzone.lastIntake, }), [ dropzone.files, dropzone.isDisabled, dropzone.isDragging, dropzone.lastIntake, ], ); const actions = React.useMemo( () => ({ clearFile: clearFiles, getRootDropProps: getRootProps, getFileInputProps: getInputProps, getUploadButtonProps: (props) => getTriggerProps({ ...props, native: true }), getEmptySurfaceProps: getTriggerProps, }), [clearFiles, getInputProps, getRootProps, getTriggerProps], ); const value = React.useMemo( () => ({ actions, model, }), [actions, model], ); return ( {children} ); } export function FileIntakeViewerDropTarget({ children, className, }: { children: React.ReactNode; className?: string; }) { const { getFileInputProps, getRootDropProps } = useFileIntakeViewerDropTarget(); return (

{children}

); } export function FileIntakeViewerRoot({ children, className, }: { children: React.ReactNode; className?: string; }) { return ( {children} ); } export function FileIntakeViewerHeader() { const { canClear, clearFile, getUploadButtonProps, selectedFileSummary } = useFileIntakeViewerHeader(); return (

File preview

{selectedFileSummary ? (

{selectedFileSummary.fileName}

) : null}

{selectedFileSummary && canClear ? ( ) : null}

); } export function FileIntakeViewerSidebar() { const { getUploadButtonProps, selectedFileSummary } = useFileIntakeViewerSidebar(); return ( {selectedFileSummary ? ( ) : ( )} {!selectedFileSummary ? ( ) : null} ); } export function FileIntakeViewerSurface() { const { getEmptySurfaceProps, rejection, viewerSource } = useFileIntakeViewerSurface(); return ( {viewerSource ? ( ) : ( )} ); } function FileIntakeViewerFileCard({ fileSummary, }: { fileSummary: FileIntakeSummary; }) { return (

{fileSummary.fileName}

{fileSummary.fileSizeLabel}

{fileSummary.fileTypeLabel}

); } function FileIntakeViewerNoFile() { return (

No file selected

PDF, image, CSV, text, Markdown, or JSON.

); } function FileIntakeViewerEmptyState({ getEmptySurfaceProps, rejection, }: { getEmptySurfaceProps: FileIntakeViewerActions["getEmptySurfaceProps"]; rejection: FileIntakeViewerRejection | null; }) { return (

Upload file

Drop a file here to open it in the viewer.

{rejection ? (

{rejection.title}

{rejection.description}

) : null}

); } function getSelectedFileIntakeFile(files: DropzoneFileItem[]) { return files[0] ?? null; } function createFileIntakeSummary( fileItem: DropzoneFileItem | null, ): FileIntakeSummary | null { if (!fileItem) return null; return { file: fileItem.file, fileName: fileItem.file.name, fileSizeLabel: formatFileSize(fileItem.file.size), fileTypeLabel: fileItem.file.type || "Unknown type", }; } function createFileIntakeViewerSource( fileItem: DropzoneFileItem, ): BlobViewerSource { return blobSource(fileItem.file, { fileName: fileItem.file.name, identityKey: fileItem.id, mimeType: fileItem.file.type || undefined, }); } function createFileIntakeViewerModel( dropzone: Pick< UseDropzoneReturn, "files" | "isDragging" | "isDisabled" | "lastIntake" >, ): FileIntakeViewerModel { const selectedFile = getSelectedFileIntakeFile(dropzone.files); const selectedFileSummary = createFileIntakeSummary(selectedFile); const viewerSource = selectedFile ? createFileIntakeViewerSource(selectedFile) : null; return { canClear: selectedFile !== null && !dropzone.isDisabled, hasFile: selectedFile !== null, isDragging: dropzone.isDragging, rejection: createFileIntakeViewerRejection(dropzone.lastIntake), selectedFile, selectedFileSummary, viewerSource, }; } function createFileIntakeViewerRejection( intake: DropzoneIntake, ): FileIntakeViewerRejection | null { if (intake.acceptedFiles.length > 0 || intake.fileRejections.length === 0) { return null; } return describeFileIntakeRejection(intake.fileRejections[0]); } function describeFileIntakeRejection( rejection: DropzoneFileRejection, ): FileIntakeViewerRejection { if (rejection.reason === "file-invalid-type") { return { title: "Unsupported file type", description: `${rejection.file.name} cannot be opened here.`, }; } if (rejection.reason === "file-too-large") { return { title: "File is too large", description: `${rejection.file.name} must be ${formatFileSize( rejection.maxSize, )} or smaller.`, }; } return { title: "Only one file can be previewed", description: `${rejection.file.name} was not added.`, }; } 53:T909,"use client"; import { FileText, X } from "lucide-react"; import type { DropzoneFileItem, DropzoneFileRejection, } from "@/components/ui/dropzone"; import { formatFileSize } from "@/components/ui/file-size-format"; export type DropzoneExampleProps = { className?: string; }; export function InlineFileRows({ files, onRemove, }: { files: DropzoneFileItem[]; onRemove: (fileId: string) => void; }) { if (files.length === 0) return null; return (

{files.map((item) => (

{item.file.name}

{formatFileSize(item.file.size)}

))}

); } export function RejectionRows({ rejections, }: { rejections: DropzoneFileRejection[]; }) { if (rejections.length === 0) return null; return (

{rejections.map((rejection) => (

{rejection.file.name}: {getDropzoneRejectionMessage(rejection)}

))}

); } function getDropzoneRejectionMessage(rejection: DropzoneFileRejection): string { if (rejection.reason === "file-invalid-type") { return "This file type is not supported here."; } if (rejection.reason === "file-too-large") { return `File must be ${formatFileSize(rejection.maxSize)} or smaller.`; } if (rejection.reason === "custom") { return rejection.code; } return rejection.maxFiles === 1 ? "Only one file can be selected." : `Only ${rejection.maxFiles} files can be selected.`; } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["@retab/dropzone","@retab/file-viewer","@retab/file-size-format","@retab/file-thumbnail"]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.retab.com/r/dropzone-file-viewer-example.json","proxyUrl":"https://shadcnregistry.com/r/retab/dropzone-file-viewer-example","itemId":"@retab/dropzone-file-viewer-example"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/new-york-v4/blocks/dropzone-file-viewer-example.tsx","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { type DropzoneExampleProps } from \"./dropzone-example-shared\";\nimport { FileIntakeViewer } from \"./dropzone-uploader-viewer\";\n\nexport function DropzoneFileViewerExample({ className }: DropzoneExampleProps) {\n return ;\n}\n","type":"registry:component","target":"@components/blocks/dropzone-file-viewer-example.tsx"},{"path":"registry/new-york-v4/blocks/dropzone-uploader-viewer.tsx","content":"$51","type":"registry:component","target":"@components/blocks/dropzone-uploader-viewer.tsx"},{"path":"registry/new-york-v4/blocks/dropzone-uploader-viewer-parts.tsx","content":"$52","type":"registry:component","target":"@components/blocks/dropzone-uploader-viewer-parts.tsx"},{"path":"registry/new-york-v4/blocks/dropzone-example-shared.tsx","content":"$53","type":"registry:file","target":"registry/new-york-v4/blocks/dropzone-example-shared.tsx"}]}]]}],"$L54"]}]

Uploader + Viewer

Installation

Files

@components

registry

Styles