Resize image

Change-Id: Ib880f8bab6c98bc46a6f70548a31b088bcb1db10

jams-react-client/package-lock.json

@@ -12872,6 +12872,11 @@
         "warning": "^3.0.0"
       }
     },
+    "react-image-file-resizer": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.3.8.tgz",
+      "integrity": "sha512-54gA46Dmj2tSWuSGa0Gp6DBlur+MAnGh8q8eo/7hvh2bqoHmLo4mweJ4s0TUgANKllFAPD/5oLPK87M2AoOYTQ=="
+    },
     "react-intl": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.0.2.tgz",

jams-react-client/package.json

@@ -28,6 +28,7 @@
     "react-dom": "16.13.1",
     "react-easy-crop": "^3.1.1",
     "react-google-maps": "9.4.5",
+    "react-image-file-resizer": "^0.3.8",
     "react-intl": "5.0.2",
     "react-router-dom": "5.2.0",
     "react-scripts": "^3.4.3",

jams-react-client/src/views/UserProfile/EditCreateUserProfile.js

@@ -52,6 +52,8 @@ import FileCopyIcon from "@material-ui/icons/FileCopy";
 
 import { CopyToClipboard } from "react-copy-to-clipboard";
 
+import Resizer from "react-image-file-resizer";
+
 import noProfilePicture from "assets/img/faces/no-profile-picture.png";
 
 import axios from "axios";
@@ -271,12 +273,29 @@ export default function EditCreateUserProfile(props) {
     }
   }, []);
 
+  const resizeFile = (file, outputFormat) =>
+    new Promise((resolve) => {
+      Resizer.imageFileResizer(
+        file,
+        512,
+        512,
+        "PNG",
+        100,
+        0,
+        (uri) => {
+          resolve(uri);
+        },
+        outputFormat
+      );
+    });
+
   const handleProfilePictureChange = (event) => {
-    setOriginalUploadedImage(URL.createObjectURL(event.target.files[0]));
     fileUpload(event)
-      .then((data) => {
-        setProfilePicture(data.base64);
-        setProfilePicturePreview("data:image/png;base64, " + data.base64);
+      .then(async (data) => {
+        const imageBase64 = await resizeFile(data, "base64");
+        setProfilePicture(imageBase64);
+        setProfilePicturePreview("data:image/png;base64, " + imageBase64);
+        setOriginalUploadedImage(imageBase64);
         setOpen(true);
       })
       .catch((error) => {
@@ -443,6 +462,7 @@ export default function EditCreateUserProfile(props) {
           <div className={classes.cropContainer}>
             <Cropper
               image={originalUploadedImage}
+              cropSize={{ width: 300, height: 300 }}
               crop={crop}
               rotation={rotation}
               zoom={zoom}