Merge pull request #92 from which-ecosystem/image-compression

Image compression

3 files changed, 40 insertions, 4 deletions

diff --git a/package-lock.json b/package-lock.json
index d904501..0e86c15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2961,6 +2961,11 @@
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
+    "blueimp-canvas-to-blob": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.28.0.tgz",
+      "integrity": "sha512-5q+YHzgGsuHQ01iouGgJaPJXod2AzTxJXmVv90PpGrRxU7G7IqgPqWXz+PBmt3520jKKi6irWbNV87DicEa7wg=="
+    },
     "bn.js": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.2.tgz",
@@ -3685,6 +3690,15 @@
         }
       }
     },
+    "compressorjs": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.0.6.tgz",
+      "integrity": "sha512-HgaDx4AGCjJOyOt08JsGO9VLJIHwy8guZDU1OG2jtuz77MG8PQr+reKt5J6aYZCajVIKXsFXJreZeEmk6lXFmA==",
+      "requires": {
+        "blueimp-canvas-to-blob": "^3.16.0",
+        "is-blob": "^2.0.1"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6858,6 +6872,11 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
diff --git a/package.json b/package.json
index 8d8843a..457fa4f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "axios": "^0.19.2",
     "bluebird": "^3.7.2",
+    "compressorjs": "^1.0.6",
     "lodash": "^4.17.15",
     "notistack": "^0.9.17",
     "react": "^16.13.1",
diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
index 1fb2cd6..651bfb6 100644
--- a/src/hooks/useS3Preupload.tsx
+++ b/src/hooks/useS3Preupload.tsx
@@ -1,5 +1,7 @@
 import { useState, useCallback, useMemo } from 'react';
 import axios from 'axios';
+import Bluebird from 'bluebird';
+import Compressor from 'compressorjs';
 import { get } from '../requests';
 
 
@@ -15,6 +17,17 @@ interface Hook {
   progress: number;
 }
 
+
+const compressFile = (file: File, quality = 0.6): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    return new Compressor(file, {
+      success: result => resolve(result),
+      error: err => reject(err),
+      quality
+    });
+  });
+};
+
 export default (): Hook => {
   const [url, setUrl] = useState<string>();
   const [file, setFile] = useState<File>();
@@ -37,7 +50,7 @@ export default (): Hook => {
     setProgress(Math.round((progressEvent.loaded * 95) / progressEvent.total));
   }, [setProgress]);
 
-  const resolve = useCallback(async (): Promise<string> => {
+  const resolve = useCallback(async (quality?: number): Promise<string> => {
     if (file) {
       const config = {
         headers: { 'Content-Type': 'image/png' },
@@ -45,11 +58,14 @@ export default (): Hook => {
       };
 
       setProgress(0.01);
+
       // Add querystring to avoid caching request in some browsers, see
       // https://stackoverflow.com/questions/59339561/safari-skipping-xmlhttprequests
-      return get(`/files?key=${file.name}`)
-        .then(response => response.data)
-        .then(uploadUrl => axios.put(uploadUrl, file, config))
+      return Bluebird.all([get(`/files?key=${file.name}`), compressFile(file, quality)])
+        .then(([response, compressedFile]) => {
+          const uploadUrl = response.data;
+          return axios.put(uploadUrl, compressedFile, config);
+        })
         .then(response => {
           setProgress(100);
           const uri = response.config.url;