🗿ServerIcon Updater

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -80,6 +80,8 @@ export default () => {
                     <Can action={'settings.reinstall'}>
                         <ReinstallServerBox />
                     </Can>
+                </div>
+                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
                     <Can action={'file.create'}>
                         <UploadServerIconBox />
                     </Can>

resources/scripts/components/server/settings/UploadServerIconBox.tsx

@@ -1,9 +1,8 @@
 import React, {useEffect, useRef, useState} from 'react';
-import { ServerContext } from '@/state/server';
+import {ServerContext} from '@/state/server';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import tw from 'twin.macro';
-import { Button } from '@/components/elements/button/index';
-import { Dialog } from '@/components/elements/dialog';
+import {Button} from '@/components/elements/button/index';
 import getFileUploadUrl from "@/api/server/files/getFileUploadUrl";
 import axios from "axios";
 import useFileManagerSwr from "@/plugins/useFileManagerSwr";
@@ -18,30 +17,51 @@ export default () => {
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const fileUploadInput = useRef<HTMLInputElement>(null);
 
+    function dataURItoBlob(dataURI: string) {
+        // convert base64 to raw binary data held in a string
+        // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
+        const byteString = atob(dataURI.split(',')[1]);
+
+        // separate out the mime component
+        const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+        // write the bytes of the string to an ArrayBuffer
+        const ab = new ArrayBuffer(byteString.length);
+
+        // create a view into the buffer
+        const ia = new Uint8Array(ab);
+
+        // set the bytes of the buffer to the correct values
+        for (let i = 0; i < byteString.length; i++) {
+            ia[i] = byteString.charCodeAt(i);
+        }
+
+        // write the ArrayBuffer to a blob, and you're done
+        return new Blob([ab], {type: mimeString});
+    }
+
     const onFileSubmission = (files: FileList) => {
         const form = new FormData();
         Array.from(files).forEach((file) => {
-            if(file.type.startsWith("image/")) {
-                // Convert to png
-                const reader = new FileReader();
-                reader.readAsDataURL(file);
-                reader.onload = () => {
-                    const base64data = reader.result as string;
-                    const img = new Image();
-                    img.src = base64data;
-                    img.onload = () => {
-                        const canvas = document.createElement("canvas");
-                        canvas.width = 64;
-                        canvas.height = 64;
-
-                        const ctx = canvas.getContext("2d");
-                        if(ctx) {
-                            ctx.drawImage(img, 0, 0, 64, 64);
-                            const png = canvas.toDataURL("image/png");
-                            form.append("files", png);
+            // Rename the file to the server-icon.png and resize it to 64x64
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => {
+                    const canvas = document.createElement("canvas");
+                    canvas.width = 64;
+                    canvas.height = 64;
+                    const ctx = canvas.getContext("2d");
+                    if(ctx) {
+                        ctx.drawImage(img, 0, 0, 64, 64);
+                        const dataURL = canvas.toDataURL("image/png");
+                        const blob = dataURItoBlob(dataURL);
+                        if(blob) {
+                            form.append("files", blob, "server-icon.png");
                         }
                     }
                 }
+                img.src = e.target!.result as string;
             }
         });