React

Réduisez les PDF et les photos avant l’envoi dans une application React, y compris avec react-dropzone, sans modifier votre gestionnaire d’upload.

Aucun paquet React à installer : chargez le script une fois et ajoutez un attribut. L’assistant intercepte le fichier avant React et transmet le fichier réduit à votre onChange ou onDrop.

1. Charger le script

Dans index.html, ou avec Next.js dans votre layout racine :

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 champ fichier

JSX

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

3. react-dropzone

Placez l’attribut sur l’élément racine. Il couvre à la fois le dépôt et le champ masqué utilisé par « Parcourir ».

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // reçoit le fichier réduit
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Déposez votre document ici
</div>

L’appeler vous-même

Pour les fichiers issus d’un collage, d’une caméra ou d’un sélecteur personnalisé :

JSX

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

Astuce. Lisez les fichiers depuis l’événement (e.target.files ou les fichiers passés à onDrop), comme le fait déjà la plupart du code. Si votre code reçoit toujours le fichier d’origine, consultez Dépannage.

PrécédentFonctionnement Suivant Vue

Dernière mise à jour : 3 novembre 2026 · Des questions ? contact@pdfkind.com