File Upload With Preview

"use client";

import { FileUploadWithPreview } from "@/components/f-ui/file-upload-with-preview/file-upload-with-preview";

import { createFakeUpload } from "@/demos/file-upload/fake-upload";

export function FileUploadWithPreviewDemo() {
  return (
    <div className="max-w-md">
      <FileUploadWithPreview
        accept="image/*,.pdf,.docx,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        description="Pick images, PDFs, or DOCX. Preview opens before upload finishes."
        documentPreviewProps={{
          engineOptions: { wasmUrl: "/vendor/pdfium.wasm" },
        }}
        label="Attachments"
        multiple
        upload={createFakeUpload({ durationMs: 2000 })}
      />
    </div>
  );
}

"use client";

import { useState } from "react";

import type { FileUploadItem } from "@/components/f-ui/file-upload/file-upload-types";
import { FileUploadWithPreview } from "@/components/f-ui/file-upload-with-preview/file-upload-with-preview";
import { Button } from "@/components/ui/button";

const SEED: FileUploadItem[] = [
  {
    uid: "seed-pdf",
    name: "loan-application.pdf",
    status: "done",
    type: "application/pdf",
    url: "/demo-documents/loan-application.pdf",
  },
  {
    uid: "seed-docx",
    name: "demo.docx",
    status: "done",
    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    url: "/demo-documents/demo.docx",
  },
  {
    uid: "seed-image",
    name: "demo.png",
    status: "done",
    type: "image/png",
    url: "/demo-documents/demo.png",
  },
];

/**
 * PDF / DOCX fixtures pinned from Extend UI
 * `bca60b9e204ef0db248466dfa44367ad4c23d404`.
 */
export function FileUploadWithPreviewControlledDemo() {
  const [value, setValue] = useState<FileUploadItem[]>(SEED);
  const [previewItem, setPreviewItem] = useState<FileUploadItem | null>(null);

  return (
    <div className="max-w-md space-y-3">
      <div className="flex flex-wrap gap-2">
        <Button
          onClick={() => setPreviewItem(SEED[0] ?? null)}
          type="button"
          variant="outline"
        >
          Preview PDF
        </Button>
        <Button
          onClick={() => setPreviewItem(null)}
          type="button"
          variant="outline"
        >
          Clear preview
        </Button>
      </div>
      <p className="text-muted-foreground text-sm">
        Controlled preview item: {previewItem?.name ?? "—"}
      </p>
      <FileUploadWithPreview
        documentPreviewProps={{
          engineOptions: { wasmUrl: "/vendor/pdfium.wasm" },
        }}
        label="Controlled list"
        multiple
        onPreviewItemChange={setPreviewItem}
        onValueChange={setValue}
        previewItem={previewItem}
        value={value}
      />
    </div>
  );
}

"use client";

import { useState } from "react";

import type {
  FileUploadItem,
  FileUploadPreviewEvent,
} from "@/components/f-ui/file-upload/file-upload-types";
import { FileUploadWithPreview } from "@/components/f-ui/file-upload-with-preview/file-upload-with-preview";

const SEED: FileUploadItem[] = [
  {
    uid: "cancel-pdf",
    name: "loan-application.pdf",
    status: "done",
    type: "application/pdf",
    url: "/demo-documents/loan-application.pdf",
  },
  {
    uid: "cancel-docx",
    name: "demo.docx",
    status: "done",
    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    url: "/demo-documents/demo.docx",
  },
];

/**
 * PDF / DOCX fixtures pinned from Extend UI
 * `bca60b9e204ef0db248466dfa44367ad4c23d404`.
 */
export function FileUploadWithPreviewCancellationDemo() {
  const [lastAction, setLastAction] = useState("—");

  return (
    <div className="max-w-md space-y-3">
      <p className="text-muted-foreground text-sm">
        Click a file name. The handler calls{" "}
        <code>event.preventDefault()</code> so the recipe overlay does not open.
      </p>
      <p className="text-sm">Last action: {lastAction}</p>
      <FileUploadWithPreview
        defaultValue={SEED}
        label="Cancelled preview"
        onPreview={(item: FileUploadItem, event: FileUploadPreviewEvent) => {
          event.preventDefault();
          setLastAction(`Cancelled overlay for ${item.name}`);
        }}
      />
    </div>
  );
}