react-advanced-pdf-upload v3.1.1

react-advanced-pdf-upload

This library provides an easy-to-use React component for interactively creating a single PDF file out of several uploaded ones, with the possibility to concatenate, reorder, remove and rotate pages. It has been designed to be as customizable as possible. Additionally, it can work with PDFs with different page dimensions without any issues.

How it works

Most importantly, this library simply provides a React component for the frontend, but no code to actually work with PDFs. All actual functionality for rendering and building PDFs belongs to the https://github.com/sigalor/react-advanced-pdf-upload-backend component, i.e. runs on a backend server. This is mostly to keep this library's dependencies at a minimum.

However, it is certainly possible to do everything in the frontend, as the implementation of the two callbacks dealing with PDFs (loadPreviews and buildPdf, see below) is completely up to the user of this library.

The example in the following section assumes that the backend server from https://github.com/sigalor/react-advanced-pdf-upload-backend is running at http://localhost:3001.

Getting started

First, run the following to install this library. Make sure that this library's peer dependencies are installed.

npm install react-advanced-pdf-upload

After this, the most minimal usage of the AdvancedPdfUpload component looks like this:

import React, { useRef, useState } from 'react';
import AdvancedPdfUpload from 'react-advanced-pdf-upload';

export default () => {
  const finalizeButtonRef = useRef(null);
  const [finalizeButtonLoading, setFinalizeButtonLoading] = useState(false);
  const [finalizeButtonDisabled, setFinalizeButtonDisabled] = useState(false);

  return (
    <>
      <AdvancedPdfUpload
        components={{
          dropzonePlaceholder: <p>Drag and drop PDF files here or click to select files.</p>,
          loading: <p>Loading...</p>,
          pageNumber: ({ n }) => <i>{n}</i>,
        }}
        finalizeButton={{
          ref: finalizeButtonRef,
          setLoading: setFinalizeButtonLoading,
          setDisabled: setFinalizeButtonDisabled,
        }}
        loadPreviews={async data => {
          const res = await fetch('http://localhost:3001/render-pdf', {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
          }).catch(e => console.error(e));

          if (res && res.status >= 200 && res.status < 299) {
            return await res.json();
          } else {
            console.error(res);
          }
        }}
        buildPdf={async data => {
          const res = await fetch('http://localhost:3001/build-pdf', {
            method: 'POST',
            headers: {
              Accept: 'application/pdf',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
          }).catch(e => console.error(e));

          if (res && res.status >= 200 && res.status < 299) {
            // do something with the finalized PDF file, e.g. let the user download it
            // the proposed new filename can be found in `data.name`
            return 'reset';
          } else {
            console.error(res);
            return 'resetLoading';
          }
        }}
      />
      <button
        ref={finalizeButtonRef}
        disabled={finalizeButtonLoading || finalizeButtonDisabled}
        style={{ marginTop: '0.5rem' }}
      >
        {finalizeButtonLoading ? 'Loading...' : 'Finalize'}
      </button>
    </>
  );
};

This code renders something like the following:

You can easily upload PDF files in the upper dropzone (provided by react-dropzone), then they appear at the bottom:

In the bottom area, you can easily drag-and-drop the pages around and remove or rotate pages. Once you upload more PDF files, they are appended to the back of the list of pages. When you click "Finalize", the final PDF is generated using the buildPdf callback.

Documentation

The AdvancedPdfUpload component expects the following parameters, which have been designed for maximum customizability:

License

MIT