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>