diff --git a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx index 281e6c352..cf63d20a7 100644 --- a/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx +++ b/apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx @@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ import React, { useState } from "react"; -import { Image, TouchableOpacity, View } from "react-native"; +import { Image, ScrollView, TouchableOpacity, View } from "react-native"; import { ImagePickerResponse } from "react-native-image-picker"; import { useThemeColors } from "../../../../../../packages/theme/dist"; import { presentSheet } from "../../../services/event-manager"; @@ -38,10 +38,6 @@ export default function AttachImage({ }) { const { colors } = useThemeColors(); const [compress, setCompress] = useState(true); - const image = response.assets?.[0]; - const width = image?.width || 0; - const height = image?.height || 0; - const ratio = width / height; return ( - {image ? ( - - - - ) : null} + + + Attaching {response.assets?.length} image(s): + + + {response.assets?.map((item) => ( + + + + ))} + + { diff --git a/apps/mobile/app/screens/editor/tiptap/picker.js b/apps/mobile/app/screens/editor/tiptap/picker.js index 92d83e15f..cdc9d498f 100644 --- a/apps/mobile/app/screens/editor/tiptap/picker.js +++ b/apps/mobile/app/screens/editor/tiptap/picker.js @@ -169,7 +169,7 @@ const gallery = async (options) => { { includeBase64: true, mediaType: "photo", - selectionLimit: 1 + selectionLimit: 10 }, (response) => handleImageResponse(response, options) ); @@ -218,60 +218,62 @@ const handleImageResponse = async (response, options) => { return; } - let image = response.assets[0]; + const result = await AttachImage.present(response); - const compress = await AttachImage.present(response); + if (!result) return; + const compress = result.compress; - const isPng = /(png)/g.test(image.type); - const isJpeg = /(jpeg|jpg)/g.test(image.type); + for (let image of response.assets) { + const isPng = /(png)/g.test(image.type); + const isJpeg = /(jpeg|jpg)/g.test(image.type); - if (compress && (isPng || isJpeg)) { - image.uri = await compressToFile( - Platform.OS === "ios" ? "file://" + image.uri : image.uri, - isPng ? "PNG" : "JPEG" - ); - const stat = await RNFetchBlob.fs.stat(image.uri.replace("file://", "")); - image.fileSize = stat.size; - } - - if (image.fileSize > IMAGE_SIZE_LIMIT) { - ToastManager.show({ - title: "File too large", - message: "The maximum allowed size per image is 50 MB", - type: "error" - }); - return; - } - let b64 = `data:${image.type};base64, ` + image.base64; - const uri = decodeURI(image.uri); - const hash = await Sodium.hashFile({ - uri: uri, - type: "url" - }); - - let fileName = image.originalFileName || image.fileName; - - editorController.current?.commands.insertImage({ - hash: hash, - mime: image.type, - title: fileName, - dataurl: b64, - size: image.fileSize, - filename: fileName - }); - - if (!(await attachFile(uri, hash, image.type, fileName, options))) return; - - if (isPng || isJpeg) { - b64 = - `data:${image.type};base64, ` + - (await compressToBase64( + if (compress && (isPng || isJpeg)) { + image.uri = await compressToFile( Platform.OS === "ios" ? "file://" + image.uri : image.uri, isPng ? "PNG" : "JPEG" - )); - } + ); + const stat = await RNFetchBlob.fs.stat(image.uri.replace("file://", "")); + image.fileSize = stat.size; + } - if (Platform.OS === "ios") await RNFetchBlob.fs.unlink(uri); + if (image.fileSize > IMAGE_SIZE_LIMIT) { + ToastEvent.show({ + title: "File too large", + message: "The maximum allowed size per image is 50 MB", + type: "error" + }); + return; + } + let b64 = `data:${image.type};base64, ` + image.base64; + const uri = decodeURI(image.uri); + const hash = await Sodium.hashFile({ + uri: uri, + type: "url" + }); + + let fileName = image.originalFileName || image.fileName; + if (!(await attachFile(uri, hash, image.type, fileName, options))) return; + + if (isPng || isJpeg) { + b64 = + `data:${image.type};base64, ` + + (await compressToBase64( + Platform.OS === "ios" ? "file://" + image.uri : image.uri, + isPng ? "PNG" : "JPEG" + )); + } + + if (Platform.OS === "ios") await RNFetchBlob.fs.unlink(uri); + + editorController.current?.commands.insertImage({ + hash: hash, + mime: image.type, + title: fileName, + dataurl: b64, + size: image.fileSize, + filename: fileName + }); + } }; export async function attachFile(uri, hash, type, filename, options) {