React

Riduci PDF e foto prima del caricamento in un’app React, anche con react-dropzone, senza modificare il tuo gestore di upload.

Nessun pacchetto React da installare: carica lo script una volta e aggiungi un attributo. L’assistente intercetta il file prima di React e passa al tuo onChange o onDrop il file ridotto.

1. Carica lo script

In index.html, oppure con Next.js nel layout principale:

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 file

JSX

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

3. react-dropzone

Metti l’attributo sull’elemento radice. Copre sia il rilascio sia l’input nascosto usato da “sfoglia”.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // riceve il file ridotto
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Trascina qui il tuo documento
</div>

Chiamarlo direttamente

Per i file incollati, scattati con la fotocamera o scelti con un selettore personalizzato:

JSX

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

Suggerimento. Leggi i file dall’evento (e.target.files o i file passati a onDrop), come fa già la maggior parte del codice. Se il tuo codice riceve ancora il file originale, vedi Risoluzione dei problemi.

PrecedenteCome funziona Successiva Vue

Ultimo aggiornamento: 3 novembre 2026 · Domande: contact@pdfkind.com