Upload Foto
@@ -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 = $(`
-
- `);
-
- 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 = `
-
- `;
+ 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 = '
Tidak ada foto yang ditemukan.
';
}
},
error: function(xhr, status, error) {
console.error('Gagal memuat foto:', error);
- gallery.innerHTML = '
Gagal memuat foto. Silakan coba lagi.
';
+ 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 = '
';
+ 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