Uploading a document - React

You can use the <PdfUploader> to upload documents to your collection. In order to use the uploader you need a <PdfApplication> that manages the session. The uploaded document is stored in and available via the <PdfDocument>.

You must have a <PdfAppliction> and <PdfDocument> element in order to use the <PdfUploader>. Optionally you can have a <PdfPages> element to display the document. After you've uploaded a document it will be automatically display in the <PdfPages>.

<PdfApplication publickey={publickey} privatekey={privatekey} />
<PdfDocument />
<PdfUploader />
<PdfPages pageMode={PageMode.Single} />

Screenshot

Code

src/App.tsx

import {
  PageMode,
  PdfApplication,
  PdfDocument,
  PdfPages,
  PdfUploader,
  defineCustomElements,
} from "@tallcomponents/unopdf-react";

defineCustomElements();

// Note: this example uses Vite and retrieves the keys from the environment.
// This should not be used in production.
// See the authentication section in the usage guide for more information.

const publickey = import.meta.env.VITE_PUBLIC_KEY;
const privatekey = import.meta.env.VITE_PRIVATE_KEY;

function App() {
  return (
    <>
      <h1>UnoPdf Example: Upload Document Interactively in React</h1>

      <PdfApplication publickey={publickey} privatekey={privatekey} />
      <PdfDocument />
      <PdfUploader />
      <PdfPages pageMode={PageMode.Multi} />
    </>
  );
}

export default App;

Running the example

• Download the react - Uploading a document project
• Unzip the file to a directory react-upload.
  MacOS

  unzip react-upload.zip -d react-upload

• Open a terminal and go to that directory

  cd react-upload

• Install dependencies
  npm

  npm install

  yarn

  yarn

• Start the project
  npm

  npm run start

  yarn

  yarn start