Client: PortalSettings: WhiteLabel: use logoUploader

packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js

@@ -15,7 +15,11 @@ import WhiteLabelWrapper from "./StyledWhitelabel";
 import LoaderWhiteLabel from "../sub-components/loaderWhiteLabel";
 
 import Logo from "./sub-components/logo";
-import { generateLogo, getLogoOptions } from "../../../utils/generateLogo";
+import {
+  generateLogo,
+  getLogoOptions,
+  uploadLogo,
+} from "../../../utils/generateLogo";
 import isEqual from "lodash/isEqual";
 
 const WhiteLabel = (props) => {
@@ -100,28 +104,29 @@ const WhiteLabel = (props) => {
     }
   };
 
-  const onChangeLogo = (e) => {
+  const onChangeLogo = async (e) => {
     const id = e.target.id.split("_");
     const index = id[1];
     const theme = id[2];
 
     let file = e.target.files[0];
 
-    let reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = (e) => {
-      const img = e.target.result;
+    const { data } = await uploadLogo(file);
 
+    if (data.Success) {
+      const url = data.Message;
       const newArr = logoUrlsWhiteLabel;
 
       if (theme === "light") {
-        newArr[index - 1].path.light = img;
+        newArr[index - 1].path.light = url;
       } else if (theme === "dark") {
-        newArr[index - 1].path.dark = img;
+        newArr[index - 1].path.dark = url;
       }
 
       setLogoUrlsWhiteLabel(newArr);
-    };
+    } else {
+      console.error("Error");
+    }
   };
 
   const onSave = async () => {

packages/client/src/pages/PortalSettings/utils/generateLogo.js

@@ -1,3 +1,7 @@
+import axios from "axios";
+import config from "PACKAGE_FILE";
+import { combineUrl } from "@docspace/common/utils";
+
 export const generateLogo = (
   width,
   height,
@@ -41,3 +45,43 @@ export const getLogoOptions = (index, text) => {
       return { fontSize: 18, text: text };
   }
 };
+
+export const uploadLogo = async (file) => {
+  try {
+    const { width, height } = await getUploadedFileDimensions(file);
+    let data = new FormData();
+    data.append("file", file);
+    data.append("width", width);
+    data.append("height", height);
+
+    return await axios.post(
+      `${combineUrl(
+        window.DocSpaceConfig?.proxy?.url,
+        config.homepage
+      )}/logoUploader.ashx`,
+      data
+    );
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const getUploadedFileDimensions = (file) =>
+  new Promise((resolve, reject) => {
+    try {
+      let img = new Image();
+
+      img.onload = () => {
+        const width = img.naturalWidth,
+          height = img.naturalHeight;
+
+        window.URL.revokeObjectURL(img.src);
+
+        return resolve({ width, height });
+      };
+
+      img.src = window.URL.createObjectURL(file);
+    } catch (exception) {
+      return reject(exception);
+    }
+  });