From 314b6c88d31bc97286315cf8e764ab94cbfbb442 Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Tue, 31 Oct 2023 15:29:24 +0600
Subject: [PATCH] update QR code uploader

---
 ui/src/pages/Generator/QRcode/index.tsx | 87 +++++++++++++++++--------
 ui/src/utils/helper-functions/files.ts  | 22 -------
 2 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/ui/src/pages/Generator/QRcode/index.tsx b/ui/src/pages/Generator/QRcode/index.tsx
index 91b61238..d10c4128 100644
--- a/ui/src/pages/Generator/QRcode/index.tsx
+++ b/ui/src/pages/Generator/QRcode/index.tsx
@@ -1,4 +1,14 @@
-import { Card, Form, QRCode, Input, Badge, Space, Checkbox } from "antd";
+import {
+	Card,
+	Form,
+	QRCode,
+	Input,
+	Badge,
+	Space,
+	Checkbox,
+	Upload,
+	Button,
+} from "antd";
 import PageGrid from "components/Layouts/PageGrid";
 import React, { useEffect, useState } from "react";
 import { downloadQRCode } from "./utils/helper";
@@ -7,7 +17,6 @@ import DropdownDownloadButton from "components/General/DropdownDownloadButton";
 import Warning from "components/General/Warning";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
 import { ResponsiveInputWithLabel } from "components/General/FormComponents";
-import { handleImageUpload } from "utils/helper-functions/files";
 import QRCodeErrorBoundary from "./components/QRCodeErrorBoundary";
 import { classNames } from "utils/helper-functions/string";
 import { DataDetection } from "utils/helper-classes/ DataDetection";
@@ -31,6 +40,18 @@ const QRcode: React.FC = () => {
 		setDataType(detection.detect());
 	}, [value]);
 
+	const handleUpload = (file: File) => {
+		const reader = new FileReader();
+
+		reader.onload = () => {
+			if (typeof reader.result === "string") {
+				setIcon(reader.result);
+			}
+		};
+
+		reader.readAsDataURL(file);
+	};
+
 	return (
 		<PageGrid>
 			<Card>
@@ -59,15 +80,7 @@ const QRcode: React.FC = () => {
 							allowClear
 						/>
 					</Form.Item>
-					<Form.Item tooltip="Add border to QR code">
-						<Checkbox
-							type="checkbox"
-							value="Border"
-							onChange={(e) => setBordered(e.target.checked)}
-						>
-							Border
-						</Checkbox>
-					</Form.Item>
+
 					<PageGrid>
 						<ColorPickerWithInput
 							value={color}
@@ -95,25 +108,45 @@ const QRcode: React.FC = () => {
 							/>
 						</Form.Item>
 
-						<Form.Item>
-							<ResponsiveInputWithLabel
-								label="Icon  Size"
-								placeholder="Height"
-								value={iconSize}
-								onChange={(val) => val && setIconSize(val)}
-								min={0}
-								type="number"
-							/>
+						<Form.Item
+							label="Show Border"
+							tooltip="Add border to QR code"
+						>
+							<Checkbox
+								type="checkbox"
+								value="Border"
+								onChange={(e) => setBordered(e.target.checked)}
+							>
+								Border
+							</Checkbox>
 						</Form.Item>
 					</PageGrid>
 
-					<Form.Item label="Upload Iocn">
-						<Input
-							type="file"
-							accept="image/*"
-							onChange={(e) => handleImageUpload(e, setIcon)}
-						/>
-					</Form.Item>
+					<PageGrid>
+						<Form.Item label="Icon">
+							<Upload
+								customRequest={({ onSuccess }) => {
+									onSuccess && onSuccess("OK");
+								}}
+								beforeUpload={handleUpload}
+								listType="picture"
+							>
+								<Button disabled={false}>Upload </Button>
+							</Upload>
+						</Form.Item>
+						{icon && (
+							<Form.Item>
+								<ResponsiveInputWithLabel
+									label="Icon  Size"
+									placeholder="Height"
+									value={iconSize}
+									onChange={(val) => val && setIconSize(val)}
+									min={0}
+									type="number"
+								/>
+							</Form.Item>
+						)}
+					</PageGrid>
 				</Form>
 			</Card>
 			<Card className={classNames(style.qrcode__output, "qrcode")}>
diff --git a/ui/src/utils/helper-functions/files.ts b/ui/src/utils/helper-functions/files.ts
index 1f8b81c4..01569482 100644
--- a/ui/src/utils/helper-functions/files.ts
+++ b/ui/src/utils/helper-functions/files.ts
@@ -1,6 +1,5 @@
 import { saveAs } from "file-saver";
 import { marked } from "marked";
-import { ChangeEvent } from "react";
 
 const downloadFile = (fileContent: string, fileName: string, type: string) => {
 	saveAs(
@@ -26,26 +25,6 @@ const downloadTextFile = (fileContent: string, fileName: string) => {
 	downloadFile(fileContent, fileName, "text/plain;charset=utf-8");
 };
 
-type ImageCallback = (dataUrl: string) => void;
-
-const handleImageUpload = (
-	e: ChangeEvent<HTMLInputElement>,
-	callback: ImageCallback
-) => {
-	if (e.target.files && e.target.files.length > 0) {
-		const file = e.target.files[0];
-		const reader = new FileReader();
-
-		reader.onload = () => {
-			if (typeof reader.result === "string") {
-				callback(reader.result);
-			}
-		};
-
-		reader.readAsDataURL(file);
-	}
-};
-
 const getFileExtension = (fileName: string) => {
 	const ext = fileName.split(".").pop();
 	if (ext) {
@@ -66,7 +45,6 @@ export {
 	downloadFile,
 	downloadPDFFile,
 	downloadTextFile,
-	handleImageUpload,
 	getFileExtension,
 	removeFileExtension,
 };