{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-signature-pad-12","type":"registry:block","title":"Upload with apiRef","description":"Read the pad from outside its tree and attach the signature as a PNG file.","dependencies":[],"registryDependencies":["button","@reui/signature-pad"],"files":[{"path":"c-signature-pad-12.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useRef, useState } from \"react\"\nimport {\n  SignaturePad,\n  SignaturePadArea,\n  SignaturePadGuide,\n  SignaturePadPlaceholder,\n  type SignaturePadApi,\n} from \"@/components/reui/signature-pad\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport function Pattern() {\n  /* `apiRef` reaches the pad from code outside its tree, such as a form\n     library's submit handler. */\n  const padRef = useRef<SignaturePadApi>(null)\n  const [upload, setUpload] = useState<{ name: string; size: number } | null>(\n    null\n  )\n  const [empty, setEmpty] = useState(true)\n\n  const prepareUpload = async () => {\n    const blob = await padRef.current?.toBlob({ scale: 3 })\n    if (!blob) return\n    const file = new File([blob], \"signature.png\", { type: \"image/png\" })\n    /* Append `file` to a FormData and POST it to your own endpoint. */\n    setUpload({ name: file.name, size: file.size })\n  }\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-lg flex-col gap-3\">\n      <SignaturePad\n        apiRef={padRef}\n        onValueChange={(strokes) => {\n          setEmpty(strokes.length === 0)\n          setUpload(null)\n        }}\n      >\n        <SignaturePadArea className=\"h-44\">\n          <SignaturePadGuide />\n          <SignaturePadPlaceholder />\n        </SignaturePadArea>\n      </SignaturePad>\n      <div className=\"flex items-center gap-2\">\n        <Button disabled={empty} onClick={prepareUpload}>\n          Attach as PNG\n        </Button>\n        <Button\n          variant=\"ghost\"\n          disabled={empty}\n          onClick={() => {\n            padRef.current?.clear()\n            /* This button disables itself, so focus moves to the pad. */\n            padRef.current?.focus()\n          }}\n        >\n          Clear\n        </Button>\n        <p\n          role=\"status\"\n          className=\"text-muted-foreground ms-auto truncate text-sm\"\n        >\n          {upload && `${upload.name}, ${(upload.size / 1024).toFixed(1)} KB`}\n        </p>\n      </div>\n    </div>\n  )\n}","target":"components/examples/c-signature-pad-12.tsx"}],"meta":{"order":12,"label":"File Upload"}}