Show a warning message when a user uploads a file bigger than 100mb

index.html

@@ -44,6 +44,26 @@ <h2>File Info</h2>
             pages 2 & 3 of your PDF document. Evens always on the left, odds always on the
             right.</span
           >
+          <span class="row warning" id="memwarning" style="display: none">
+            <h3>Warning: Large file uploaded</h3>
+            Because of the way Javascript works, large files may cause the browser to kill the
+            process because it took up too much memory. This usually won't produce any visible
+            errors, and instead will cause the generation process to simply fail with no output. If
+            this happens, there's a few things you can try that may result in successful generation:
+            <ul>
+              <li>
+                If you've selected both aggregate and signature files for output, switch to just
+                generating signatures
+              </li>
+              <li>
+                Close all other open browser tabs and windows, so no other pages are using memory
+              </li>
+              <li>Try on a different computer with more RAM</li>
+            </ul>
+
+            If none of these steps work, you may unfortunately have to pre-split your file into
+            smaller sections to use this tool.
+          </span>
           <span class="row"
             ><label for="print_file">Generated Files</label>
             <select name="print_file" id="print_file">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bookbinder",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "An app to rearrange PDF pages for printing for bookbinding",
   "type": "module",
   "scripts": {

public/styles.css

@@ -182,3 +182,13 @@ button {
   width: 100%;
   justify-content: space-between;
 }
+
+.warning {
+  margin-bottom: 1em;
+  border: #ffc107 5px solid;
+  padding: 0.5em;
+}
+
+.warning h3 {
+  margin: 0.5em 0;
+}

src/constants.js

@@ -177,3 +177,6 @@ export const PERFECTBOUND_LAYOUTS = {
     rotate: [12, 9, 6, 7, 23, 22, 25, 28, 20, 17, 30, 31, 15, 14, 1, 4],
   },
 };
+
+/** filesize at which we show memory warning, in bytes (100 megabytes) */
+export const MEM_WARN_LIMIT = 100 * 100000;

src/utils/changeHandlers.js

@@ -3,7 +3,11 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import { saveForm, updateRenderedForm } from './formUtils';
-import { updatePaperSelectOptionsUnits, updateAddOrRemoveCustomPaperOption } from './renderUtils';
+import {
+  updatePaperSelectOptionsUnits,
+  updateAddOrRemoveCustomPaperOption,
+  memoryWarning,
+} from './renderUtils';
 
 export function handleInputChange(book, bookbinderForm) {
   const formData = new FormData(bookbinderForm);
@@ -19,7 +23,11 @@ export function handleInputChange(book, bookbinderForm) {
 export function handleFileChange(e, book) {
   const fileList = e.target.files;
   if (fileList.length > 0) {
-    const updated = book.openpdf(fileList[0]);
+    const file = fileList[0];
+    const updated = book.openpdf(file);
     updated.then(() => updateRenderedForm(book));
+
+    // Determine if we need to show or hide the large file warning
+    memoryWarning(file.size);
   }
 }

src/utils/renderUtils.js

@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import { PAGE_SIZES } from '../constants';
+import { MEM_WARN_LIMIT, PAGE_SIZES } from '../constants';
 
 export function renderPageCount(book) {
   const pageCount = document.getElementById('page_count');
@@ -251,3 +251,15 @@ export function renderFormFromSettings(configuration) {
     example.style.display = example.id === selectedValue ? 'block' : 'none';
   });
 }
+
+/**
+ * Shows or hides the large file warning info
+ */
+export function memoryWarning(filesize) {
+  const warningDiv = document.getElementById('memwarning');
+  if (filesize > MEM_WARN_LIMIT) {
+    warningDiv.style.display = 'block';
+  } else {
+    warningDiv.style.display = 'none';
+  }
+}