Added ImageCompression for FileUpload (#2924)

* Added compression package

* Added compression logic

package.json

@@ -59,6 +59,7 @@
     "@types/react-swipeable-views": "^0.13.0",
     "@yaireo/ui-range": "^2.1.15",
     "axios": "^0.21.1",
+    "browser-image-compression": "^2.0.0",
     "bs-webapi": "^0.19.0",
     "clsx": "^1.1.1",
     "cross-env": "^7.0.3",

src/Components/Patient/FileUpload.tsx

@@ -25,6 +25,7 @@ import { Close, ZoomIn, ZoomOut } from "@material-ui/icons";
 
 import Pagination from "../Common/Pagination";
 import { RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
+import imageCompression from "browser-image-compression";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
@@ -98,7 +99,7 @@ interface StateInterface {
 
 export const FileUpload = (props: FileUploadProps) => {
   const [audioBlob, setAudioBlob] = useState<Blob>();
-  const [file, setfile] = useState<File>();
+  const [file, setFile] = useState<File>();
   const {
     facilityId,
     consultationId,
@@ -122,7 +123,7 @@ export const FileUpload = (props: FileUploadProps) => {
   const [uploadFileName, setUploadFileName] = useState<string>("");
   const [url, seturl] = useState<URLS>({});
   const [fileUrl, setFileUrl] = useState("");
-  const [contentType, setcontentType] = useState<string>("");
+  const [contentType, setContentType] = useState<string>("");
   // const classes = useStyles();
   // const [modalStyle] = React.useState(getModalStyle);
   const [downloadURL, setDownloadURL] = useState<string>();
@@ -390,11 +391,22 @@ export const FileUpload = (props: FileUploadProps) => {
     if (e.target.files == null) {
       throw new Error("Error finding e.target.files");
     }
-    setfile(e.target.files[0]);
-    const fileName = e.target.files[0].name;
+    const f = e.target.files[0];
+    const fileName = f.name;
     const ext: string = fileName.split(".")[1];
-    setcontentType(header_content_type[ext]);
-    return e.target.files[0];
+    setContentType(header_content_type[ext]);
+
+    if (ExtImage[ext] && ExtImage[ext] === "1") {
+      const options = {
+        initialQuality: 0.6,
+        alwaysKeepResolution: true,
+      };
+      imageCompression(f, options).then((compressedFile: File) => {
+        setFile(compressedFile);
+      });
+      return;
+    }
+    setFile(f);
   };
 
   const uploadfile = (response: any) => {