Bug browser image upload issues (#1001)

* add brave detect function

* remove logs

Author: corlard3y

package.json

@@ -58,6 +58,7 @@
     "browserslist": "4.14.6",
     "buffer": "6.0.3",
     "chalk": "5.0.1",
+    "compressorjs": "^1.2.1",
     "constants-browserify": "1.0.0",
     "crypto-browserify": "^3.12.0",
     "crypto-js": "4.0.0",

src/components/UploadLogo.jsx

@@ -50,7 +50,6 @@ const UploadLogo = ({
   };
 
   const handleFile = async (file, path) => {
-    console.log("This is called",file);
     setCroppedImage(undefined);
     setView(true);
 

src/primaries/ImageClipper.js

@@ -11,6 +11,19 @@ import React, {
 import Cropper from "react-easy-crop";
 import styledComponents from "styled-components";
 import Pica from 'pica';
+import Compressor from "compressorjs";
+
+export function isBrave() {
+  if (window.navigator.brave != undefined) {
+    if (window.navigator.brave.isBrave.name == "isBrave") {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
 
 const ImageClipper = forwardRef((props, ref) => {
   //   const [imageSrc, setImageSrc] = useState(null);
@@ -29,7 +42,10 @@ const ImageClipper = forwardRef((props, ref) => {
         if (imageSrc) {
           const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels);
           const clean = await convertBlobToBase64(croppedImage);
-          const image = await resizeImage(clean);
+          //because pica has compatiblity issues on brave, we use pica on chrome and comprressorjs on brave after checking if window is opened on brave or chrome.
+          const image = isBrave() ? await resizeImageOnBrave(croppedImage) : await resizeImage(clean);
+
+          
           const finalImage = await convertBlobToBase64(image);
           onImageCropped(finalImage);
         } else {
@@ -43,14 +59,11 @@ const ImageClipper = forwardRef((props, ref) => {
 
   async function resizeImage(clean) {
     const pica = Pica();
-
     let file = await createImage(clean);
-
     const canvas = document.createElement("canvas");
 
     canvas.height = 128;
     canvas.width = 128;
-  
     return new Promise(resolve => {
 
         resolve(
@@ -66,6 +79,20 @@ const ImageClipper = forwardRef((props, ref) => {
     });
   }
 
+  async function resizeImageOnBrave(clean){
+    return new Promise((resolve, reject) => {
+      new Compressor(clean, {
+        quality: 1,
+        strict: true,
+        maxWidth: 128,
+        maxHeight: 128,
+        checkOrientation: false,
+        success: resolve,
+        error: reject
+      });
+    })
+  }
+
   const convertBlobToBase64 = async (blob) => { // blob data
   return await blobToBase64(blob);
 }

yarn.lock

@@ -4743,6 +4743,7 @@ __metadata:
     browserslist: 4.14.6
     buffer: 6.0.3
     chalk: 5.0.1
+    compressorjs: ^1.2.1
     constants-browserify: 1.0.0
     crypto-browserify: ^3.12.0
     crypto-js: 4.0.0
@@ -9917,6 +9918,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"blueimp-canvas-to-blob@npm:^3.29.0":
+  version: 3.29.0
+  resolution: "blueimp-canvas-to-blob@npm:3.29.0"
+  checksum: 6a55b90fbe958b75f7c78ff9e7617c01254d29cc8567ea6c853cd26a52518b3dfce28635f6964130ac738ee8ff9fb9c0ca094db2ceeaa021ff0432c1985416eb
+  languageName: node
+  linkType: hard
+
 "bmp-js@npm:^0.1.0":
   version: 0.1.0
   resolution: "bmp-js@npm:0.1.0"
@@ -11307,6 +11315,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compressorjs@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "compressorjs@npm:1.2.1"
+  dependencies:
+    blueimp-canvas-to-blob: ^3.29.0
+    is-blob: ^2.1.0
+  checksum: 8b25fc29b7908216f7029e807623ae9c034fb0e77a72a752686bdd255bd3b1a5cc004b6651cf7ca948c1f86f3151ac3fc00800119d17f8a248d2f0a54570c8b8
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -17540,6 +17558,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-blob@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "is-blob@npm:2.1.0"
+  checksum: ce24917bf50a52736e37702a14bc729a0e1eab6bf61ac0b8e6ee86caf33d73eba297131736f8e54615732d08168859493ba7ced4fc840bb5b7c2ae21a5de6861
+  languageName: node
+  linkType: hard
+
 "is-boolean-object@npm:^1.1.0":
   version: 1.1.2
   resolution: "is-boolean-object@npm:1.1.2"