file-preview pdf file getting downloaded instead of preview

[xmlking]

I am exploring FilePreview component, with sample Code
I expected when I click the PDF file in the FileBrowser, it will preview PDF content, but it keep downloading .pdf file

if this a mime type issue?

Enhancement Proposal:

would be nice to have custom preview support with my own viewer components : e.g., Extend UI
would be nice if developer can pass their own viewer component as prop to FileBrowser so FileBrowser can generate direct URL and pass it to viewer component for rendering.

#  Extend UI components for document viewers for PDF, DOCX, XLSX, and CSV (optional)
bunx --bun shadcn@latest add -p src/components/extend @extend/pdf-viewer
bunx --bun shadcn@latest add -p src/components/extend @extend/docx-viewer
bunx --bun shadcn@latest add -p src/components/extend @extend/schema-builder

[haydenbleasel]

good catch — not a mime issue. the gateway forces Content-Disposition: attachment on both url() and the download proxy (it's the stored-XSS guard for user-uploaded content), and chrome honors that header even inside an <object> tag, so the pdf downloads instead of rendering. images were fine because <img> ignores the header.

fixed in 585d45a: FilePreview now fetches pdf bytes via download() and renders a blob: url, which carries no headers — works with zero server config and the XSS guard stays intact.

also added your enhancement — a renderPreview prop that replaces the built-in preview with your own viewer (e.g. the extend ui ones):

<FilePreview
  file={key}
  files={files}
  renderPreview={({ file, src }) =>
    file.type === "application/pdf" && src
      ? <PDFViewer src={src} className="h-[640px]" />
      : null
  }
/>

when it's set, src resolves for every non-text type (not just images/pdfs), so docx/xlsx viewers get a url too. pdfs arrive as a blob: url, everything else as a signed/proxy url.

this goes out with the next release — once it's live, re-run npx shadcn add for the file-preview component to pick it up. docs: https://files-sdk.dev/docs/ui/components/file-preview

in the meantime you can unblock yourself server-side by returning disposition: "inline" from your gateway's authorize for pdf keys on download/url ops.

[xmlking]

I am able to use renderPreview as well as native PDF preview.

is there a way to use use both FilePreview native preview for images and text and custom preview for docx, esv etc ?

        <p>Preview File: {key}</p>
        {/* {key && <FilePreview file={key} files={files} />} */}
        {key && (
          <FilePreview
            file={key}
            files={files}
            renderPreview={({ file, src, text }) => {
              if (file.type === "application/pdf" && src) {
                return <PDFViewer className="h-[640px]" src={src} />;
              }
              if (file.type === "text/csv" && text) {
                return <CsvViewer data={text} search />;
              }
              return <p className="text-sm text-muted-foreground">No preview</p>;
            }}
          />
        )}