Mobile: Supports attaching multiple files to a note at once (#6831)

packages/app-mobile/components/screens/Note.tsx

@@ -42,6 +42,7 @@ const DocumentPicker = require('react-native-document-picker').default;
 const ImageResizer = require('react-native-image-resizer').default;
 const shared = require('@joplin/lib/components/shared/note-screen-shared.js');
 const ImagePicker = require('react-native-image-picker').default;
+import { ImagePickerResponse } from 'react-native-image-picker';
 import SelectDateTimeDialog from '../SelectDateTimeDialog';
 import ShareExtension from '../../utils/ShareExtension.js';
 import CameraView from '../CameraView';
@@ -727,13 +728,14 @@ class NoteScreenComponent extends BaseScreenComponent {
 		});
 	}
 
-	private async pickDocument() {
+	private async pickDocuments() {
 		try {
-			const result = await DocumentPicker.pick();
+			// the result is an array
+			const result = await DocumentPicker.pickMultiple();
 			return result;
 		} catch (error) {
 			if (DocumentPicker.isCancel(error)) {
-				console.info('pickDocument: user has cancelled');
+				console.info('pickDocuments: user has cancelled');
 				return null;
 			} else {
 				throw error;
@@ -818,16 +820,6 @@ class NoteScreenComponent extends BaseScreenComponent {
 			return;
 		}
 
-		if (pickerResponse.error) {
-			reg.logger().warn('Got error from picker', pickerResponse.error);
-			return;
-		}
-
-		if (pickerResponse.didCancel) {
-			reg.logger().info('User cancelled picker');
-			return;
-		}
-
 		const localFilePath = Platform.select({
 			android: pickerResponse.uri,
 			ios: decodeURI(pickerResponse.uri),
@@ -922,8 +914,22 @@ class NoteScreenComponent extends BaseScreenComponent {
 	}
 
 	private async attachPhoto_onPress() {
-		const response = await this.showImagePicker({ mediaType: 'photo', noData: true });
+		// the selection Limit should be specfied. I think 200 is enough?
-		await this.attachFile(response, 'image');
+		const response: ImagePickerResponse = await this.showImagePicker({ mediaType: 'photo', includeBase64: false, selectionLimit: 200 });
+
+		if (response.errorCode) {
+			reg.logger().warn('Got error from picker', response.errorCode);
+			return;
+		}
+
+		if (response.didCancel) {
+			reg.logger().info('User cancelled picker');
+			return;
+		}
+
+		for (const asset of response.assets) {
+			await this.attachFile(asset, 'image');
+		}
 	}
 
 	private takePhoto_onPress() {
@@ -934,8 +940,6 @@ class NoteScreenComponent extends BaseScreenComponent {
 		void this.attachFile(
 			{
 				uri: data.uri,
-				didCancel: false,
-				error: null,
 				type: 'image/jpg',
 			},
 			'image'
@@ -949,8 +953,10 @@ class NoteScreenComponent extends BaseScreenComponent {
 	}
 
 	private async attachFile_onPress() {
-		const response = await this.pickDocument();
+		const response = await this.pickDocuments();
-		await this.attachFile(response, 'all');
+		for (const asset of response) {
+			await this.attachFile(asset, 'all');
+		}
 	}
 
 	private toggleIsTodo_onPress() {

packages/app-mobile/package.json

@@ -50,7 +50,7 @@
     "react-native-file-viewer": "^2.1.4",
     "react-native-fs": "^2.16.6",
     "react-native-get-random-values": "^1.7.0",
-    "react-native-image-picker": "^2.3.4",
+    "react-native-image-picker": "^4.10.0",
     "react-native-image-resizer": "^1.3.0",
     "react-native-modal-datetime-picker": "^9.0.0",
     "react-native-popup-menu": "^0.15.13",

yarn.lock

@@ -3958,7 +3958,7 @@ __metadata:
     react-native-file-viewer: ^2.1.4
     react-native-fs: ^2.16.6
     react-native-get-random-values: ^1.7.0
-    react-native-image-picker: ^2.3.4
+    react-native-image-picker: ^4.10.0
     react-native-image-resizer: ^1.3.0
     react-native-modal-datetime-picker: ^9.0.0
     react-native-popup-menu: ^0.15.13
@@ -27877,10 +27877,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-image-picker@npm:^2.3.4":
+"react-native-image-picker@npm:^4.10.0":
-  version: 2.3.4
+  version: 4.10.0
-  resolution: "react-native-image-picker@npm:2.3.4"
+  resolution: "react-native-image-picker@npm:4.10.0"
-  checksum: 6a9a8827a710177aeb1d7a190e0973107bc6b8a976f076c6da20d71b3f78df9d1636aa1280ba870050cfe6f12e246f1cf9d505a45cd10cdf358630db9ecd2863
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 778c1ab980efabbd11a0fd04b6f33dd6288b455696b055b72c9089a3bf953957019e26b4da9a193ab38aeefcf160067fe784a02c69a84510fe1ee6d850f177bf
   languageName: node
   linkType: hard