Enhance loading options and passing options

src/Document.jsx

@@ -25,35 +25,13 @@ import {
   isCancelException,
   isDataURI,
   isFile,
+  loadFromFile,
   makeCancellable,
   warnOnDev,
 } from './shared/utils';
 
 import { eventsProps, isClassName } from './shared/propTypes';
 
-const loadFromFile = file => new Promise((resolve, reject) => {
-  const reader = new FileReader();
-
-  reader.onload = () => resolve(new Uint8Array(reader.result));
-  reader.onerror = (event) => {
-    switch (event.target.error.code) {
-      case event.target.error.NOT_FOUND_ERR:
-        return reject(new Error('Error while reading a file: File not found.'));
-      case event.target.error.NOT_READABLE_ERR:
-        return reject(new Error('Error while reading a file: File not readable.'));
-      case event.target.error.SECURITY_ERR:
-        return reject(new Error('Error while reading a file: Security error.'));
-      case event.target.error.ABORT_ERR:
-        return reject(new Error('Error while reading a file: Aborted.'));
-      default:
-        return reject(new Error('Error while reading a file.'));
-    }
-  };
-  reader.readAsArrayBuffer(file);
-
-  return null;
-});
-
 export default class Document extends PureComponent {
   state = {
     pdf: null,
@@ -118,6 +96,7 @@ export default class Document extends PureComponent {
       if (!prevState.pdf) {
         return null;
       }
+
       return { pdf: null };
     });
 

src/shared/utils.js

@@ -151,3 +151,26 @@ export const isCancelException = error => (
   error.name === 'RenderingCancelledException'
   || error.name === 'PromiseCancelledException'
 );
+
+export const loadFromFile = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+
+  reader.onload = () => resolve(new Uint8Array(reader.result));
+  reader.onerror = (event) => {
+    switch (event.target.error.code) {
+      case event.target.error.NOT_FOUND_ERR:
+        return reject(new Error('Error while reading a file: File not found.'));
+      case event.target.error.NOT_READABLE_ERR:
+        return reject(new Error('Error while reading a file: File not readable.'));
+      case event.target.error.SECURITY_ERR:
+        return reject(new Error('Error while reading a file: Security error.'));
+      case event.target.error.ABORT_ERR:
+        return reject(new Error('Error while reading a file: Aborted.'));
+      default:
+        return reject(new Error('Error while reading a file.'));
+    }
+  };
+  reader.readAsArrayBuffer(file);
+
+  return null;
+});

test/LoadingOptions.jsx

@@ -3,38 +3,15 @@ import PropTypes from 'prop-types';
 
 import samplePDF from './test.pdf';
 
+import { isFile } from './shared/propTypes';
+
 export default class LoadingOptions extends PureComponent {
   onFileChange = (event) => {
     const { setFile } = this.props;
 
     setFile(event.target.files[0]);
   }
 
-  onFileUintChange = (event) => {
-    const { setFile } = this.props;
-
-    const reader = new FileReader();
-
-    reader.onloadend = () => {
-      setFile(reader.result);
-    };
-
-    reader.readAsArrayBuffer(event.target.files[0]);
-  }
-
-  onFileDataURLChange = (event) => {
-    const { setFile } = this.props;
-
-    const reader = new FileReader();
-
-    reader.onloadend = () => {
-      console.log(reader.result);
-      setFile(reader.result);
-    };
-
-    reader.readAsDataURL(event.target.files[0]);
-  }
-
   onURLChange = (event) => {
     const { setFile } = this.props;
 
@@ -83,25 +60,14 @@ export default class LoadingOptions extends PureComponent {
     }), 1000);
   }
 
-  onPassMethodChange = (event) => {
-    const { setState } = this.props;
-
-    const passMethod = event.target.value;
-
-    setState({ passMethod });
-  }
-
   unloadFile = () => {
     const { setFile } = this.props;
 
     setFile(null);
   }
 
   render() {
-    const {
-      file,
-      passMethod,
-    } = this.props;
+    const { file } = this.props;
 
     return (
       <fieldset id="load">
@@ -118,24 +84,6 @@ export default class LoadingOptions extends PureComponent {
           onChange={this.onFileChange}
         />
 
-        <label htmlFor="fileUint8Array">
-          Load from file to Uint8Array:
-        </label>
-        <input
-          id="fileUint8Array"
-          type="file"
-          onChange={this.onFileUintChange}
-        />
-
-        <label htmlFor="fileUint8Array">
-          Load from file to Data URL:
-        </label>
-        <input
-          id="fileDataURL"
-          type="file"
-          onChange={this.onFileDataURLChange}
-        />
-
         <form onSubmit={this.onURLChange}>
           <label htmlFor="url">
             Load from URL:
@@ -180,46 +128,6 @@ export default class LoadingOptions extends PureComponent {
           </button>
         </div>
 
-        <div>
-          <input
-            checked={passMethod === 'normal'}
-            id="passNormal"
-            name="passMethod"
-            onChange={this.onPassMethodChange}
-            type="radio"
-            value="normal"
-          />
-          <label htmlFor="passNormal">
-            Auto
-          </label>
-        </div>
-        <div>
-          <input
-            checked={passMethod === 'object'}
-            id="passObject"
-            name="passMethod"
-            onChange={this.onPassMethodChange}
-            type="radio"
-            value="object"
-          />
-          <label htmlFor="passObject">
-            Pass as an object (URLs and imports only)
-          </label>
-        </div>
-        <div>
-          <input
-            checked={passMethod === 'blob'}
-            id="passBlob"
-            name="passMethod"
-            onChange={this.onPassMethodChange}
-            type="radio"
-            value="blob"
-          />
-          <label htmlFor="passBlob">
-            Pass as a Blob (URLs and imports only)
-          </label>
-        </div>
-
         <div>
           <button
             type="button"
@@ -234,27 +142,8 @@ export default class LoadingOptions extends PureComponent {
   }
 }
 
-const fileTypes = [
-  PropTypes.string,
-  PropTypes.instanceOf(ArrayBuffer),
-  PropTypes.shape({
-    data: PropTypes.object,
-    httpHeaders: PropTypes.object,
-    range: PropTypes.object,
-    url: PropTypes.string,
-    withCredentials: PropTypes.bool,
-  }),
-];
-if (typeof File !== 'undefined') {
-  fileTypes.push(PropTypes.instanceOf(File));
-}
-if (typeof Blob !== 'undefined') {
-  fileTypes.push(PropTypes.instanceOf(Blob));
-}
-
 LoadingOptions.propTypes = {
-  file: PropTypes.oneOfType(fileTypes),
-  passMethod: PropTypes.oneOf(['normal', 'object', 'blob']),
+  file: isFile,
   setFile: PropTypes.func.isRequired,
   setState: PropTypes.func.isRequired,
 };

test/PassingOptions.jsx

@@ -0,0 +1,128 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { isDataURI } from '../src/shared/utils';
+import { isFile } from './shared/propTypes';
+
+export default class PassingOptions extends PureComponent {
+  get sourceType() {
+    const { file } = this.props;
+
+    if (file === null) {
+      return 'null';
+    }
+
+    if (typeof file === 'string') {
+      if (isDataURI(file)) {
+        return 'data URI';
+      }
+
+      return 'string';
+    }
+
+    if (typeof file === 'object') {
+      return file.constructor.name;
+    }
+
+    return typeof file;
+  }
+
+  onPassMethodChange = (event) => {
+    const { setPassMethod } = this.props;
+
+    const passMethod = event.target.value;
+
+    setPassMethod(passMethod === 'null' ? null : passMethod);
+  }
+
+  render() {
+    const { passMethod } = this.props;
+
+    return (
+      <fieldset id="load">
+        <legend htmlFor="load">
+          Passing options
+        </legend>
+
+        <div>
+          <input
+            checked={passMethod === null}
+            id="passNormal"
+            name="passMethod"
+            onChange={this.onPassMethodChange}
+            type="radio"
+            value="null"
+          />
+          <label htmlFor="passNormal">
+            Pass as is (
+            {this.sourceType}
+            )
+          </label>
+        </div>
+        <div>
+          <input
+            checked={passMethod === 'object'}
+            id="passObject"
+            name="passMethod"
+            onChange={this.onPassMethodChange}
+            type="radio"
+            value="object"
+          />
+          <label htmlFor="passObject">
+            Pass as a parameter object
+          </label>
+        </div>
+        <div>
+          <input
+            checked={passMethod === 'string'}
+            id="passString"
+            name="passMethod"
+            onChange={this.onPassMethodChange}
+            type="radio"
+            value="string"
+          />
+          <label htmlFor="passString">
+            Pass as a string/data URI
+          </label>
+        </div>
+        <div>
+          <input
+            checked={passMethod === 'blob'}
+            id="passBlob"
+            name="passMethod"
+            onChange={this.onPassMethodChange}
+            type="radio"
+            value="blob"
+          />
+          <label htmlFor="passBlob">
+            Pass as a File/Blob
+          </label>
+        </div>
+      </fieldset>
+    );
+  }
+}
+
+const fileTypes = [
+  PropTypes.string,
+  PropTypes.instanceOf(ArrayBuffer),
+  PropTypes.shape({
+    data: PropTypes.object,
+    httpHeaders: PropTypes.object,
+    range: PropTypes.object,
+    url: PropTypes.string,
+    withCredentials: PropTypes.bool,
+  }),
+];
+if (typeof File !== 'undefined') {
+  fileTypes.push(PropTypes.instanceOf(File));
+}
+if (typeof Blob !== 'undefined') {
+  fileTypes.push(PropTypes.instanceOf(Blob));
+}
+
+PassingOptions.propTypes = {
+  file: isFile,
+  passMethod: PropTypes.oneOf(['blob', 'normal', 'object', 'string']),
+  setPassMethod: PropTypes.func.isRequired,
+};