client-side image conversion and resize

3 files changed, 64 insertions, 9 deletions

diff --git a/package.json b/package.json
index 5abd5fb..3f67c52 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,15 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/pica": "^5.1.2",
     "@types/react-cookies": "^0.1.0",
     "@types/uuid": "^8.3.0",
     "axios": "^0.21.1",
     "email-validator": "^2.0.4",
     "friendly-time": "^1.1.1",
+    "image-blob-reduce": "^2.2.2",
     "next": "^10.0.5",
+    "pica": "^6.1.1",
     "react": "^17.0.1",
     "react-cookies": "^0.1.1",
     "react-dom": "^17.0.1",
diff --git a/pages/settings.tsx b/pages/settings.tsx
index bbc4672..99a87d1 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,6 +1,8 @@
 import { CSSProperties, useContext } from 'react';
 import * as cookies from 'react-cookies';
 import axios from 'axios';
+import pica from 'pica';
+import reduce from 'image-blob-reduce';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
@@ -19,19 +21,29 @@ var SettingsSubsectionStyle: CSSProperties = {
 	minHeight: 40
 };
 
-function uploadNewProfileImage() {
+async function uploadNewProfileImage() {
 	if (!this.result) return;
+
 	var result = this.result.split(";");
 	var mimeType = result[0].substr(5);
-	var data = result[1].substr(7);
+
 	if (!["image/png", "image/jpeg"].includes(mimeType)) return;
-	axios.request({
-		method: "post",
-		url: `/api/user/avatar`,
-		headers: {"content-type": "image/png"},
-		data: data
-	})
-	.then(() => window.location.reload()); //TODO: this is straight garbage
+
+	var blob = await (await fetch(this.result)).blob()
+
+	var image = await new reduce().toBlob(blob, { max: 256 });
+	var reader = new FileReader();
+
+	reader.readAsBinaryString(image);
+	reader.onload = async () => {
+		await axios.request({
+			method: "post",
+			url: `/api/user/avatar`,
+			headers: {"content-type": "image/png"},
+			data: btoa(reader.result as string)
+		});
+		window.location.reload(); //TODO: this is straight garbage
+	}
 }
 
 export default function SettingsPage() {
diff --git a/yarn.lock b/yarn.lock
index c2816a9..5236d07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2028,6 +2028,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/pica@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@types/pica/-/pica-5.1.2.tgz#d96cf3efbb7d839109d5a43c0733886e70cdd9fd"
+  integrity sha512-KJPg2vGt1l03VaDK1SPKDcm/I5RVexO5Jyo/kGPlaS7SqVOkY83O3f1iyff981UnSzbF3Tg1Zw0r6vX6vB6JxA==
+
 "@types/prettier@^2.0.0":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.5.tgz#b6ab3bba29e16b821d84e09ecfaded462b816b00"
@@ -5986,6 +5991,11 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+glur@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/glur/-/glur-1.1.2.tgz#f20ea36db103bfc292343921f1f91e83c3467689"
+  integrity sha1-8g6jbbEDv8KSNDkh8fkeg8NGdok=
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
@@ -6381,6 +6391,13 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+image-blob-reduce@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/image-blob-reduce/-/image-blob-reduce-2.2.2.tgz#0c1c1817ee8666bcd174f191a125ea70a2f041d2"
+  integrity sha512-4pfusXGLRfMyASVr/nvHxHoYDcB+VbfYnOrLdK2VWO56yhkLvSP9l2HXwYIJUFBw4bPqQoZPWFm7rz01lgaOgA==
+  dependencies:
+    pica "^6.1.1"
+
 immer@7.0.9:
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e"
@@ -8162,6 +8179,14 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
+multimath@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/multimath/-/multimath-2.0.0.tgz#0d37acf67c328f30e3d8c6b0d3209e6082710302"
+  integrity sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==
+  dependencies:
+    glur "^1.1.2"
+    object-assign "^4.1.1"
+
 nan@^2.12.1:
   version "2.14.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
@@ -8952,6 +8977,16 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+pica@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/pica/-/pica-6.1.1.tgz#5219d70265bf34926f656e42268b14ddba5c734b"
+  integrity sha512-dmjQheDGFOl+30rQhN3NM3MyDNjeOZvco6IL3ZVYgyVDmhgvcSCGOAsydRCIaZ36mcXO7ci0XFeD+h6unEcBvA==
+  dependencies:
+    inherits "^2.0.3"
+    multimath "^2.0.0"
+    object-assign "^4.1.1"
+    webworkify "^1.5.0"
+
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
@@ -12518,6 +12553,11 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+webworkify@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/webworkify/-/webworkify-1.5.0.tgz#734ad87a774de6ebdd546e1d3e027da5b8f4a42c"
+  integrity sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g==
+
 whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"