feat: add image compression

1 files changed, 21 insertions, 4 deletions

diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
index 1fb2cd6..22f2513 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,18 @@ interface Hook {
   progress: number;
 }
 
+
+const compressFile = (file: File, quality = 0.6): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    // eslint-disable-next-line no-new
+    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 +51,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 +59,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;