React

Reduce PDF y fotos antes de subirlos en una aplicación React, incluso con react-dropzone, sin cambiar tu manejador de subida.

No hay que instalar ningún paquete de React: carga el script una vez y añade un atributo. El asistente intercepta el archivo antes que React y entrega a tu onChange u onDrop el archivo reducido.

1. Carga el script

En index.html o, con Next.js, en tu layout raíz:

HTML

<script src="https://pdfkind.com/embed.js" defer></script>

Next.js (app/layout.tsx)

import Script from 'next/script';

<Script src="https://pdfkind.com/embed.js" strategy="afterInteractive" />

2. Un campo de archivo

JSX

<input
  type="file"
  accept="application/pdf,image/*"
  data-pdfkind-max="5MB"
  onChange={(e) => setFile(e.target.files[0])}
/>

3. react-dropzone

Pon el atributo en el elemento raíz. Cubre tanto el arrastre como el input oculto que usa el botón «Examinar».

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // recibe el archivo reducido
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Arrastra tu documento aquí
</div>

Llamarlo tú mismo

Para archivos que vienen de pegar, de una cámara o de un selector personalizado:

JSX

async function handleFile(file) {
  const small = await window.PDFkind.fit(file, { max: '5MB' });
  upload(small);
}

Consejo. Lee los archivos del evento (e.target.files o los archivos que recibe onDrop), como ya hace la mayoría del código. Si tu código sigue recibiendo el archivo original, consulta Solución de problemas.

AnteriorCómo funciona Siguiente Vue

Última actualización: 3 de noviembre de 2026 · ¿Preguntas? contact@pdfkind.com