Validate image is < 5mb and compress

packages/fhir-group-management/src/components/CommodityAddEdit/Eusm/utils.ts

@@ -52,6 +52,8 @@ import { UploadFile } from 'antd';
 import { Coding } from '@smile-cdr/fhirts/dist/FHIR-R4/classes/coding';
 import { R4GroupTypeCodes } from '@opensrp/fhir-helpers';
 import { defaultValidationRulesFactory } from '../../ProductForm/utils';
+import { RcFile } from 'antd/es/upload';
+import imageCompression from 'browser-image-compression';
 
 export type EusmGroupFormFields = GroupFormFields<{ group: IGroup; binary?: IBinary }>;
 
@@ -282,6 +284,23 @@ function fileToBase64(file?: File): Promise<string | undefined> {
   });
 }
 
+/**
+ * Compresses images before uploading, images is scaled down and
+ * converted to webp format
+ *
+ * @param file - image file to be downscaled
+ */
+export async function compressImage(file: RcFile | undefined) {
+  if (!file) return;
+  const options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    fileType: 'image/webp',
+  };
+  const compressedBlob = await imageCompression(file, options);
+  return compressedBlob;
+}
+
 /**
  *  generates the binary payload for uploaded image
  *
@@ -298,6 +317,9 @@ export async function getProductImagePayload(
   const currentImageb64 = await fileToBase64(currentImage);
   const initialImageb64 = await fileToBase64(initialImage);
 
+  const scaledDownImage = await compressImage(currentImage);
+  const scaledDownCurrentImageb64 = await fileToBase64(scaledDownImage);
+
   if (currentImageb64 === initialImageb64) {
     // This could mean it was not added or removed.
     return {
@@ -313,7 +335,7 @@ export async function getProductImagePayload(
       id,
       resourceType: binaryResourceType,
       contentType: currentImage.type,
-      data: currentImageb64,
+      data: scaledDownCurrentImageb64,
     };
     return {
       changed: true,

packages/fhir-group-management/src/components/ProductForm/index.tsx

@@ -278,6 +278,7 @@ function CommodityForm<
         {({ getFieldValue }) => {
           return (
             <Form.Item
+              rules={validationRules[productImage]}
               id={productImage}
               hidden={hidden.includes(productImage)}
               name={productImage}

packages/fhir-group-management/src/components/ProductForm/utils.tsx

@@ -44,6 +44,17 @@ export const normalizeFileInputEvent = (e: UploadChangeParam<UploadFile>) => {
   return e.fileList;
 };
 
+const validateFile = (_: unknown, fileList: UploadFile[] | undefined) => {
+  if (fileList && fileList.length > 0) {
+    const file = fileList[0].originFileObj;
+    const MAX_IMAGE_SIZE_MB = 5;
+    if (file && file.size / 1024 / 1024 > MAX_IMAGE_SIZE_MB) {
+      return Promise.reject(new Error('File must be smaller than 5MB!'));
+    }
+  }
+  return Promise.resolve();
+};
+
 // TODO - Do we really need this.
 /**
  * factory to create default validation rules
@@ -64,7 +75,12 @@ export function defaultValidationRulesFactory(t: TFunction) {
     [condition]: [{ type: 'string' }] as Rule[],
     [appropriateUsage]: [{ type: 'string' }] as Rule[],
     [accountabilityPeriod]: [{ type: 'number' }] as Rule[],
-    [productImage]: [{ type: 'array', max: 1 }] as Rule[],
+    [productImage]: [
+      { type: 'array', max: 1 },
+      {
+        validator: validateFile,
+      },
+    ] as Rule[],
   };
 }