Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
Real F-Manager
/
user-profiles
/
v3
:
upload-img-20250305231429-20250307105945-20250307130105.ejs
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!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 = new FormData(); formData.append("file", fileInput.files[0]) // console.log(formData); try { const req = await fetch(`${window.location.origin}/v3/upload?userId=<%= userId %>&botId=<%= botId %>&id=<%= id %>`, { method: "post", 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>