diff --git a/03PovertyMapping/lapor.html b/03PovertyMapping/lapor.html
index 23c22c0..72b1a3e 100644
--- a/03PovertyMapping/lapor.html
+++ b/03PovertyMapping/lapor.html
@@ -1321,6 +1321,18 @@ async function submitReport() {
const upRes = await PhotoUpload.upload('report', reportId, photoInput.files);
console.log('Upload result:', upRes);
}
+
+ // Tampilkan pesan sukses dan ubah UI
+ document.getElementById('formWrap').style.display = 'none';
+ document.getElementById('successCard').style.display = 'block';
+ document.getElementById('successReportId').textContent = reportId;
+
+ // Kembalikan tombol ke state awal
+ btn.disabled = false;
+ btn.innerHTML = ' Kirim Laporan';
+
+ // Scroll ke atas untuk melihat pesan sukses
+ window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
showToast(data.message || 'Gagal mengirim laporan.', 'error', 5000);
btn.disabled = false;
@@ -1384,6 +1396,7 @@ function resetForm() {
}
// Reset photos
+ globalSelectedFiles = [];
const photoInput = document.getElementById('reportPhotos');
if (photoInput) photoInput.value = '';
const strip = document.getElementById('reportPhotoStrip');
@@ -1425,6 +1438,9 @@ function showToast(msg, type = 'success', duration = 3200) {
const strip = document.getElementById('reportPhotoStrip');
const errEl = document.getElementById('reportPhotoError');
+ // Array global untuk menampung file secara kumulatif
+ window.globalSelectedFiles = window.globalSelectedFiles || [];
+
if (!zone || !input) return;
function showErr(msg) {
@@ -1438,44 +1454,73 @@ function showToast(msg, type = 'success', duration = 3200) {
document.getElementById('reportPhotoZone')?.classList.remove('dragover');
}
+ function updateInputFiles() {
+ const dt = new DataTransfer();
+ window.globalSelectedFiles.forEach(file => dt.items.add(file));
+ input.files = dt.files;
+ }
+
function handleFiles(fileList) {
clearErr();
- // Validasi jumlah file
- if (fileList.length > PhotoUpload.MAX_FILES) {
- showErr(`Maksimal ${PhotoUpload.MAX_FILES} foto.`);
- input.value = '';
+ const newArray = Array.from(fileList);
+ const currentTotal = window.globalSelectedFiles.length + newArray.length;
+
+ // Validasi jumlah file total
+ if (currentTotal > PhotoUpload.MAX_FILES) {
+ showErr(`Maksimal ${PhotoUpload.MAX_FILES} foto. Anda sudah memilih ${window.globalSelectedFiles.length} foto.`);
+ updateInputFiles(); // kembalikan ke sebelumnya
return;
}
// Validasi tiap file
- for (let i = 0; i < fileList.length; i++) {
- const file = fileList[i];
+ for (let i = 0; i < newArray.length; i++) {
+ const file = newArray[i];
const ext = file.name.split('.').pop().toLowerCase();
if (!['jpg', 'jpeg', 'png'].includes(ext)) {
showErr(`File "${file.name}" bukan JPG/PNG.`);
- input.value = '';
+ updateInputFiles();
return;
}
if (file.size > 5 * 1024 * 1024) {
showErr(`File "${file.name}" melebihi 5 MB.`);
- input.value = '';
+ updateInputFiles();
return;
}
}
- // Tampilkan preview
+ // Tambahkan ke array global
+ window.globalSelectedFiles.push(...newArray);
+ updateInputFiles();
+
+ // Tampilkan preview kumulatif
strip.innerHTML = '';
- Array.from(fileList).forEach(file => {
+ window.globalSelectedFiles.forEach((file, index) => {
+ const wrapper = document.createElement('div');
+ wrapper.style.cssText = 'position:relative;display:inline-block;margin:4px;';
+
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.className = 'photo-thumb';
- img.style.cssText = 'width:72px;height:72px;object-fit:cover;border-radius:8px;border:1.5px solid #e2e6ef;margin:4px;cursor:pointer;';
+ img.style.cssText = 'width:72px;height:72px;object-fit:cover;border-radius:8px;border:1.5px solid #e2e6ef;cursor:pointer;';
img.title = file.name;
img.onclick = () => PhotoUpload.lightbox(img.src);
- strip.appendChild(img);
+
+ const btn = document.createElement('button');
+ btn.innerHTML = '×';
+ btn.style.cssText = 'position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.6);color:white;border:none;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:1;cursor:pointer;padding:0;';
+ btn.onclick = (e) => {
+ e.stopPropagation();
+ window.globalSelectedFiles.splice(index, 1);
+ updateInputFiles();
+ handleFiles([]); // Re-render preview
+ };
+
+ wrapper.appendChild(img);
+ wrapper.appendChild(btn);
+ strip.appendChild(wrapper);
};
reader.readAsDataURL(file);
});