> ## Documentation Index
> Fetch the complete documentation index at: https://docs.markpdf.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Ejemplos

> Real cases with @markpdf/react: dropzone, page range, RAG and large PDFs.

# Ejemplos

## File input with progress bar

```tsx theme={null}
import { useConvertFile } from "@markpdf/react";

export function PdfUploader() {
  const { convert, status, progress, markdown, error, reset } = useConvertFile();

  return (
    <div>
      <input
        type="file"
        accept="application/pdf"
        disabled={status === "uploading" || status === "converting"}
        onChange={(e) => e.target.files?.[0] && convert(e.target.files[0], { mode: "fast" })}
      />

      {(status === "uploading" || status === "converting") && (
        <progress value={status === "uploading" ? progress : 100} max={100} />
      )}

      {error && <p role="alert">{error.message}</p>}

      {markdown && (
        <>
          <pre>{markdown}</pre>
          <button onClick={reset}>Convertir otro</button>
        </>
      )}
    </div>
  );
}
```

## Drag-and-drop

```tsx theme={null}
import { useConvertFile } from "@markpdf/react";
import { useState } from "react";

export function Dropzone() {
  const { convert, status, markdown } = useConvertFile();
  const [dragging, setDragging] = useState(false);

  return (
    <div
      onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
      onDragLeave={() => setDragging(false)}
      onDrop={(e) => {
        e.preventDefault();
        setDragging(false);
        const file = e.dataTransfer.files[0];
        if (file) convert(file, { mode: "fast" });
      }}
      style={{ border: dragging ? "2px dashed #14b8a6" : "2px dashed #ccc", padding: 32 }}
    >
      {status === "idle" && "Suelta un PDF aquí"}
      {status === "uploading" && "Subiendo…"}
      {markdown && <pre>{markdown}</pre>}
    </div>
  );
}
```

## Page range of a large PDF

```tsx theme={null}
const { convert } = useConvertFile();

convert(file, { mode: "fast", pages: "1-20" });
```

## Metadata instead of just Markdown

```tsx theme={null}
const { convert, json } = useConvertFile();

await convert(file, { responseFormat: "json" });
console.log(json?.engine, json?.tokenSavedEstimate, json?.timings.totalRequestMs);
```

## Pipeline RAG: index before converting

```tsx theme={null}
import { useMarkpdf } from "@markpdf/react";

function RagPreview({ url }: { url: string }) {
  const client = useMarkpdf();

  const run = async () => {
    const spine = await client.pdfIndex(url);
    const target = spine.sections.find((s) => s.text.includes("Conclusiones"));
    if (!target) return;

    const markdown = await client.convertFromUrl(url, {
      pages: `${target.page}-${spine.pageCount}`,
      mode: "fast",
    });
    console.log(markdown);
  };

  return <button onClick={run}>Index and convert section</button>;
}
```

See [PDF Index for AI agents](/docs/concepts/pdf-index-for-ai-agents).

<Warning>
  These examples call API directly from the browser — the API key is visible in the bundle. Review the [Framework Guide](/docs/sdks/react/framework-guide) before using this pattern in public-facing production.
</Warning>