pdftron-document-search's Introduction

PDFTron Document Search

PDFTron Document Search demonstrates building an application where users can search across multiple documents using:

PDFTron PDF SDK for text extraction and viewing of the documents
Firebase for storage
Algolia for searching

Watch a quick video that walks you throught the app. I also put together a blog to help you get started.

This repo is designed to help to get started in creating your own document searching workflow.

Install

npm install

Algolia Configuration

This application uses Algolia to search documents. However, be aware that Algolia is not the only third-party search provider. Consider alternatives such as ElasticSearch.

To get started with this sample, please register a new app with Algolia.

Create a new index called document_search:

After you configured your app, create .env file in the root of the directory and place the following:

REACT_APP_ALGOLIA_APP_ID=your_key_goes_here
REACT_APP_ALGOLIA_API_KEY=your_key_goes_here
REACT_APP_ALGOLIA_SEARCH_KEY=your_key_goes_here
REACT_APP_ALGOLIA_INDEX_NAME=document_search

The above information can be found under API Keys in your Algolia Dashboard.

Firebase Configuration

This application uses Firebase to store documents. You can use any other backend of your choice. However, to get started with this sample, please register a new app with Firebase.

Make sure you create a storage bucket, and enable authentication for email and Google.

After you have registered an app, create .env file in the root of the directory and place the following:

REACT_APP_API_KEY=your_key_goes_here
REACT_APP_MESSAGING_SENDER_ID=your_key_goes_here
REACT_APP_APP_ID=your_key_goes_here
REACT_APP_AUTH_DOMAIN=your_domain_goes_here
REACT_APP_DATABASE_URL=your_database_go_here
REACT_APP_PROJECT_ID=your_project_id
REACT_APP_STORAGE_BUCKET=your_storage_bucket

The above information can be found under settings of your Firebase app.

Change Firestore Database rules to:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Change Storage rules to:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Now you can run the application and start uploading your documents.

CORS

You will need to set up CORS on your Firestore to allow WebViewer to access files stored in your bucket. I created a CORS file called cors.json:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

And then used gsutil to update it: https://cloud.google.com/storage/docs/configuring-cors

Run

npm start

Project structure

src/
  app/             - Redux Store Configuration
  components/      - React components
    Navigate/            - Component responsible for navigating between different screens
    PasswordReset/       - Reset password
    Profile/             - Profile information and a sign out button
    Search/              - Search previously uploaded documents
    SignIn/              - Sign in
    SignUp/              - Sign up
    Upload               - Upload a document, which will be indexed for searching and saved to file storage.
    View/                - View document with the search result highlighted
  App              - Configuration for navigation, authentication
  index            - Entry point and configuration for React-Redux
  firebase/        - Firebase configuration for authentication, updating documents, storing PDFs
  tools/           - Helper function to copy over PDFTron dependencies into /public on post-install

API documentation

See API documentation.

Contributing

See contributing.

License

See license.

pdftron-document-search's People

Contributors

Stargazers

Watchers

pdftron-document-search's Issues

Include a page number for rendering of the search results

It would be nice to see page number associated with the index

App Does Not Proceed Past Sign-In Page

@andreysaf I followed your tutorial exactly, with the only differences being (1) I enabled both the Firestore Database and the Realtime Database in Firebase (I believe these are new sections in the Build menu that did not exist when you wrote the tutorial) and (2) I added all the variables you listed to one .env file, since I couldn't create two files with the same name in the root of the directory. I am able to start the app with npm start, and then I am able to register an email and password (they show in Firebase under Authentication), but when I click "Sign in" nothing happens. Do you know what may be the issue? I primarily work in Python, so I may have missed something that needs to be done in Node.js to make the app function. Thank you for any help you can provide!

Terminal output after npm start:

Compiled with warnings.

./src/components/Search/Search.js
  Line 12:56:  'Image' is defined but never used  no-unused-vars

./src/components/Upload/Upload.js
  Line 1:17:  'useState' is defined but never used                                                                                  no-unused-vars
  Line 2:23:  'useDispatch' is defined but never used                                                                               no-unused-vars
  Line 3:10:  'Link' is defined but never used                                                                                      no-unused-vars
  Line 67:6:  React Hook useEffect has missing dependencies: 'index' and 'uid'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

./src/components/Navigate/Navigate.js
  Line 2:10:  'Router' is defined but never used  no-unused-vars

./src/App.js
  Line 32:6:  React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array. Outer scope values like 'auth' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps

./src/components/View/View.js
  Line 62:6:  React Hook useEffect has missing dependencies: 'docRef', 'pageNumber', and 'searchTerm'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Nice if it worked !

It would be nice if it worked but the upload button does not work does not load the pdf and therefore does not search for anything. Even the login with registration does not work if you enter your email and password and user and create it. It would be nice if the pdf read them from a remote folder on the server not only on fiebase.

Recommend Projects

pdftron / pdftron-document-search Goto Github PK