admin/manjapro_v6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pisah server penyimpanan dan update payment gateway

Browse Source
This commit is contained in:
WD - Dev
2025-11-10 17:44:35 +07:00
parent 6017dfd369
commit 4a7c248fff
3044 changed files with 1586515 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/customjs/upload.js
Vendored
+295 -174
View File
@@ -1,51 +1,285 @@
// document.addEventListener('DOMContentLoaded', function() {
// fetch('list_data/get_upload_file.php')
// .then(response => response.json())
// .then(data => {
// data.forEach(item => {
// const uploadImage = document.querySelector(`.uploadImage[data-id="${item.formId}"]`);
// if (uploadImage) {
// const preview = uploadImage.querySelector('img');
// const spanText = uploadImage.querySelector('span');
// preview.src = `https://storage.manjapro.net/files/user/${item.fileName}`;
// preview.style.display = 'block';
// spanText.style.display = 'none';
// }
// });
// });
// });
// // upload.js
// document.querySelectorAll('.uploadImage').forEach(uploadImage => {
// uploadImage.addEventListener('click', function() {
// const fileInput = document.createElement('input');
// fileInput.type = 'file';
// fileInput.accept = 'image/*';
// fileInput.style.display = 'none';
// fileInput.addEventListener('change', function() {
// const file = this.files[0];
// const preview = uploadImage.querySelector('img');
// const spanText = uploadImage.querySelector('span');
// // Menampilkan preview gambar
// const reader = new FileReader();
// reader.onload = function(e) {
// preview.src = e.target.result;
// preview.style.display = 'block';
// spanText.style.display = 'none';
// compressAndUploadImage(file, uploadImage.dataset.id, uploadImage);
// };
// reader.readAsDataURL(file);
// });
// document.body.appendChild(fileInput);
// fileInput.click();
// });
// });
// function compressAndUploadImage(file, formId, uploadImage) {
// const reader = new FileReader();
// reader.readAsDataURL(file);
// reader.onload = function(event) {
// const img = new Image();
// img.src = event.target.result;
// img.onload = function() {
// const canvas = document.createElement('canvas');
// const ctx = canvas.getContext('2d');
// const maxWidth = img.width;
// const maxHeight = img.height;
// canvas.width = maxWidth;
// canvas.height = maxHeight;
// ctx.drawImage(img, 0, 0, maxWidth, maxHeight);
// let quality = 0.9;
// let dataUrl = canvas.toDataURL('image/jpeg', quality);
// // Mengurangi kualitas sampai ukuran gambar kurang dari 200KB
// while (dataUrl.length > 200 * 1024) {
// quality -= 0.05;
// dataUrl = canvas.toDataURL('image/jpeg', quality);
// }
// fetch(dataUrl)
// .then(res => res.blob())
// .then(blob => {
// const formData = new FormData();
// formData.append('file', blob, file.name);
// formData.append('formId', formId);
// const xhr = new XMLHttpRequest();
// xhr.open('POST', 'list_data/upload_file.php', true);
// // Menangani proses upload dan persentase
// xhr.upload.onprogress = function(event) {
// if (event.lengthComputable) {
// const percentComplete = (event.loaded / event.total) * 100;
// const progressBar = uploadImage.querySelector('.progressBar');
// progressBar.style.width = percentComplete + '%';
// uploadImage.querySelector('.progressContainer').style.display = 'block';
// }
// };
// xhr.onload = function() {
// if (xhr.status === 200) {
// console.log('Success:', xhr.responseText);
// showUploadAnimation(uploadImage);
// } else {
// console.error('Error:', xhr.responseText);
// }
// };
// xhr.send(formData);
// });
// };
// };
// }
// function showUploadAnimation(uploadImage) {
// const uploaded = document.createElement('div');
// uploaded.innerText = 'Uploaded!';
// uploaded.style.position = 'absolute';
// uploaded.style.top = '0';
// uploaded.style.left = '0';
// uploaded.style.width = '100%';
// uploaded.style.height = '100%';
// uploaded.style.background = 'rgba(0, 128, 0, 0.5)';
// uploaded.style.color = 'white';
// uploaded.style.fontSize = '24px';
// uploaded.style.display = 'flex';
// uploaded.style.alignItems = 'center';
// uploaded.style.justifyContent = 'center';
// uploadImage.appendChild(uploaded);
// setTimeout(() => {
// uploaded.style.animation = 'fadeOut 2s forwards';
// setTimeout(() => {
// uploadImage.removeChild(uploaded);
// }, 2000);
// }, 1000); // Menampilkan teks "Uploaded!" selama 1 detik sebelum memulai animasi
// }
document.addEventListener('DOMContentLoaded', function() {
// Tambah CSS otomatis (tanpa ganggu style .uploadImage)
const style = document.createElement('style');
style.innerHTML = `
.progressCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.progressSvg {
position: absolute;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.progressSvg .bg {
fill: none;
stroke: #eee;
stroke-width: 2;
}
.progressSvg .progress {
fill: none;
stroke: #04c224;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 100, 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.3s;
}
.progressText {
position: absolute;
font-weight: bold;
font-size: 18px;
color: #333;
}`;
document.head.appendChild(style);
// URL gambar default (jika tidak ada file)
const defaultImage = 'https://storage.manjapro.net/files/user/default.jpg';
// Ambil data file existing dari server
fetch('list_data/get_upload_file.php')
.then(response => response.json())
.then(data => {
// Tandai semua uploadImage sebagai belum diisi dulu
document.querySelectorAll('.uploadImage').forEach(upload => {
const preview = upload.querySelector('img');
const spanText = upload.querySelector('span');
preview.src = defaultImage;
preview.style.display = 'block';
spanText.style.display = 'none';
});
// Lalu isi jika ada data dari server
data.forEach(item => {
const uploadImage = document.querySelector(`.uploadImage[data-id="${item.formId}"]`);
if (uploadImage) {
const preview = uploadImage.querySelector('img');
const spanText = uploadImage.querySelector('span');
preview.src = `img/user/${item.fileName}`;
const fileName = item.fileName && item.fileName.trim() !== ''
? item.fileName
: 'default.jpg';
preview.src = `https://storage.manjapro.net/files/user/${fileName}`;
// preview.src = `https://storage.manjapro.net/files/user/${item.fileName}`;
preview.style.display = 'block';
spanText.style.display = 'none';
}
});
});
});
// upload.js
document.querySelectorAll('.uploadImage').forEach(uploadImage => {
uploadImage.addEventListener('click', function() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.display = 'none';
fileInput.addEventListener('change', function() {
const file = this.files[0];
const preview = uploadImage.querySelector('img');
const spanText = uploadImage.querySelector('span');
// Menampilkan preview gambar
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
})
.catch(() => {
// Kalau gagal fetch (misal offline), isi semua dengan default
document.querySelectorAll('.uploadImage').forEach(upload => {
const preview = upload.querySelector('img');
const spanText = upload.querySelector('span');
preview.src = defaultImage;
preview.style.display = 'block';
spanText.style.display = 'none';
compressAndUploadImage(file, uploadImage.dataset.id, uploadImage);
};
reader.readAsDataURL(file);
});
});
document.body.appendChild(fileInput);
fileInput.click();
// Klik upload
document.querySelectorAll('.uploadImage').forEach(uploadImage => {
uploadImage.addEventListener('click', function() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.display = 'none';
fileInput.addEventListener('change', function() {
const file = this.files[0];
if (!file) return;
// Maksimum 20 MB
if (file.size > 20 * 1024 * 1024) {
alert('Ukuran file maksimal 20MB.');
return;
}
const preview = uploadImage.querySelector('img');
const spanText = uploadImage.querySelector('span');
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = 'block';
spanText.style.display = 'none';
compressAndUploadImage(file, uploadImage.dataset.id, uploadImage);
};
reader.readAsDataURL(file);
});
document.body.appendChild(fileInput);
fileInput.click();
});
});
});
// Membuat progres circle di tengah
function createProgressCircle(uploadImage) {
let existing = uploadImage.querySelector('.progressCircle');
if (existing) return existing;
const circle = document.createElement('div');
circle.className = 'progressCircle';
circle.innerHTML = `
<svg class="progressSvg" viewBox="0 0 36 36">
<path class="bg" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="progress" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
<div class="progressText">0%</div>`;
uploadImage.appendChild(circle);
return circle;
}
// Kompres gambar dan upload
function compressAndUploadImage(file, formId, uploadImage) {
const reader = new FileReader();
reader.readAsDataURL(file);
@@ -56,17 +290,28 @@ function compressAndUploadImage(file, formId, uploadImage) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = img.width;
const maxHeight = img.height;
canvas.width = maxWidth;
canvas.height = maxHeight;
ctx.drawImage(img, 0, 0, maxWidth, maxHeight);
let width = img.width;
let height = img.height;
const maxDim = 1920;
// Resize kalau terlalu besar
if (width > height && width > maxDim) {
height = Math.round(height * (maxDim / width));
width = maxDim;
} else if (height > maxDim) {
width = Math.round(width * (maxDim / height));
height = maxDim;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
let quality = 0.9;
let dataUrl = canvas.toDataURL('image/jpeg', quality);
// Mengurangi kualitas sampai ukuran gambar kurang dari 200KB
while (dataUrl.length > 200 * 1024) {
// Turunkan kualitas sampai di bawah 500 KB
while (dataUrl.length > 500 * 1024 && quality > 0.05) {
quality -= 0.05;
dataUrl = canvas.toDataURL('image/jpeg', quality);
}
@@ -81,22 +326,31 @@ function compressAndUploadImage(file, formId, uploadImage) {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'list_data/upload_file.php', true);
// Menangani proses upload dan persentase
const progressContainer = createProgressCircle(uploadImage);
const progressPath = progressContainer.querySelector('.progressSvg .progress');
const progressText = progressContainer.querySelector('.progressText');
progressContainer.style.display = 'flex';
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
const progressBar = uploadImage.querySelector('.progressBar');
progressBar.style.width = percentComplete + '%';
uploadImage.querySelector('.progressContainer').style.display = 'block';
const dashoffset = 100 - percentComplete;
progressPath.style.strokeDashoffset = dashoffset;
progressText.textContent = Math.round(percentComplete) + '%';
}
};
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Success:', xhr.responseText);
showUploadAnimation(uploadImage);
progressPath.style.strokeDashoffset = 0;
progressText.textContent = 'Uploaded';
progressText.style.color = '#04c224';
setTimeout(() => {
progressContainer.style.display = 'none';
}, 1500);
} else {
console.error('Error:', xhr.responseText);
alert('Upload gagal.');
console.error(xhr.responseText);
}
};
@@ -105,136 +359,3 @@ function compressAndUploadImage(file, formId, uploadImage) {
};
};
}
function showUploadAnimation(uploadImage) {
const uploaded = document.createElement('div');
uploaded.innerText = 'Uploaded!';
uploaded.style.position = 'absolute';
uploaded.style.top = '0';
uploaded.style.left = '0';
uploaded.style.width = '100%';
uploaded.style.height = '100%';
uploaded.style.background = 'rgba(0, 128, 0, 0.5)';
uploaded.style.color = 'white';
uploaded.style.fontSize = '24px';
uploaded.style.display = 'flex';
uploaded.style.alignItems = 'center';
uploaded.style.justifyContent = 'center';
uploadImage.appendChild(uploaded);
setTimeout(() => {
uploaded.style.animation = 'fadeOut 2s forwards';
setTimeout(() => {
uploadImage.removeChild(uploaded);
}, 2000);
}, 1000); // Menampilkan teks "Uploaded!" selama 1 detik sebelum memulai animasi
}
// // upload.js
// document.getElementById('uploadImage').addEventListener('click', function() {
// document.getElementById('fileInput').click();
// });
// document.getElementById('fileInput').addEventListener('change', function() {
// var file = this.files[0];
// var preview = document.getElementById('preview');
// var spanText = document.querySelector('#uploadImage span');
// // Menampilkan preview gambar
// var reader = new FileReader();
// reader.onload = function(e) {
// preview.src = e.target.result;
// preview.style.display = 'block';
// spanText.style.display = 'none';
// compressAndUploadImage(file);
// };
// reader.readAsDataURL(file);
// });
// function compressAndUploadImage(file) {
// var reader = new FileReader();
// reader.readAsDataURL(file);
// reader.onload = function(event) {
// var img = new Image();
// img.src = event.target.result;
// img.onload = function() {
// var canvas = document.createElement('canvas');
// var ctx = canvas.getContext('2d');
// var maxWidth = img.width;
// var maxHeight = img.height;
// canvas.width = maxWidth;
// canvas.height = maxHeight;
// ctx.drawImage(img, 0, 0, maxWidth, maxHeight);
// var quality = 0.9;
// var dataUrl = canvas.toDataURL('image/jpeg', quality);
// // Mengurangi kualitas sampai ukuran gambar kurang dari 200KB
// while (dataUrl.length > 200 * 1024) {
// quality -= 0.05;
// dataUrl = canvas.toDataURL('image/jpeg', quality);
// }
// fetch(dataUrl)
// .then(res => res.blob())
// .then(blob => {
// var formData = new FormData();
// formData.append('file', blob, file.name);
// var xhr = new XMLHttpRequest();
// xhr.open('POST', 'list_data/upload_file.php', true);
// // Menangani proses upload dan persentase
// xhr.upload.onprogress = function(event) {
// if (event.lengthComputable) {
// var percentComplete = (event.loaded / event.total) * 100;
// var progressBar = document.getElementById('progressBar');
// progressBar.style.width = percentComplete + '%';
// document.getElementById('progressContainer').style.display = 'block';
// }
// };
// xhr.onload = function() {
// if (xhr.status === 200) {
// console.log('Success:', xhr.responseText);
// showUploadAnimation();
// } else {
// console.error('Error:', xhr.responseText);
// }
// };
// xhr.send(formData);
// });
// };
// };
// }
// function showUploadAnimation() {
// var uploadImage = document.getElementById('uploadImage');
// var uploaded = document.createElement('div');
// uploaded.innerText = 'Loading...!';
// uploaded.style.position = 'absolute';
// uploaded.style.top = '0';
// uploaded.style.left = '0';
// uploaded.style.width = '100%';
// uploaded.style.height = '100%';
// uploaded.style.background = 'rgba(212, 212, 212, 0.7)';
// uploaded.style.color = 'black';
// uploaded.style.fontSize = '24px';
// uploaded.style.display = 'flex';
// uploaded.style.alignItems = 'center';
// uploaded.style.justifyContent = 'center';
// uploadImage.appendChild(uploaded);
// setTimeout(() => {
// uploaded.style.animation = 'fadeOut 2s forwards';
// setTimeout(() => {
// uploadImage.removeChild(uploaded);
// }, 2000);
// }, 1000); // Menampilkan teks "Uploaded!" selama 1 detik sebelum memulai animasi
// }