React

React 앱에서 react-dropzone을 포함해 업로드 핸들러를 바꾸지 않고 업로드 전에 PDF와 사진의 용량을 줄입니다.

설치할 React 패키지는 없습니다. 스크립트를 한 번 로드하고 속성을 추가하면 됩니다. 도우미가 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>

직접 호출하기

붙여넣기, 카메라, 사용자 정의 선택기에서 받은 파일의 경우:

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