Refactor Code to typescript

2025-01-10 20:10:28 +01:00
parent 549d0abc02
commit eb0992f28d
270 changed files with 3535 additions and 9062 deletions
@@ -1,8 +0,0 @@
-declare function _exports({ imageInputFile, maxWidth, imagePreviewNode, }: {
-    imageInputFile: {
-        name: string;
-    };
-    maxWidth?: number;
-    imagePreviewNode?: HTMLImageElement;
-}): Promise<any>;
-export = _exports;
@@ -1,22 +1,19 @@
+import { ImageInputFileToBase64FunctionReturn } from "../../package-shared/types";
+
+type Param = {
+    imageInputFile: File;
+    maxWidth?: number;
+    imagePreviewNode?: HTMLImageElement;
+};
+
 /**
- * ==============================================================================
- * Main Function
- * ==============================================================================
- * @async
- *
- * @param {{
- *  imageInputFile: { name:string },
- *  maxWidth?: number,
- *  imagePreviewNode?: HTMLImageElement,
- * }} params - Single object passed
- *
- * @returns { Promise<import("../../types/general.td").ImageInputFileToBase64FunctionReturn> } - Return Object
+ * # Image input File top Base64
 */
-module.exports = async function imageInputFileToBase64({
+export default async function imageInputFileToBase64({
    imageInputFile,
    maxWidth,
    imagePreviewNode,
-}) {
+}: Param): Promise<ImageInputFileToBase64FunctionReturn> {
    /**
     * Make https request
     *
@@ -24,15 +21,15 @@ module.exports = async function imageInputFileToBase64({
     */
    try {
        let imageName = imageInputFile.name.replace(/\..*/, "");
-        let imageDataBase64;
-        let imageSize;
+        let imageDataBase64: string | undefined;
+        let imageSize: number | undefined;
        let canvas = document.createElement("canvas");

        const MIME_TYPE = imageInputFile.type;
        const QUALITY = 0.95;
        const MAX_WIDTH = maxWidth ? maxWidth : null;

-        const file = imageInputFile; // get the file
+        const file = imageInputFile;
        const blobURL = URL.createObjectURL(file);
        const img = new Image();

@@ -47,8 +44,9 @@ module.exports = async function imageInputFileToBase64({
            };

            /** ********************* Handle new image when loaded */
-            img.onload = function () {
-                URL.revokeObjectURL(this.src);
+            img.onload = function (e) {
+                const imgEl = e.target as HTMLImageElement;
+                URL.revokeObjectURL(imgEl.src);

                if (MAX_WIDTH) {
                    const scaleSize = MAX_WIDTH / img.naturalWidth;
@@ -67,7 +65,7 @@ module.exports = async function imageInputFileToBase64({
                }

                const ctx = canvas.getContext("2d");
-                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);

                const srcEncoded = canvas.toDataURL(MIME_TYPE, QUALITY);

@@ -82,7 +80,7 @@ module.exports = async function imageInputFileToBase64({
        imageSize = await new Promise((res, rej) => {
            canvas.toBlob(
                (blob) => {
-                    res(blob.size);
+                    res(blob?.size);
                },
                MIME_TYPE,
                QUALITY
@@ -90,23 +88,19 @@ module.exports = async function imageInputFileToBase64({
        });

        return {
-            imageBase64: imageDataBase64.replace(/.*?base64,/, ""),
+            imageBase64: imageDataBase64?.replace(/.*?base64,/, ""),
            imageBase64Full: imageDataBase64,
            imageName: imageName,
            imageSize: imageSize,
        };
-    } catch (/** @type {*} */ error) {
+    } catch (error: any) {
        console.log("Image Processing Error! =>", error.message);

        return {
-            imageBase64: null,
-            imageBase64Full: null,
-            imageName: null,
-            imageSize: null,
+            imageBase64: undefined,
+            imageBase64Full: undefined,
+            imageName: undefined,
+            imageSize: undefined,
        };
    }
-};
-
-/** ********************************************** */
-/** ********************************************** */
-/** ********************************************** */
+}
@@ -1,14 +0,0 @@
-declare namespace _exports {
-    export { FunctionReturn };
-}
-declare function _exports({ imageInput, maxWidth, mimeType, }: {
-    imageInput: HTMLInputElement;
-    maxWidth?: number;
-    mimeType?: [string];
-}): Promise<FunctionReturn>;
-export = _exports;
-type FunctionReturn = {
-    imageBase64: string;
-    imageBase64Full: string;
-    imageName: string;
-};
@@ -1,115 +0,0 @@
-/**
- * @typedef {{
- *  imageBase64: string,
- *  imageBase64Full: string,
- *  imageName: string,
- * }} FunctionReturn
- */
-
-/**
- * ==============================================================================
- * Main Function
- * ==============================================================================
- * @async
- *
- * @param {{
- *  imageInput: HTMLInputElement,
- *  maxWidth?: number,
- *  mimeType?: [string='image/jpeg']
- * }} params - Single object passed
- *
- * @returns { Promise<FunctionReturn> } - Return Object
- */
-module.exports = async function imageInputToBase64({
-    imageInput,
-    maxWidth,
-    mimeType,
-}) {
-    /**
-     * Make https request
-     *
-     * @description make a request to datasquirel.com
-     */
-    try {
-        let imagePreviewNode = document.querySelector(
-            `[data-imagepreview='image']`
-        );
-        let imageName = imageInput.files[0].name.replace(/\..*/, "");
-        let imageDataBase64;
-
-        const MIME_TYPE = mimeType ? mimeType : "image/jpeg";
-        const QUALITY = 0.95;
-        const MAX_WIDTH = maxWidth ? maxWidth : null;
-
-        const file = imageInput.files[0]; // get the file
-        const blobURL = URL.createObjectURL(file);
-        const img = new Image();
-
-        /** ********************* Add source to new image */
-        img.src = blobURL;
-
-        imageDataBase64 = await new Promise((res, rej) => {
-            /** ********************* Handle Errors in loading image */
-            img.onerror = function () {
-                URL.revokeObjectURL(this.src);
-                window.alert("Cannot load image!");
-            };
-
-            /** ********************* Handle new image when loaded */
-            img.onload = function () {
-                URL.revokeObjectURL(this.src);
-
-                const canvas = document.createElement("canvas");
-
-                if (MAX_WIDTH) {
-                    const scaleSize = MAX_WIDTH / img.naturalWidth;
-
-                    canvas.width =
-                        img.naturalWidth < MAX_WIDTH
-                            ? img.naturalWidth
-                            : MAX_WIDTH;
-                    canvas.height =
-                        img.naturalWidth < MAX_WIDTH
-                            ? img.naturalHeight
-                            : img.naturalHeight * scaleSize;
-                } else {
-                    canvas.width = img.naturalWidth;
-                    canvas.height = img.naturalHeight;
-                }
-
-                const ctx = canvas.getContext("2d");
-                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-                const srcEncoded = canvas.toDataURL(MIME_TYPE, QUALITY);
-
-                if (imagePreviewNode) {
-                    document
-                        .querySelectorAll(`[data-imagepreview='image']`)
-                        .forEach((img) => {
-                            img.src = srcEncoded;
-                        });
-                }
-
-                res(srcEncoded);
-            };
-        });
-
-        return {
-            imageBase64: imageDataBase64.replace(/.*?base64,/, ""),
-            imageBase64Full: imageDataBase64,
-            imageName: imageName,
-        };
-    } catch (/** @type {*} */ error) {
-        console.log("Image Processing Error! =>", error.message);
-
-        return {
-            imageBase64: null,
-            imageBase64Full: null,
-            imageName: null,
-        };
-    }
-};
-
-/** ********************************************** */
-/** ********************************************** */
-/** ********************************************** */
@@ -0,0 +1,104 @@
+type FunctionReturn = {
+    imageBase64?: string;
+    imageBase64Full?: string;
+    imageName?: string;
+};
+
+type Param = {
+    imageInput: HTMLInputElement;
+    maxWidth?: number;
+    mimeType?: string;
+};
+
+/**
+ * # Image Input Element to Base 64
+ */
+export default async function imageInputToBase64({
+    imageInput,
+    maxWidth,
+    mimeType,
+}: Param): Promise<FunctionReturn> {
+    /**
+     * Make https request
+     *
+     * @description make a request to datasquirel.com
+     */
+    try {
+        let imagePreviewNode = document.querySelector(
+            `[data-imagepreview='image']`
+        );
+        let imageName = imageInput.files?.[0].name.replace(/\..*/, "");
+        let imageDataBase64: string | undefined;
+
+        const MIME_TYPE = mimeType ? mimeType : "image/jpeg";
+        const QUALITY = 0.95;
+        const MAX_WIDTH = maxWidth ? maxWidth : null;
+
+        const file = imageInput.files?.[0];
+        const blobURL = file ? URL.createObjectURL(file) : undefined;
+        const img = new Image();
+
+        if (blobURL) {
+            img.src = blobURL;
+
+            imageDataBase64 = await new Promise((res, rej) => {
+                /** ********************* Handle Errors in loading image */
+                img.onerror = function () {
+                    URL.revokeObjectURL(this.src);
+                    window.alert("Cannot load image!");
+                };
+
+                img.onload = function (e) {
+                    const imgEl = e.target as HTMLImageElement;
+                    URL.revokeObjectURL(imgEl.src);
+
+                    const canvas = document.createElement("canvas");
+
+                    if (MAX_WIDTH) {
+                        const scaleSize = MAX_WIDTH / img.naturalWidth;
+
+                        canvas.width =
+                            img.naturalWidth < MAX_WIDTH
+                                ? img.naturalWidth
+                                : MAX_WIDTH;
+                        canvas.height =
+                            img.naturalWidth < MAX_WIDTH
+                                ? img.naturalHeight
+                                : img.naturalHeight * scaleSize;
+                    } else {
+                        canvas.width = img.naturalWidth;
+                        canvas.height = img.naturalHeight;
+                    }
+
+                    const ctx = canvas.getContext("2d");
+                    ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+                    const srcEncoded = canvas.toDataURL(MIME_TYPE, QUALITY);
+
+                    if (imagePreviewNode) {
+                        document
+                            .querySelectorAll(`[data-imagepreview='image']`)
+                            .forEach((_img) => {
+                                const _imgEl = _img as HTMLImageElement;
+                                _imgEl.src = srcEncoded;
+                            });
+                    }
+
+                    res(srcEncoded);
+                };
+            });
+
+            return {
+                imageBase64: imageDataBase64?.replace(/.*?base64,/, ""),
+                imageBase64Full: imageDataBase64,
+                imageName: imageName,
+            };
+        } else {
+            return {};
+        }
+    } catch (/** @type {*} */ error: any) {
+        console.log("Image Processing Error! =>", error.message);
+
+        return {};
+    }
+}
@@ -1,19 +0,0 @@
-declare namespace _exports {
-    export { FunctionReturn };
-}
-declare function _exports({ inputFile, allowedRegex }: {
-    inputFile: {
-        name: string;
-        size: number;
-        type: string;
-    };
-    allowedRegex?: RegExp;
-}): Promise<FunctionReturn>;
-export = _exports;
-type FunctionReturn = {
-    fileBase64: string;
-    fileBase64Full: string;
-    fileName: string;
-    fileSize: number;
-    fileType: string;
-};
@@ -1,96 +0,0 @@
-/**
- * @typedef {{
- *  fileBase64: string,
- *  fileBase64Full: string,
- *  fileName: string,
- *  fileSize: number,
- *  fileType: string,
- * }} FunctionReturn
- */
-
-/**
- * Input File to base64
- * ==============================================================================
- *
- * @description This function takes in a *SINGLE* input file from a HTML file input element.
- * HTML file input elements usually return an array of input objects, so be sure to select the target
- * file from the array.
- *
- * @async
- *
- * @param {object} params - Single object passed
- * @param {object} params.inputFile - HTML input File
- * @param {string} params.inputFile.name - Input File Name
- * @param {number} params.inputFile.size - Input File Size in bytes
- * @param {string} params.inputFile.type - Input File Type: "JPEG", "PNG", "PDF", etc. Whichever allowed regexp is provided
- * @param {RegExp} [params.allowedRegex] - Regexp containing the allowed file types
- *
- * @returns { Promise<FunctionReturn> } - Return Object
- */
-module.exports = async function inputFileToBase64({ inputFile, allowedRegex }) {
-    /**
-     * == Initialize
-     *
-     * @description Initialize
-     */
-    const allowedTypesRegex = allowedRegex ? allowedRegex : /image\/*|\/pdf/;
-
-    if (!inputFile?.type?.match(allowedTypesRegex)) {
-        window.alert(`We currently don't support ${inputFile.type} file types. Support is coming soon. For now we support only images and PDFs.`);
-
-        return {
-            fileBase64: null,
-            fileBase64Full: null,
-            fileName: inputFile.name,
-            fileSize: null,
-            fileType: null,
-        };
-    }
-
-    try {
-        /** Process File **/
-        let fileName = inputFile.name.replace(/\..*/, "");
-
-        /** Add source to new file **/
-        const fileData = await new Promise((resolve, reject) => {
-            var reader = new FileReader();
-            reader.readAsDataURL(inputFile);
-            reader.onload = function () {
-                resolve(reader.result);
-            };
-            reader.onerror = function (/** @type {*} */ error) {
-                console.log("Error: ", error.message);
-            };
-        });
-
-        ////////////////////////////////////////
-        ////////////////////////////////////////
-        ////////////////////////////////////////
-
-        return {
-            fileBase64: fileData.replace(/.*?base64,/, ""),
-            fileBase64Full: fileData,
-            fileName: fileName,
-            fileSize: inputFile.size,
-            fileType: inputFile.type,
-        };
-
-        ////////////////////////////////////////
-        ////////////////////////////////////////
-        ////////////////////////////////////////
-    } catch (/** @type {*} */ error) {
-        console.log("File Processing Error! =>", error.message);
-
-        return {
-            fileBase64: null,
-            fileBase64Full: null,
-            fileName: inputFile.name,
-            fileSize: null,
-            fileType: null,
-        };
-    }
-};
-
-////////////////////////////////////////
-////////////////////////////////////////
-////////////////////////////////////////
@@ -0,0 +1,68 @@
+type FunctionReturn = {
+    fileBase64?: string;
+    fileBase64Full?: string;
+    fileName?: string;
+    fileSize?: number;
+    fileType?: string;
+};
+
+type Param = {
+    inputFile: File;
+    allowedRegex?: RegExp;
+};
+
+/**
+ * Input File to base64
+ * ==============================================================================
+ *
+ * @description This function takes in a *SINGLE* input file from a HTML file input element.
+ * HTML file input elements usually return an array of input objects, so be sure to select the target
+ * file from the array.
+ */
+export default async function inputFileToBase64({
+    inputFile,
+    allowedRegex,
+}: Param): Promise<FunctionReturn> {
+    const allowedTypesRegex = allowedRegex ? allowedRegex : /image\/*|\/pdf/;
+
+    if (!inputFile?.type?.match(allowedTypesRegex)) {
+        window.alert(
+            `We currently don't support ${inputFile.type} file types. Support is coming soon. For now we support only images and PDFs.`
+        );
+
+        return {
+            fileName: inputFile.name,
+        };
+    }
+
+    try {
+        let fileName = inputFile.name.replace(/\..*/, "");
+
+        const fileData: string | undefined = await new Promise(
+            (resolve, reject) => {
+                var reader = new FileReader();
+                reader.readAsDataURL(inputFile);
+                reader.onload = function () {
+                    resolve(reader.result?.toString());
+                };
+                reader.onerror = function (/** @type {*} */ error: any) {
+                    console.log("Error: ", error.message);
+                };
+            }
+        );
+
+        return {
+            fileBase64: fileData?.replace(/.*?base64,/, ""),
+            fileBase64Full: fileData,
+            fileName: fileName,
+            fileSize: inputFile.size,
+            fileType: inputFile.type,
+        };
+    } catch (error: any) {
+        console.log("File Processing Error! =>", error.message);
+
+        return {
+            fileName: inputFile.name,
+        };
+    }
+}