daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(surveyor): perbaikan upload foto

Browse Source
This commit is contained in:
majid
2025-02-11 11:55:42 +07:00
parent 05dfaf2c83
commit 30e41c1cab
2 changed files with 125 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
resources/views/surveyor/components/foto.blade.php
View File

@@ -176,7 +176,7 @@
<input type="hidden" name="nomor_registrasi" value="{{ $permohonan->nomor_registrasi }}">
<div class="card border border-agi-100 bg-white rounded-lg shadow-md">
<div class="card border border-agi-100 rounded-lg shadow-md">
<div class="card-body">
<div class=" py-4 flex items-center justify-between">
<h1 class="text-md font-medium text-gray-900">Upload Foto</h1>
@@ -273,10 +273,11 @@
Dropzone.autoDiscover = false;
document.addEventListener('DOMContentLoaded', function() {
let myDropzone = null;
let uploadQueue = 0;
let uploadBatch = [];
function initDropzone(selector, paramName) {
try {
// Pastikan elemen ada sebelum membuat Dropzone
const dropzoneElement = document.querySelector(selector);
if (!dropzoneElement) {
console.error(`Dropzone element not found: ${selector}`);
@@ -286,7 +287,7 @@
myDropzone = new Dropzone(selector, {
url: "{{ route('surveyor.storeFoto') }}",
paramName: paramName,
maxFilesize: 10,
maxFilesize: 30,
acceptedFiles: 'image/*',
uploadMultiple: false,
parallelUploads: 1,
@@ -304,101 +305,41 @@
param_name: paramName,
nomor_registrasi: '{{ $permohonan->nomor_registrasi ?? '' }}',
},
error: function(file, response) {
Swal.fire({
icon: 'error',
title: 'Upload Gagal',
text: response.message || 'Error tidak diketahui'
});
addedfiles: function(files) {
uploadQueue += files.length;
uploadBatch = Array.from(files);
if (files.length > 0) showLoadingOverlay();
},
error: function(file, response) {
handleUploadComplete(file, false, response.message);
},
success: function(file, response) {
if (response.success) {
Swal.fire({
icon: 'success',
title: 'Upload Berhasil',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
updatePhotoGallery();
const fileData = {
path: response.path || file.path,
name: file.name,
description: '',
category: 'lainnya',
sub: '',
param_name: paramName
};
addEditAndDeleteButtons(file, fileData);
handleUploadComplete(file, true);
} else {
handleUploadComplete(file, false, response.message);
}
},
init: function() {
// var myDropzone = this;
var loadingIndicator = $(`
<div class="loading-overlay" style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
">
<div class="loader"></div>
</div>
`);
var $dropzoneElement = $(selector);
$dropzoneElement.css('position', 'relative');
$dropzoneElement.append(loadingIndicator);
$.ajax({
url: "{{ route('surveyor.getFoto') }}",
method: 'GET',
data: {
permohonan_id: {{ $permohonan->id ?? 0 }},
dokument_id: '{{ request('dokument') ?? '' }}',
param_name: paramName
},
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
beforeSend: function() {
loadingIndicator.show();
},
success: function(response) {
if (response.fotos && response.fotos.length) {
response.fotos.forEach(function(foto) {
var mockFile = {
name: foto.name,
size: foto.size || 12345,
originalPath: foto.path
};
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile,
foto.path);
myDropzone.emit("complete", mockFile);
addEditAndDeleteButtons(mockFile, {
path: foto.path,
name: foto.name,
description: foto
.description || '',
category: foto.category ||
'lainnya',
sub: foto.sub || '',
param_name: paramName
});
});
}
},
error: function(xhr, status, error) {
console.error('Gagal memuat foto:', error);
},
complete: function() {
loadingIndicator.hide();
}
});
loadExistingPhotos(this, paramName);
}
});
return myDropzone;
} catch (error) {
console.error('Dropzone initialization error:', error);
@@ -406,29 +347,8 @@
}
}
function updatePhotoGallery() {
const gallery = document.querySelector('#upload-dropzone');
if (!myDropzone) {
console.error('Dropzone is not initialized');
return;
}
gallery.innerHTML = `
<div style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;">
<div class="loader"></div>
</div>
`;
function loadExistingPhotos(dropzone, paramName) {
showLoadingOverlay();
$.ajax({
url: "{{ route('surveyor.getFoto') }}",
@@ -436,15 +356,13 @@
data: {
permohonan_id: {{ $permohonan->id ?? 0 }},
dokument_id: '{{ request('dokument') ?? '' }}',
param_name: 'upload_foto'
param_name: paramName
},
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
success: function(response) {
if (response.fotos && response.fotos.length) {
gallery.innerHTML = '';
response.fotos.forEach(function(foto) {
var mockFile = {
name: foto.name,
@@ -452,33 +370,113 @@
originalPath: foto.path
};
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, foto.path);
myDropzone.emit("complete", mockFile);
dropzone.emit("addedfile", mockFile);
dropzone.emit("thumbnail", mockFile, foto.path);
dropzone.emit("complete", mockFile);
addEditAndDeleteButtons(mockFile, {
path: foto.path,
name: foto.name,
description: foto.description || '',
category: foto.category || 'lainnya',
sub: foto.sub || '',
param_name: 'upload_foto'
param_name: paramName
});
});
} else {
gallery.innerHTML = '<p>Tidak ada foto yang ditemukan.</p>';
}
},
error: function(xhr, status, error) {
console.error('Gagal memuat foto:', error);
gallery.innerHTML = '<p>Gagal memuat foto. Silakan coba lagi.</p>';
showErrorMessage('Gagal memuat foto yang ada');
},
complete: function() {
gallery.innerHTML = gallery.innerHTML.includes('loader') ? '' : gallery
.innerHTML;
hideLoadingOverlay();
}
});
}
function handleUploadComplete(file, isSuccess, errorMessage = null) {
uploadQueue--;
const index = uploadBatch.indexOf(file);
if (index > -1) {
uploadBatch.splice(index, 1);
}
// Show individual error if any
if (!isSuccess && errorMessage) {
showErrorMessage(errorMessage);
}
// If all uploads are complete
if (uploadQueue === 0) {
hideLoadingOverlay();
// Show final status message
const totalFiles = uploadBatch.length + 1; // +1 for current file
if (totalFiles === 1) {
// Single file upload
if (isSuccess) {
showSuccessMessage('Foto berhasil diupload');
}
} else {
// Multiple files upload
showSuccessMessage(`${totalFiles} foto berhasil diupload`);
}
// Reset batch
uploadBatch = [];
}
}
function showLoadingOverlay() {
const overlay = document.querySelector('.loading-overlay');
if (!overlay) {
const dropzoneElement = document.querySelector('#upload-dropzone');
const loadingOverlay = document.createElement('div');
loadingOverlay.className = 'loading-overlay';
loadingOverlay.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
`;
loadingOverlay.innerHTML = '<div class="loader"></div>';
dropzoneElement.appendChild(loadingOverlay);
} else {
overlay.style.display = 'flex';
}
}
function hideLoadingOverlay() {
const overlay = document.querySelector('.loading-overlay');
if (overlay) overlay.style.display = 'none';
}
function showSuccessMessage(message) {
Swal.fire({
icon: 'success',
title: message,
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 1500
});
}
function showErrorMessage(message) {
Swal.fire({
icon: 'error',
title: 'Upload Gagal',
text: message || 'Error tidak diketahui'
});
}
// Inisialisasi Dropzone untuk elemen awal dengan pengecekan
function safeInitDropzone(selector, paramName) {
setTimeout(() => {
@@ -492,15 +490,12 @@
// Inisialisasi dropzone untuk elemen awal
safeInitDropzone('#upload-dropzone', 'upload_foto');
// Event listener untuk menambah lantai
});
let fotoObjekJaminan = @json($fotoObjekJaminan);
// Fungsi untuk membuka modal dan mengatur data
function openEditDataModal(file, response) {
window.openEditDrawer = function(file, response) {
// Mengisi data input berdasarkan respons
document.getElementById('editDataFilePath').value = response.path || '';
document.getElementById('editDataName').value = response.name || '';
@@ -567,12 +562,10 @@
cssMaxHeight: 500
});
// openModal('editPhotoModal');
}
function addEditAndDeleteButtons(file, response) {
window.addEditAndDeleteButtons = function(file, response) {
const filePreviewElement = file.previewElement;
@@ -592,7 +585,8 @@
editButton.style.cursor = 'pointer';
editButton.setAttribute("data-drawer-toggle", "#drawer_2_2");
editButton.onclick = function() {
openEditDataModal(file, response);
// e.preventDefault();
openEditDrawer(file, response);
};
// Tombol Hapus