Uniformize size of accepted attachment to 10MB

Some image files can be scaled automatically, so this size is not the
same for them, they will just be scaled down

js/background.js

@@ -653,6 +653,7 @@
               const data = await readFile({ file: avatar });
               // Ensure that this file is either small enough or is resized to meet our
               //   requirements for attachments
+              try {
                 const withBlob = await window.Signal.Util.AttachmentUtil.autoScale(
                   {
                     contentType: avatar.type,
@@ -660,9 +661,7 @@
                       type: avatar.contentType,
                     }),
                     maxMeasurements: {
-                    maxSize: 1000 * 1024,
-                    maxHeight: 512,
-                    maxWidth: 512,
+                      maxSize: 1000 * 1024, // 1Mb for our profile picture
                     },
                   }
                 );
@@ -711,6 +710,12 @@
                   displayName: newName,
                   avatar: newAvatarPath,
                 });
+              } catch (error) {
+                window.log.error(
+                  'showEditProfileDialog Error ensuring that image is properly sized:',
+                  error && error.stack ? error.stack : error
+                );
+              }
             } else {
               // do not update the avatar if it did not change
               conversation.setLokiProfile({

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -805,11 +805,16 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     }
   }
 
-  // this function is called right before sending a message, to gather really files bejind attachments.
+  // this function is called right before sending a message, to gather really the files behind attachments.
   private async getFiles() {
     const { stagedAttachments } = this.props;
+    // scale them down
     const files = await Promise.all(
-      stagedAttachments.map(attachment => AttachmentUtil.getFile(attachment))
+      stagedAttachments.map(attachment =>
+        AttachmentUtil.getFile(attachment, {
+          maxSize: Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES,
+        })
+      )
     );
     this.props.clearAttachments();
     return files;

ts/components/session/conversation/SessionConversation.tsx

@@ -1058,6 +1058,7 @@ export class SessionConversation extends React.Component<Props, State> {
       }
 
       const url = await window.autoOrientImage(file);
+
       this.addAttachments([
         {
           file,
@@ -1070,42 +1071,22 @@ export class SessionConversation extends React.Component<Props, State> {
       ]);
     };
 
+    let blob = null;
+
     try {
-      const blob = await AttachmentUtil.autoScale({
+      blob = await AttachmentUtil.autoScale({
         contentType,
         file,
       });
-      let limitKb = 10000;
-      const blobType =
-        file.type === 'image/gif' ? 'gif' : contentType.split('/')[0];
 
-      switch (blobType) {
-        case 'image':
-          limitKb = 6000;
-          break;
-        case 'gif':
-          limitKb = 10000;
-          break;
-        case 'audio':
-          limitKb = 10000;
-          break;
-        case 'video':
-          limitKb = 10000;
-          break;
-        default:
-          limitKb = 10000;
-      }
-      // if ((blob.file.size / 1024).toFixed(4) >= limitKb) {
-      //   const units = ['kB', 'MB', 'GB'];
-      //   let u = -1;
-      //   let limit = limitKb * 1000;
-      //   do {
-      //     limit /= 1000;
-      //     u += 1;
-      //   } while (limit >= 1000 && u < units.length - 1);
-      //   // this.showFileSizeError(limit, units[u]);
-      //   return;
-      // }
+      if (
+        blob.file.size >= Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES
+      ) {
+        ToastUtils.pushFileSizeErrorAsByte(
+          Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES
+        );
+        return;
+      }
     } catch (error) {
       window.log.error(
         'Error ensuring that image is properly sized:',
@@ -1118,6 +1099,10 @@ export class SessionConversation extends React.Component<Props, State> {
 
     try {
       if (GoogleChrome.isImageTypeSupported(contentType)) {
+        // this does not add the preview to the message outgoing
+        // this is just for us, for the list of attachments we are sending
+        // the files are scaled down under getFiles()
+
         await renderImagePreview();
       } else if (GoogleChrome.isVideoTypeSupported(contentType)) {
         await renderVideoPreview();

ts/components/session/conversation/SessionRecording.tsx

@@ -11,6 +11,7 @@ import {
   SessionButtonType,
 } from '../SessionButton';
 import { Constants } from '../../../session';
+import { ToastUtils } from '../../../session/utils';
 
 interface Props {
   onExitVoiceNoteView: any;
@@ -422,8 +423,10 @@ export class SessionRecording extends React.Component<Props, State> {
     }
 
     // Is the audio file > attachment filesize limit
-    if (audioBlob.size > Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE) {
-      // TODO VINCE: warn the user that it's too big
+    if (audioBlob.size > Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES) {
+      ToastUtils.pushFileSizeErrorAsByte(
+        Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES
+      );
       return;
     }
 

ts/components/session/conversation/SessionStagedLinkPreview.tsx

@@ -62,12 +62,15 @@ export const getPreview = async (
 
       // Ensure that this file is either small enough or is resized to meet our
       //   requirements for attachments
-      const withBlob = await AttachmentUtil.autoScale({
+      const withBlob = await AttachmentUtil.autoScale(
+        {
           contentType: fullSizeImage.contentType,
           file: new Blob([fullSizeImage.data], {
             type: fullSizeImage.contentType,
           }),
-      });
+        },
+        { maxSize: 100 * 1000 } // this is a preview image. No need for it to be crazy big. 100k is big enough
+      );
 
       const data = await arrayBufferFromFile(withBlob.file);
       objectUrl = URL.createObjectURL(withBlob.file);

ts/session/constants.ts

@@ -28,8 +28,8 @@ export const CONVERSATION = {
   // Maximum voice message duraton of 5 minutes
   // which equates to 1.97 MB
   MAX_VOICE_MESSAGE_DURATION: 300,
-  // Max attachment size: 10 MB
-  MAX_ATTACHMENT_FILESIZE: 10000000,
+  // Max attachment size: 6 MB
+  MAX_ATTACHMENT_FILESIZE_BYTES: 6 * 1000 * 1000,
 };
 
 export const UI = {

ts/session/utils/Toast.tsx

@@ -80,6 +80,17 @@ export function pushFileSizeError(limit: number, units: string) {
   );
 }
 
+export function pushFileSizeErrorAsByte(bytesCount: number) {
+  const units = ['kB', 'MB', 'GB'];
+  let u = -1;
+  let limit = bytesCount;
+  do {
+    limit /= 1000;
+    u += 1;
+  } while (limit >= 1000 && u < units.length - 1);
+  pushFileSizeError(limit, units[u]);
+}
+
 export function pushMultipleNonImageError() {
   pushToastError(
     'cannotMixImageAndNonImageAttachments',

ts/util/attachmentsUtil.ts

@@ -1,16 +1,18 @@
 import { StagedAttachmentType } from '../components/session/conversation/SessionCompositionBox';
 import { SignalService } from '../protobuf';
+import { Constants } from '../session';
 
 export interface MaxScaleSize {
-  maxSize: number;
-  maxHeight: number;
-  maxWidth: number;
+  maxSize?: number;
+  maxHeight?: number;
+  maxWidth?: number;
 }
 
-export async function autoScale<
-  T extends { contentType: string; file: any; maxMeasurements?: MaxScaleSize }
->(attachment: T): Promise<T> {
-  const { contentType, file, maxMeasurements } = attachment;
+export async function autoScale<T extends { contentType: string; file: any }>(
+  attachment: T,
+  maxMeasurements?: MaxScaleSize
+): Promise<T> {
+  const { contentType, file } = attachment;
   if (contentType.split('/')[0] !== 'image' || contentType === 'image/tiff') {
     // nothing to do
     return Promise.resolve(attachment);
@@ -23,7 +25,9 @@ export async function autoScale<
     img.onload = () => {
       URL.revokeObjectURL(url);
 
-      const maxSize = maxMeasurements?.maxSize || 6000 * 1024;
+      const maxSize =
+        maxMeasurements?.maxSize ||
+        Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES;
       const maxHeight = maxMeasurements?.maxHeight || 4096;
       const maxWidth = maxMeasurements?.maxWidth || 4096;
 
@@ -36,7 +40,7 @@ export async function autoScale<
         return;
       }
 
-      const gifMaxSize = 25000 * 1024;
+      const gifMaxSize = Constants.CONVERSATION.MAX_ATTACHMENT_FILESIZE_BYTES;
       if (file.type === 'image/gif' && file.size <= gifMaxSize) {
         resolve(attachment);
         return;
@@ -62,11 +66,15 @@ export async function autoScale<
           canvas.toDataURL('image/jpeg', quality)
         );
         quality = (quality * maxSize) / blob.size;
+        // Should we disallow the algo drop the quality too low?
+        // if (quality < 0.5) {
+        //   quality = 0.5;
+        // }
         // NOTE: During testing with a large image, we observed the
         // `quality` value being > 1. Should we clamp it to [0.5, 1.0]?
         // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Syntax
-        if (quality < 0.5) {
-          quality = 0.5;
+        if (quality > 1) {
+          quality = 1;
         }
       } while (i > 0 && blob.size > maxSize);
 
@@ -79,7 +87,10 @@ export async function autoScale<
   });
 }
 
-export async function getFile(attachment: StagedAttachmentType) {
+export async function getFile(
+  attachment: StagedAttachmentType,
+  maxMeasurements?: MaxScaleSize
+) {
   if (!attachment) {
     return Promise.resolve();
   }
@@ -88,7 +99,7 @@ export async function getFile(attachment: StagedAttachmentType) {
     ? SignalService.AttachmentPointer.Flags.VOICE_MESSAGE
     : null;
 
-  const scaled = await autoScale(attachment);
+  const scaled = await autoScale(attachment, maxMeasurements);
   const fileRead = await readFile(scaled);
   return {
     ...fileRead,