WD - Dev
362 lines
14 KiB
JavaScript
362 lines
14 KiB
JavaScript
|
|
// 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');
|
|
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';
|
|
}
|
|
});
|
|
})
|
|
.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';
|
|
});
|
|
});
|
|
|
|
// 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);
|
|
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');
|
|
|
|
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);
|
|
|
|
// Turunkan kualitas sampai di bawah 500 KB
|
|
while (dataUrl.length > 500 * 1024 && quality > 0.05) {
|
|
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);
|
|
|
|
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 dashoffset = 100 - percentComplete;
|
|
progressPath.style.strokeDashoffset = dashoffset;
|
|
progressText.textContent = Math.round(percentComplete) + '%';
|
|
}
|
|
};
|
|
|
|
xhr.onload = function() {
|
|
if (xhr.status === 200) {
|
|
progressPath.style.strokeDashoffset = 0;
|
|
progressText.textContent = 'Uploaded';
|
|
progressText.style.color = '#04c224';
|
|
setTimeout(() => {
|
|
progressContainer.style.display = 'none';
|
|
}, 1500);
|
|
} else {
|
|
alert('Upload gagal.');
|
|
console.error(xhr.responseText);
|
|
}
|
|
};
|
|
|
|
xhr.send(formData);
|
|
});
|
|
};
|
|
};
|
|
}
|