React

Reactアプリ（react-dropzoneを含む）で、アップロード処理を変更せずにPDFや写真をアップロード前に縮小する方法です。

Reactパッケージのインストールは不要です。スクリプトを1回読み込み、属性を追加するだけです。アップロード補助がReactより先にファイルを受け取り、縮小したファイルを onChange や onDrop に渡します。

1. スクリプトを読み込む

index.html に、またはNext.jsの場合はルートレイアウトに追加します：

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. ファイル入力

JSX

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

3. react-dropzone

属性はルート要素に付けます。ドロップと、「参照」で使われる非表示のinputの両方に適用されます。

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // 縮小後のファイルを受け取る
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  ここにドキュメントをドロップ
</div>

直接呼び出す

貼り付け、カメラ、独自のファイル選択UIから受け取るファイルの場合：

JSX

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

ヒント：ファイルは、多くのコードがすでにそうしているように、イベントから読み取ってください（e.target.files または onDrop に渡されるファイル）。それでも元のファイルが届く場合はトラブルシューティングをご覧ください。

前へ仕組み次へ Vue

最終更新日：2026年11月3日 · お問い合わせ：contact@pdfkind.com