mobile: finalize image upload

apps/mobile/app/common/filesystem/compress.js

@@ -16,46 +16,63 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { Dimensions, Platform } from "react-native";
+import { Dimensions, Image, Platform } from "react-native";
 import ImageResizer from "@bam.tech/react-native-image-resizer";
 import RNFetchBlob from "react-native-blob-util";
+
+console.log("hello world");
 /**
  * Scale down & compress images to screen width
  * for loading in editor.
  * @returns
  */
 export async function compressToBase64(path, type) {
-  const { width, scale } = Dimensions.get("window");
-  const response = await ImageResizer.createResizedImage(
-    path,
-    width * scale,
-    9999,
-    type,
-    80,
-    0,
-    undefined,
-    true,
-    {
-      mode: "contain",
-      onlyScaleDown: true
-    }
-  );
-  const base64 = await RNFetchBlob.fs.readFile(
-    Platform.OS === "ios" ? response.uri?.replace("file://", "") : response.uri,
-    "base64"
-  );
-  RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
-  RNFetchBlob.fs.unlink(response.uri.replace("file://", "")).catch(console.log);
-  return base64;
+  const { width: screenWidth, scale } = Dimensions.get("window");
+  console.log("COMPRESSING TO BASE64...");
+  return new Promise((resolve) => {
+    console.log(path, "image path...");
+
+    Image.getSize(path, async (width) => {
+      console.log("image width", width);
+
+      const response = await ImageResizer.createResizedImage(
+        path,
+        screenWidth * scale,
+        99999,
+        type,
+        width <= 1920 ? 100 : 90,
+        0,
+        undefined,
+        true,
+        {
+          mode: "contain",
+          onlyScaleDown: true
+        }
+      );
+
+      const base64 = await RNFetchBlob.fs.readFile(
+        Platform.OS === "ios"
+          ? response.uri?.replace("file://", "")
+          : response.uri,
+        "base64"
+      );
+      RNFetchBlob.fs.unlink(path.replace("file://", "")).catch(console.log);
+      RNFetchBlob.fs
+        .unlink(response.uri.replace("file://", ""))
+        .catch(console.log);
+
+      resolve(base64);
+    });
+  });
 }
 
 export async function compressToFile(path, type) {
   const response = await ImageResizer.createResizedImage(
     path,
-    1080,
-    9999,
+    1920,
+    99999,
     type,
-    85,
+    80,
     0,
     undefined,
     true,

apps/mobile/app/common/filesystem/io.js

@@ -17,13 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
+import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
-import { cacheDir, cacheDirOld, getRandomId } from "./utils";
-import { db } from "../database";
-import { compressToBase64 } from "./compress";
 import { IOS_APPGROUPID } from "../../utils/constants";
+import { db } from "../database";
+import { cacheDir, cacheDirOld, getRandomId } from "./utils";
 
 export async function readEncrypted(filename, key, cipherData) {
   await migrateFilesFromCache();
@@ -36,8 +35,6 @@ export async function readEncrypted(filename, key, cipherData) {
     }
 
     const attachment = await db.attachments.attachment(filename);
-    const isPng = /(png)/g.test(attachment?.mimeType || "");
-    const isJpeg = /(jpeg|jpg)/g.test(attachment?.mimeType || "");
     console.log("decrypting....");
     let output = await Sodium.decryptFile(
       key,
@@ -46,20 +43,9 @@ export async function readEncrypted(filename, key, cipherData) {
         hash: filename,
         appGroupId: IOS_APPGROUPID
       },
-      cipherData.outputType === "base64"
-        ? isPng || isJpeg
-          ? "cache"
-          : "base64"
-        : "text"
+      cipherData.outputType === "base64" ? "base64" : "text"
     );
-    console.log("file decrypted...");
-    if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
-      const dCachePath = `${cacheDir}/${output}`;
-      output = await compressToBase64(
-        `file://${dCachePath}`,
-        isPng ? "PNG" : "JPEG"
-      );
-    }
+    console.log("file decrypted...", attachment?.mimeType);
 
     return output;
   } catch (e) {

apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx

@@ -114,7 +114,7 @@ export default function AttachImage({
           }}
           size={SIZE.sm}
         >
-          Compress image (recommended)
+          Compress (recommended)
         </Paragraph>
       </TouchableOpacity>
 
@@ -131,7 +131,7 @@ export default function AttachImage({
       ) : (
         <Notice
           type="information"
-          text="Compressed images are uploaded in FULL HD resolution and are good enough for most use cases."
+          text="Compressed images are uploaded in Full HD resolution and usually are good enough for most use cases."
           size="small"
           style={{
             width: "100%",
@@ -141,7 +141,9 @@ export default function AttachImage({
       )}
 
       <Button
-        title="Add images to note"
+        title={`${
+          (response.assets?.length || 0) > 1 ? "Attach Images" : "Attach Image"
+        }`}
         type="accent"
         width="100%"
         onPress={() => {

apps/mobile/app/screens/editor/tiptap/picker.js

@@ -24,10 +24,8 @@ import RNFetchBlob from "react-native-blob-util";
 import DocumentPicker from "react-native-document-picker";
 import { launchCamera, launchImageLibrary } from "react-native-image-picker";
 import { db } from "../../../common/database";
-import {
-  compressToBase64,
-  compressToFile
-} from "../../../common/filesystem/compress";
+import filesystem from "../../../common/filesystem";
+import { compressToFile } from "../../../common/filesystem/compress";
 import AttachImage from "../../../components/dialogs/attach-image-dialog";
 import {
   ToastManager,
@@ -35,11 +33,10 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import PremiumService from "../../../services/premium";
+import { useSettingStore } from "../../../stores/use-setting-store";
 import { FILE_SIZE_LIMIT, IMAGE_SIZE_LIMIT } from "../../../utils/constants";
 import { eCloseSheet } from "../../../utils/events";
 import { editorController, editorState } from "./utils";
-import { useSettingStore } from "../../../stores/use-setting-store";
-import filesystem from "../../../common/filesystem";
 
 const showEncryptionSheet = (file) => {
   presentSheet({
@@ -237,7 +234,7 @@ const handleImageResponse = async (response, options) => {
     }
 
     if (image.fileSize > IMAGE_SIZE_LIMIT) {
-      ToastEvent.show({
+      ToastManager.show({
         title: "File too large",
         message: "The maximum allowed size per image is 50 MB",
         type: "error"
@@ -254,15 +251,6 @@ const handleImageResponse = async (response, options) => {
     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({
@@ -302,7 +290,7 @@ export async function attachFile(uri, hash, type, filename, options) {
         type: options.type || "url",
         hash: hash
       });
-      encryptionInfo.type = type;
+      encryptionInfo.mimeType = type;
       encryptionInfo.filename = filename;
       encryptionInfo.alg = "xcha-stream";
       encryptionInfo.size = encryptionInfo.length;

apps/mobile/app/utils/note-bundle.js

@@ -45,7 +45,7 @@ export async function attachFile(uri, hash, type, filename, options) {
         hash: hash,
         appGroupId: options.appGroupId
       });
-      encryptionInfo.type = type;
+      encryptionInfo.mimeType = type;
       encryptionInfo.filename = filename;
       encryptionInfo.alg = "xcha-stream";
       encryptionInfo.size = encryptionInfo.length;