feat: Compress avatar images before upload (#1751)

* compress avatar images before upload

* move compressImage to dedicated file

* Update ImageUpload.js

app/scenes/Settings/components/ImageUpload.js

@@ -10,6 +10,7 @@ import Button from "components/Button";
 import Flex from "components/Flex";
 import LoadingIndicator from "components/LoadingIndicator";
 import Modal from "components/Modal";
+import { compressImage } from "utils/compressImage";
 import { uploadFile, dataUrlToBlob } from "utils/uploadFile";
 
 const EMPTY_OBJECT = {};
@@ -53,7 +54,11 @@ class ImageUpload extends React.Component<Props> {
     const canvas = this.avatarEditorRef.getImage();
     const imageBlob = dataUrlToBlob(canvas.toDataURL());
     try {
-      const attachment = await uploadFile(imageBlob, {
+      const compressed = await compressImage(imageBlob, {
+        maxHeight: 512,
+        maxWidth: 512,
+      });
+      const attachment = await uploadFile(compressed, {
         name: this.file.name,
         public: true,
       });

app/utils/compressImage.js

@@ -0,0 +1,17 @@
+// @flow
+import Compressor from "compressorjs";
+
+type Options = Omit<Compressor.Options, "success" | "error">;
+
+export const compressImage = async (
+  file: File | Blob,
+  options?: Options
+): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    new Compressor(file, {
+      ...options,
+      success: resolve,
+      error: reject,
+    });
+  });
+};