fix(surveyor): perbaikan upload foto
This commit is contained in:
majid
@@ -81,7 +81,7 @@ use Modules\Lpj\Http\Requests\SurveyorRequest;
|
||||
use Modules\Lpj\Http\Requests\FormSurveyorRequest;
|
||||
use Modules\Lpj\Emails\SendJadwalKunjunganEmail;
|
||||
use App\Helpers\Lpj;
|
||||
|
||||
use Modules\Lpj\Models\Authorization;
|
||||
class SurveyorController extends Controller
|
||||
{
|
||||
public $user;
|
||||
@@ -366,7 +366,7 @@ class SurveyorController extends Controller
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Data berhasil disimpan',
|
||||
'file' => $newFoto
|
||||
'path' => $newFoto[0]['path'],
|
||||
], 200);
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user