Merge pull request #14 from rezkiy37/feature/22998-improve-offline-be…

…haviour
Expensify · Mar 12, 2024 · 85cc36d · 85cc36d
2 parents 12cde1a + 98bd1dc
commit 85cc36d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -53,6 +53,20 @@ function App() {
                         >
                             example_protected.pdf (Password: 123456)
                         </button>
+
+                        <input
+                            className="button"
+                            type="file"
+                            onChange={(event) => {
+                                const uploadedFile = event?.target?.files?.[0];
+
+                                if (!uploadedFile) {
+                                    return;
+                                }
+
+                                setFile(URL.createObjectURL(uploadedFile));
+                            }}
+                        />
                     </div>
                 </>
             )}

diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -42,6 +42,13 @@ module.exports = {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader'],
             },
+            // We are importing this worker as a string by using asset/source otherwise it will default to loading via an HTTPS request later.
+            // This causes issues if we have gone offline before the pdfjs web worker is set up as we won't be able to load it from the server.
+            {
+                // eslint-disable-next-line prefer-regex-literals
+                test: new RegExp('node_modules/pdfjs-dist/legacy/build/pdf.worker.js'),
+                type: 'asset/source',
+            },
         ],
     },
     plugins: [

diff --git a/src/PDFPreviewer.tsx b/src/PDFPreviewer.tsx
@@ -1,3 +1,6 @@
+// @ts-expect-error - This line imports a module from 'pdfjs-dist' package which lacks TypeScript typings.
+// eslint-disable-next-line import/no-extraneous-dependencies
+import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker';
 import React, {memo, useCallback, useLayoutEffect, useRef, useState} from 'react';
 import type {CSSProperties, ReactNode} from 'react';
 import times from 'lodash/times';
@@ -57,8 +60,7 @@ const defaultProps = {
     contentContainerStyle: {},
 };
 
-// @ts-expect-error - It is a recommended step for import worker - https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/README.md#import-worker-recommended
-pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();
+pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(new Blob([pdfWorkerSource], {type: 'text/javascript'}));
 
 function PDFPreviewer({
     file,