jMP <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ChainPay Image Upload and Payment Verification</title>
<style>
#dropContainer {
width: 300px;
height: 200px;
border: 2px dashed #3498db;
display: flex;
justify-content: center;
align-items: center;
color: #3498db;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
cursor: pointer;
}
#dropContainer.dragging {
background-color: #2980b9;
color: white;
}
#priceInfo {
margin: 20px;
font-size: 18px;
color: #2c3e50;
}
#qrCodeContainer {
margin: 20px auto;
text-align: center;
}
#paymentAddress {
margin: 10px 0;
font-size: 16px;
word-wrap: break-word;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
</head>
<body>
<h1>Upload Image</h1>
<div id="dropContainer">Drop your image here</div>
<div id="priceInfo"></div>
<div id="qrCodeContainer"></div>
<script>
const BSV_PER_KB = 0.000007; // Cost per KB in BSV
const bsvAddress = '13gBxzNqriAsgBioVRT9mqCEsAPRansrQJ'; // Updated BSV address
const dropContainer = document.getElementById('dropContainer');
let isProcessingPayment = false; // Flag to handle sequential payment processing
let imageSizeKB = 0; // Store image size globally
let file = null; // Store file globally
dropContainer.addEventListener('dragover', function(event) {
event.preventDefault();
dropContainer.classList.add('dragging');
});
dropContainer.addEventListener('dragleave', function() {
dropContainer.classList.remove('dragging');
});
dropContainer.addEventListener('drop', function(event) {
event.preventDefault();
dropContainer.classList.remove('dragging');
file = event.dataTransfer.files[0];
if (!file) {
alert('Please drop an image file.');
return;
}
if (isProcessingPayment) {
alert('A payment is already being processed. Please wait.');
return;
}
imageSizeKB = file.size / 1024; // Calculate size in KB
const cost = imageSizeKB * BSV_PER_KB; // Calculate cost
// Display cost information
document.getElementById('priceInfo').innerHTML = `
Image Size: ${imageSizeKB.toFixed(2)} KB<br>
Cost: ${cost.toFixed(8)} BSV
`;
// Display payment address and QR code
displayPaymentInfo(cost);
});
function displayPaymentInfo(cost) {
const qrCodeContainer = document.getElementById('qrCodeContainer');
qrCodeContainer.innerHTML = `
<div id="paymentAddress">Send ${cost.toFixed(8)} BSV to: ${bsvAddress}</div>
<canvas id="qrCodeCanvas"></canvas>
<button onclick="verifyPayment(${cost.toFixed(8)})">Verify Payment</button>
`;
// Generate QR code using QRious
const qr = new QRious({
element: document.getElementById('qrCodeCanvas'),
value: bsvAddress,
size: 200
});
}
async function verifyPayment(expectedAmount) {
if (isProcessingPayment) {
alert('A payment is already being processed. Please wait.');
return;
}
isProcessingPayment = true;
try {
const response = await fetch(`https://api.whatsonchain.com/v1/bsv/main/address/${bsvAddress}/unspent`);
const unspentOutputs = await response.json();
let totalReceived = 0;
unspentOutputs.forEach(output => {
totalReceived += output.value; // output.value is in satoshis
});
const totalReceivedBSV = totalReceived / 100000000; // Convert to BSV
if (totalReceivedBSV >= expectedAmount) {
alert('Payment confirmed on the blockchain!');
processFile(); // Proceed with processing the file after payment is confirmed
} else {
alert('Payment not confirmed on the blockchain yet.');
isProcessingPayment = false; // Reset the flag
}
} catch (error) {
console.error('Error checking blockchain:', error);
alert('Error checking blockchain.');
isProcessingPayment = false; // Reset the flag
}
}
function processFile() {
const reader = new FileReader();
reader.onloadend = function() {
const base64Data = reader.result.split(',')[1];
// Create HTML content with embedded Base64 image
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedded Image Container</title>
</head>
<body>
<div id="imageContainer" data-image="${base64Data}"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const container = document.getElementById('imageContainer');
const base64Data = container.getAttribute('data-image');
const img = document.createElement('img');
img.src = 'data:image/png;base64,' + base64Data;
document.body.appendChild(img);
});
<\/script>
</body>
</html>`;
const blob = new Blob([htmlContent], { type: 'text/html' });
const formData = new FormData();
formData.append('file', blob, 'mediaviewer.html');
fetch('http://103.250.232.182:3000/uploads', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
console.log('Response:', data);
alert('Server Response: ' + data);
getTxidAndVerify();
})
.catch(error => {
console.error('Error:', error);
alert('Error: ' + error.message);
isProcessingPayment = false; // Reset the flag
});
};
reader.readAsDataURL(file);
}
function getTxidAndVerify() {
fetch('http://103.250.232.182:3000/get-txid')
.then(response => response.json())
.then(txidData => {
if (txidData.txid) {
console.log('Received TXID:', txidData.txid);
alert('Received TXID: ' + txidData.txid);
} else {
alert('No TXID found.');
isProcessingPayment = false; // Reset the flag
}
})
.catch(error => {
console.error('Error fetching TXID:', error);
isProcessingPayment = false; // Reset the flag
});
}
</script>
</body>
</html>
https://whatsonchain.com/tx/8779ccdd54ca4e666726cda4f00a09610ec1602e1b768f7c23c7fa2dc6d1a7a7