File "upload-img-20250305231424-20250306004350-20250315172356.ejs"

Full Path: /home/wiomgjqe/neduas.store/v3/partials/public/partials/partials/upload-img-20250305231424-20250306004350-20250315172356.ejs
File size: 6.83 KB
MIME-type: text/html
Charset: utf-8

<!doctype html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Manual Payment</title>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
		/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
		/>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.js"></script>
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap-sweetalert@1.0.1/dist/sweetalert.min.css"
			rel="stylesheet"
		/>
		<style>
			/* Import Google font - Poppins */
			@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: "Poppins", sans-serif;
			}
			body {
				min-height: 100vh;
				background: #6990f2;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			::selection {
				color: #fff;
				background: #6990f2;
			}
			.wrapper {
				width: 430px;
				background: #fff;
				border-radius: 5px;
				padding: 30px;
				box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.05);
			}
			.wrapper header {
				color: #6990f2;
				font-size: 27px;
				font-weight: 600;
				text-align: center;
			}
			.wrapper form {
				height: 167px;
				display: flex;
				cursor: pointer;
				margin: 30px 0;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				border-radius: 5px;
				border: 2px dashed #6990f2;
			}
			form :where(i, p) {
				color: #6990f2;
			}
			form i {
				font-size: 50px;
			}
			form p {
				margin-top: 15px;
				font-size: 16px;
			}

			section .row {
				margin-bottom: 10px;
				background: #e9f0ff;
				list-style: none;
				padding: 15px 20px;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			section .row i {
				color: #6990f2;
				font-size: 30px;
			}
			section .details span {
				font-size: 14px;
			}
			.uploaded-area {
				max-height: 232px;
				overflow-y: scroll;
			}
			.uploaded-area::-webkit-scrollbar {
				width: 0px;
			}
			.uploaded-area .row .content {
				display: flex;
				align-items: center;
			}
			.uploaded-area .row .details {
				display: flex;
				margin-left: 15px;
				flex-direction: column;
			}
			.uploaded-area .row .details .size {
				color: #404040;
				font-size: 11px;
			}
			.uploaded-area i.fa-check {
				font-size: 16px;
			}
			.submit-btn {
				margin-top: 10px;
				border: none;
				background: #89a8f7;
				color: white;
				font-weight: 600;
				font-size: 18px;
				padding: 10px 20px;
				border-radius: 5px;
				width: 100%;
				text-align: center;
			}
			.submit-btn:hover {
				background: #89a8f7;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div
				id="d-alert"
				class="alert alert-danger fade hide w-100 text-center position-fixed top-0 start-0"
				role="alert"
			>
				Your Payment Screenshot size shouldn't be more than 1mb
			</div>
			<header>Upload Payment Screenshot</header>
			<form action="#">
				<input
					class="file-input"
					type="file"
					accept="image/*"
					name="file"
					hidden
				/>
				<i class="fas fa-cloud-upload-alt"></i>
				<p>Browse File to Upload</p>
			</form>
			<section class="uploaded-area"></section>
			<button class="submit-btn" disabled>Submit</button>
		</div>
		<script>
			const form = document.querySelector("form"),
				fileInput = document.querySelector(".file-input"),
				uploadedArea = document.querySelector(".uploaded-area"),
				submitBtn = document.querySelector(".submit-btn");
			var screenshot;

			form.addEventListener("click", () => {
				fileInput.click();
			});

			submitBtn.addEventListener("click", () => {
				swal(
					{
						title: "Submit Payment Image",
						text: "Once the payment is verified by the admin, the respective payment amount will be credited to your account",
						type: "info",
						showCancelButton: true,
						closeOnConfirm: false,
						showLoaderOnConfirm: true
					},
					uploadFile
				);
			});

			fileInput.onchange = ({ target }) => {
				var file = target.files[0];
				if (file.size > 1024 * 1024) {
					target.value = "";
					var alert = document.querySelector("#d-alert");
					alert.classList.add("show");
					setTimeout(() => {
						alert.classList.remove("show");
					}, 5000);
					return;
				}
				var reader = new FileReader();
				reader.onloadend = () => {
					screenshot = reader.result.toString();
				};
				file && reader.readAsDataURL(file);

				if (file) {
					let fileName = file.name;
					if (fileName.length >= 12) {
						let splitName = fileName.split(".");
						fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
					}
					const uploadedHTML = `<li class="row">
      <div class="content upload">
        <i class="fas fa-file-image"></i>
        <div class="details">
          <span class="name">${fileName} <span class="d-none">• Uploaded</span></span>
          <span class="size">${formatFileSize(file.size)}</span>
        </div>
      <i class="fas fa-check d-none"></i>
      </div>
    </li>`;

					uploadedArea.innerHTML = uploadedHTML;
					submitBtn.removeAttribute("disabled");
					submitBtn.style.background = "#6990f2";
					screenshot = file;
				}
			};

			async function uploadFile() {
				var data = screenshot;
				const formData = JSON.stringify({ data });
				// console.log(formData);
				try {
					const req = await fetch(`${window.location.origin}/v2/upload?userId=<%= userId %>&botId=<%= botId %>&id=<%= id %>`, {
						method: "post",
						headers: {
							"Content-Type": "application/json"
						},
						body: formData
					});
					const res = await req.json();

					swal({
						title: res.status == 1 ? "Success" : "Error",
						text: res.message,
						imageUrl: res.status == 1 ? "https://www.freeiconspng.com/uploads/success-icon-10.png" : "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
					});
					if(res.status == 1){
					document
						.querySelectorAll(".d-none")
						.forEach((el) => el.classList.remove("d-none"));
					}
				} catch (error) {
					console.error("Error uploading file:", error);
					swal({
						title: "Error",
						text: "Unable to submit Image",
						imageUrl: "https://www.freeiconspng.com/uploads/high-resolution-photo-of-the-red-exclamation-point-error-23.png"
					});
				}
			}

			// Helper function to format file size
			function formatFileSize(bytes) {
				if (bytes < 1024) return bytes + " bytes";
				if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
				return (bytes / (1024 * 1024)).toFixed(2) + " MB";
			}
		</script>
	</body>
</html>