Add document picking support to mobile

ios/Podfile.lock

@@ -312,6 +312,8 @@ PODS:
     - react-native-config/App (= 1.3.3)
   - react-native-config/App (1.3.3):
     - React
+  - react-native-document-picker (4.0.0):
+    - React-Core
   - react-native-image-picker (2.3.3):
     - React
   - react-native-netinfo (5.9.6):
@@ -437,6 +439,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-config (from `../node_modules/react-native-config`)
+  - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
@@ -517,6 +520,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   react-native-config:
     :path: "../node_modules/react-native-config"
+  react-native-document-picker:
+    :path: "../node_modules/react-native-document-picker"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
   react-native-netinfo:
@@ -597,6 +602,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: b56c03e61c0dd5f5801255f2160a815f4a53d451
   React-jsinspector: 8e68ffbfe23880d3ee9bafa8be2777f60b25cbe2
   react-native-config: 9a061347e0136fdb32d43a34d60999297d672361
+  react-native-document-picker: b3e78a8f7fef98b5cb069f20fc35797d55e68e28
   react-native-image-picker: a6c3d644751a388b0fc8b56822ff7cbd398a3008
   react-native-netinfo: d2c312fa4b151214e1d5c8456ddb5f28ff24a576
   react-native-safe-area-context: 0ed9288ed4409beabb0817b54efc047286fc84da

package.json

@@ -25,6 +25,9 @@
     "@react-native-community/async-storage": "^1.11.0",
     "@react-native-community/netinfo": "^5.9.6",
     "@react-native-community/push-notification-ios": "^1.5.0",
+    "@react-native-firebase/analytics": "^7.6.7",
+    "@react-native-firebase/app": "^8.4.5",
+    "@react-native-firebase/crashlytics": "^8.4.9",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "dotenv": "^8.2.0",
     "electron-context-menu": "^2.3.0",
@@ -45,9 +48,7 @@
     "react-dom": "^16.13.1",
     "react-native": "0.63.3",
     "react-native-config": "^1.3.3",
-    "@react-native-firebase/analytics": "^7.6.7",
-    "@react-native-firebase/app": "^8.4.5",
-    "@react-native-firebase/crashlytics": "^8.4.9",
+    "react-native-document-picker": "^4.0.0",
     "react-native-image-picker": "^2.3.3",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-render-html": "^4.2.3",

src/libs/ImagePicker/index.js → src/libs/AttachmentPicker/index.js

@@ -1,7 +1,7 @@
 // Implementation adapted from https://github.com/QuantumBA/foqum-react-native-document-picker/blob/master/web/index.js
 
-const ImagePicker = {
-    showImagePicker(options, callback) {
+const AttachmentPicker = {
+    show(callback) {
         const input = document.createElement('input');
         input.type = 'file';
         input.onchange = function () {
@@ -16,7 +16,7 @@ const ImagePicker = {
 
     /**
      *
-     * The data returned from `showImagePicker` is different on web and mobile, so use this function to ensure the
+     * The data returned from `show` is different on web and mobile, so use this function to ensure the
      * data we send to the xhr will be handled properly by the API. On web, we just want to send the file data returned
      * from the input.
      *
@@ -28,4 +28,4 @@ const ImagePicker = {
     },
 };
 
-export default ImagePicker;
+export default AttachmentPicker;

src/libs/AttachmentPicker/index.native.js

@@ -0,0 +1,75 @@
+/**
+ * The react native image/document pickers work for iOS/Android, but we want to wrap them both within AttachmentPicker
+ */
+import RNImagePicker from 'react-native-image-picker';
+import RNDocumentPicker from 'react-native-document-picker';
+
+/**
+ * See https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Reference.md#options
+ * for ImagePicker configuration options
+ */
+const imagePickerOptions = {
+    title: 'Select an Attachment',
+    takePhotoButtonTitle: 'Take Photo',
+    chooseFromLibraryButtonTitle: 'Choose from Gallery',
+    customButtons: [{name: 'Document', title: 'Choose Document'}],
+    storageOptions: {
+        skipBackup: true,
+    },
+};
+
+/**
+ * See https://github.com/rnmods/react-native-document-picker#options for DocumentPicker configuration options
+ */
+const documentPickerOptions = {
+    type: [RNDocumentPicker.types.allFiles],
+};
+
+const AttachmentPicker = {
+    /**
+     * Launch the DocumentPicker. Results are in same format as ImagePicker, so we can pass the repsonse to the
+     * callback as is.
+     *
+     * @param {Object} callback
+     */
+    showDocumentPicker(callback) {
+        RNDocumentPicker.pick(documentPickerOptions).then((results) => {
+            callback(results);
+        }).catch((error) => {
+            if (!RNDocumentPicker.isCancel(error)) {
+                throw error;
+            }
+        });
+    },
+
+    /**
+     * Launch the AttachmentPicker. We display the ImagePicker first, as the document option is displayed as a
+     * custom ImagePicker list item.
+     *
+     * @param {Object} callback
+     */
+    show(callback) {
+        RNImagePicker.showImagePicker(imagePickerOptions, (response) => {
+            if (response.error) {
+                console.error(`Error during attachment selection: ${response.error}`);
+            } else if (response.customButton) {
+                this.showDocumentPicker(callback);
+            } else if (!response.didCancel) {
+                callback(response);
+            }
+        });
+    },
+
+    /*
+    * The data returned from `show` is different on web and mobile, so use this function to ensure the data we
+    * send to the xhr will be handled properly.
+    */
+    getDataForUpload(fileData) {
+        return {
+            name: fileData.fileName || 'chat_attachment',
+            type: fileData.type,
+            uri: fileData.uri,
+        };
+    }
+};
+export default AttachmentPicker;

src/pages/home/report/ReportActionCompose.js

@@ -7,7 +7,7 @@ import TextInputFocusable from '../../../components/TextInputFocusable';
 import sendIcon from '../../../../assets/images/icon-send.png';
 import IONKEYS from '../../../IONKEYS';
 import paperClipIcon from '../../../../assets/images/icon-paper-clip.png';
-import ImagePicker from '../../../libs/ImagePicker';
+import AttachmentPicker from '../../../libs/AttachmentPicker';
 import withIon from '../../../components/withIon';
 import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs/actions/Report';
 
@@ -123,27 +123,10 @@ class ReportActionCompose extends React.Component {
     showAttachmentPicker(e) {
         e.preventDefault();
 
-        /**
-         * See https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Reference.md#options
-         * for option definitions
-         */
-        const options = {
-            storageOptions: {
-                skipBackup: true,
-            },
-        };
-
-        ImagePicker.showImagePicker(options, (response) => {
-            if (response.didCancel) {
-                return;
-            }
-
-            if (response.error) {
-                console.error(`Error occurred picking image: ${response.error}`);
-                return;
-            }
-
-            addAction(this.props.reportID, '', ImagePicker.getDataForUpload(response));
+        AttachmentPicker.show((response) => {
+            console.debug(`Attachment selected: ${response.uri}, ${response.type}, ${response.name}, ${response.size}`);
+
+            addAction(this.props.reportID, '', AttachmentPicker.getDataForUpload(response));
             this.textInput.focus();
         });
     }