File Upload

"use client";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";

import { createFakeUpload } from "./fake-upload";

export function FileUploadDemo() {
  return (
    <div className="max-w-md">
      <FileUpload
        description="Pick one or more files. Upload is simulated in this demo."
        label="Attachments"
        multiple
        upload={createFakeUpload()}
      />
    </div>
  );
}

"use client";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";

import { createFakeUpload } from "./fake-upload";

export function FileUploadDropzoneDemo() {
  return (
    <div className="max-w-lg">
      <FileUpload
        accept="image/*,.pdf"
        description="Outer field description (below the control)."
        dropzoneHint="Support for images and PDF. Mismatched types show a reject state on drag."
        label="Dropzone"
        multiple
        upload={createFakeUpload({ durationMs: 900 })}
        variant="dropzone"
      />
    </div>
  );
}

"use client";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";

import { createFakeUpload } from "./fake-upload";

export function FileUploadPictureCardDemo() {
  return (
    <FileUpload
      accept="image/*"
      description="Upload up to eight images. Hover a tile for preview or remove."
      label="Pictures"
      maxCount={8}
      multiple
      upload={createFakeUpload({ durationMs: 1000 })}
      variant="picture-card"
    />
  );
}

"use client";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";

import { createFakeUpload } from "./fake-upload";

export function FileUploadAvatarDemo() {
  return (
    <FileUpload
      accept="image/png,image/jpeg"
      description="JPG/PNG only. Defaults to a single replaceable image."
      label="Avatar"
      upload={createFakeUpload({ durationMs: 900 })}
      variant="avatar"
    />
  );
}

"use client";

import { useState } from "react";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";
import type { FileUploadItem } from "@/components/f-ui/file-upload/file-upload-types";

import { createFakeUpload } from "./fake-upload";

const initial: FileUploadItem[] = [
  {
    uid: "seed-1",
    name: "quarterly-report.pdf",
    size: 245_760,
    type: "application/pdf",
    status: "done",
    url: "https://example.com/files/quarterly-report.pdf",
  },
];

export function FileUploadControlledDemo() {
  const [value, setValue] = useState<FileUploadItem[]>(initial);

  return (
    <div className="max-w-md space-y-3">
      <FileUpload
        label="Controlled list"
        multiple
        onValueChange={setValue}
        upload={createFakeUpload()}
        value={value}
      />
      <p className="text-muted-foreground text-xs">
        items: {value.length} ·{" "}
        {value.map((item) => `${item.name}(${item.status})`).join(", ") || "—"}
      </p>
    </div>
  );
}

"use client";

import { useState } from "react";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";
import type { FileUploadItem } from "@/components/f-ui/file-upload/file-upload-types";

import { createFakeUpload } from "./fake-upload";

const initial: FileUploadItem[] = [
  {
    uid: "done-1",
    name: "quarterly-report.pdf",
    size: 245_760,
    type: "application/pdf",
    status: "done",
    url: "https://example.com/files/quarterly-report.pdf",
  },
  {
    uid: "idle-1",
    name: "not-uploaded-yet.pdf",
    size: 12_000,
    type: "application/pdf",
    status: "idle",
  },
];

export function FileUploadConfirmRemoveDemo() {
  const [value, setValue] = useState<FileUploadItem[]>(initial);

  return (
    <div className="max-w-md space-y-3">
      <FileUpload
        confirmRemove
        label="Attachments"
        description="Done files ask before remove; idle does not"
        multiple
        value={value}
        onValueChange={setValue}
        upload={createFakeUpload()}
        autoUpload={false}
        onRemove={async (item) => {
          if (item.status !== "done") return true;
          await new Promise((r) => setTimeout(r, 400));
          return true;
        }}
      />
      <p className="text-muted-foreground text-xs">
        Try ✕ on the done file (confirm) vs the idle file (immediate).
      </p>
    </div>
  );
}

"use client";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";
import type { FileUploadRequest } from "@/components/f-ui/file-upload/file-upload-types";

const upload: FileUploadRequest = (file, { onProgress, onSuccess, onError, signal }) => {
  return new Promise<void>((resolve) => {
    let step = 0;
    const id = window.setInterval(() => {
      if (signal.aborted) {
        window.clearInterval(id);
        resolve();
        return;
      }
      step += 1;
      onProgress(step * 25);
      if (step >= 4) {
        window.clearInterval(id);
        if (file.size > 2 * 1024 * 1024) {
          onError({ message: "Demo rejects files over 2 MB" });
        } else {
          onSuccess({
            url: `blob:demo/${encodeURIComponent(file.name)}`,
            response: { ok: true },
          });
        }
        resolve();
      }
    }, 200);
  });
};

export function FileUploadCustomUploadDemo() {
  return (
    <div className="max-w-md">
      <FileUpload
        description="Inject your own upload(file, ctx). This demo steps progress to 100%."
        label="Custom upload"
        maxSize={2 * 1024 * 1024}
        multiple
        upload={upload}
      />
    </div>
  );
}

"use client";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";
import { createXhrUploader } from "@/components/f-ui/file-upload/create-xhr-uploader";

import { createFakeUpload } from "./fake-upload";

// Production: createXhrUploader({ action: "/api/upload", method: "POST" }).
// Docs preview stays offline unless NEXT_PUBLIC_DEMO_UPLOAD_URL is set.
const upload =
  typeof process !== "undefined" && process.env.NEXT_PUBLIC_DEMO_UPLOAD_URL
    ? createXhrUploader({
        action: process.env.NEXT_PUBLIC_DEMO_UPLOAD_URL,
        method: "POST",
        name: "file",
      })
    : createFakeUpload({ durationMs: 1000 });

export function FileUploadXhrDemo() {
  return (
    <div className="max-w-md">
      <FileUpload
        description="createXhrUploader posts multipart via XHR with progress. This preview simulates progress offline."
        label="XHR uploader"
        multiple
        upload={upload}
      />
    </div>
  );
}

"use client";

import { useState } from "react";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";
import type {
  FileUploadItem,
  FileUploadPreviewEvent,
} from "@/components/f-ui/file-upload/file-upload-types";
import { Button } from "@/components/ui/button";

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

/**
 * Public File Upload preview contract only — no Plus imports.
 * PDF / DOCX fixtures pinned from Extend UI
 * `bca60b9e204ef0db248466dfa44367ad4c23d404`.
 */
export function FileUploadPreviewContractDemo() {
  const [mode, setMode] = useState<"fallback" | "takeover">("fallback");
  const [log, setLog] = useState("—");

  return (
    <div className="max-w-md space-y-3">
      <div className="flex flex-wrap gap-2">
        <Button
          onClick={() => {
            setMode("fallback");
            setLog("—");
          }}
          type="button"
          variant={mode === "fallback" ? "default" : "outline"}
        >
          New-tab fallback
        </Button>
        <Button
          onClick={() => {
            setMode("takeover");
            setLog("—");
          }}
          type="button"
          variant={mode === "takeover" ? "default" : "outline"}
        >
          Callback takes over
        </Button>
      </div>
      <p className="text-muted-foreground text-sm">
        {mode === "fallback"
          ? "No onPreview — clicking a safe URL opens a new tab."
          : "onPreview is set — the browser fallback is suppressed."}
      </p>
      <p className="text-sm">Log: {log}</p>
      <FileUpload
        disabled
        label="Preview contract"
        onPreview={
          mode === "takeover"
            ? (item: FileUploadItem, _event: FileUploadPreviewEvent) => {
                setLog(`Handler received ${item.name} (no new tab)`);
              }
            : undefined
        }
        value={SEED}
      />
    </div>
  );
}

"use client";

import type { FileUploadItem } from "@/components/f-ui/file-upload/file-upload-types";
import { useFileUpload } from "@/components/f-ui/file-upload/use-file-upload";

import { createFakeUpload } from "./fake-upload";

export function FileUploadHeadlessDemo() {
  const s = useFileUpload({
    multiple: true,
    upload: createFakeUpload({ durationMs: 800 }),
  });

  const visible = s.items.filter((item) => item.status !== "removed");

  return (
    <div>
      <label htmlFor="headless-file-upload">Files</label>
      <div>
        <input {...s.fileInputProps} id="headless-file-upload" />
        <button
          disabled={s.disabled}
          onClick={() => s.open()}
          type="button"
        >
          Browse
        </button>
        {visible.length > 0 ? (
          <button onClick={() => s.clear()} type="button">
            Clear
          </button>
        ) : null}
      </div>
      {visible.length > 0 ? (
        <ul>
          {visible.map((item: FileUploadItem) => (
            <li key={item.uid}>
              {item.name} — {item.status}
              {item.status === "uploading" && item.percent != null
                ? ` (${item.percent}%)`
                : ""}
              {item.status === "error" ? (
                <button
                  onClick={() => {
                    void s.retry(item.uid);
                  }}
                  type="button"
                >
                  Retry
                </button>
              ) : null}
              <button onClick={() => s.remove(item.uid)} type="button">
                Remove
              </button>
            </li>
          ))}
        </ul>
      ) : null}
      <p>
        value:{" "}
        {visible.length > 0
          ? visible.map((item) => `${item.name}:${item.status}`).join(", ")
          : "—"}
      </p>
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import type { FileUploadItem } from "@/components/f-ui/file-upload/file-upload-types";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { validateFileRequired } from "@/components/f-ui/formily/validators/file-upload";
import { Button } from "@/components/ui/button";

import { createFakeUpload } from "./fake-upload";

interface AttachmentValues {
  attachments: FileUploadItem[];
}

const upload = createFakeUpload();

export function FileUploadFormFieldDemo() {
  const form = useMemo(
    () =>
      createForm<AttachmentValues>({
        initialValues: { attachments: [] },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<AttachmentValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="attachments"
          label="Attachments"
          description="Required — upload at least one file. Progress is not an error; submit waits until uploads finish."
          kind="file"
          required
          validator={[{ validator: validateFileRequired }]}
          componentProps={{
            multiple: true,
            upload,
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useState } from "react";

import { FileUpload } from "@/components/f-ui/file-upload/file-upload";
import type { FileUploadItem } from "@/components/f-ui/file-upload/file-upload-types";

import { createFakeUpload } from "./fake-upload";

const longPdf = `${"quarterly-financial-summary-with-extra-context-".repeat(4)}.pdf`;
const longArchive = `${"backup-archive-snapshot-".repeat(5)}.tar.gz`;
const longDocx = `${"picture-card-fallback-name-".repeat(4)}.docx`;

const listSeed: FileUploadItem[] = [
  {
    uid: "long-pdf",
    name: longPdf,
    size: 1_048_576,
    type: "application/pdf",
    status: "done",
    url: "https://example.com/files/long.pdf",
  },
  {
    uid: "long-tar-gz",
    name: longArchive,
    size: 4_194_304,
    type: "application/gzip",
    status: "done",
    url: "https://example.com/files/long.tar.gz",
  },
  {
    uid: "long-error",
    name: `${"failed-upload-with-verbose-path-".repeat(3)}.xlsx`,
    size: 51_200,
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    status: "error",
    error: { message: "Upload timed out" },
  },
];

const pictureSeed: FileUploadItem[] = [
  {
    uid: "pic-long",
    name: longDocx,
    size: 204_800,
    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    status: "done",
  },
];

export function FileUploadLongFilenameDemo() {
  const [listValue, setListValue] = useState<FileUploadItem[]>(listSeed);
  const [pictureValue, setPictureValue] =
    useState<FileUploadItem[]>(pictureSeed);

  return (
    <div className="max-w-sm space-y-6">
      <FileUpload
        description="Narrow column — stem truncates; extension and title stay readable."
        label="List row"
        multiple
        onValueChange={setListValue}
        upload={createFakeUpload()}
        value={listValue}
      />
      <FileUpload
        description="Non-image fallback uses line-clamp + full title."
        label="Picture card"
        multiple
        onValueChange={setPictureValue}
        upload={createFakeUpload()}
        value={pictureValue}
        variant="picture-card"
      />
    </div>
  );
}