update denah bisa upload pdf

This commit is contained in:
majid
2024-12-10 08:55:30 +07:00
parent bccc89f794
commit a4139c1e19
2 changed files with 76 additions and 23 deletions

View File

@@ -217,7 +217,7 @@ class SurveyorController extends Controller
try { try {
$maxSize = getMaxFileSize('Foto'); $maxSize = getMaxFileSize('Foto');
$validatedData = $request->validate([ $validatedData = $request->validate([
'foto_denah' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:'. $maxSize, 'foto_denah' => 'required|file|mimes:jpeg,jpg,png,pdf,svg|max:'. $maxSize,
'luas' => 'required|numeric', 'luas' => 'required|numeric',
'permohonan_id' => 'required', 'permohonan_id' => 'required',
'jenis_jaminan_id' => 'required' 'jenis_jaminan_id' => 'required'
@@ -843,7 +843,7 @@ class SurveyorController extends Controller
$inspectionData = json_decode($inspeksi->data_form, true); $inspectionData = json_decode($inspeksi->data_form, true);
if (json_last_error() !== JSON_ERROR_NONE) { if (json_last_error() !== JSON_ERROR_NONE) {
throw new \Exception('Error decoding inspection data: ' . json_last_error_msg()); throw new \Exception('Harap mengisi form inspeksi terlebih dahulu.');
} }
if ($inspeksi->data_pembanding) { if ($inspeksi->data_pembanding) {

View File

@@ -5,6 +5,15 @@
@endsection @endsection
@section('content') @section('content')
<style>
.pdf-preview {
width: 100%;
max-width: 100%;
border: 1px solid #ddd;
margin-top: 10px;
}
</style>
@include('lpj::assetsku.includenya') @include('lpj::assetsku.includenya')
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto"> <div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
<div class="card min-w-full"> <div class="card min-w-full">
@@ -130,34 +139,40 @@
<input type="hidden" value="{{ $permohonan->id }}" name="permohonan_id"> <input type="hidden" value="{{ $permohonan->id }}" name="permohonan_id">
<input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}"> <input type="hidden" name="jenis_jaminan_id" value="{{ request('jenis_jaminan') }}">
<div class="mt-2"> <div class="mt-2">
<div class=""max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden"> <div class=" mx-auto overflow-hidden">
<div>
</div>
<div class="flex flex-wrap gap-4" style="margin-top: 20px"> <div class="flex flex-wrap gap-4" style="margin-top: 20px">
<div class="flex w-full items-center justify-center gap-4"> <div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56"> <label class="form-label max-w-56">
<span class="form-label">Upload Denah</span> <span class="form-label">Upload Denah (Foto/PDF)</span>
</label> </label>
<div class="w-full grid gap-5"> <div class="w-full grid gap-5">
<img id="foto_denah-preview" <!-- Preview Container -->
src="{{ isset($formDenah['foto_denah']) ? asset('storage/' . old('foto_denah', $formDenah['foto_denah'])) : '' }}" <div id="preview-container">
alt="Gambar foto_denah" <!-- Image preview -->
style="{{ isset($formDenah['foto_denah']) ? 'width: 30rem;' : 'display: none;' }}"> <img id="foto_denah-preview"
src="{{ isset($formDenah['foto_denah']) ? asset('storage/' . old('foto_denah', $formDenah['foto_denah'])) : '' }}"
alt="Gambar foto_denah"
style="{{ isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') === false ? 'width: 30rem;' : 'display: none;' }}">
<!-- PDF preview -->
@if (isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') !== false)
<div id="pdf-preview" class="pdf-preview">
<embed src="{{ asset('storage/' . $formDenah['foto_denah']) }}"
type="application/pdf" width="100%" height="500px">
</div>
@endif
</div>
<div class="input-group w-full flex gap-2"> <div class="input-group w-full flex gap-2">
<input type="file" <input type="file"
value="{{ old('foto_denah', isset($formDenah['foto_denah']) ? $formDenah['foto_denah'] : '') }}" value="{{ old('foto_denah', isset($formDenah['foto_denah']) ? $formDenah['foto_denah'] : '') }}"
name="foto_denah" class="file-input file-input-bordered w-full " name="foto_denah" class="file-input file-input-bordered w-full"
accept="image/*" onchange="previewImage(this, 'foto_denah-preview')"> accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<em id="error-foto_denah" class="alert text-danger text-sm"></em> <em id="error-foto_denah" class="alert text-danger text-sm"></em>
</div> </div>
</div> </div>
@@ -202,18 +217,56 @@
@push('scripts') @push('scripts')
<script> <script>
function previewImage(input, previewId) { function previewFile(input) {
if (input.files && input.files[0]) { const previewContainer = document.getElementById('preview-container');
var reader = new FileReader(); const imagePreview = document.getElementById('foto_denah-preview');
reader.onload = function(e) { const file = input.files[0];
$('#' + previewId).attr('src', e.target.result).show();
// Hapus preview PDF yang ada (jika ada)
const existingPdfPreview = document.getElementById('pdf-preview');
if (existingPdfPreview) {
existingPdfPreview.remove();
}
if (file) {
// Cek tipe file
if (file.type.startsWith('image/')) {
// Jika file adalah gambar
imagePreview.style.display = 'block';
const reader = new FileReader();
reader.onload = function(e) {
imagePreview.src = e.target.result;
imagePreview.style.width = '30rem';
}
reader.readAsDataURL(file);
} else if (file.type === 'application/pdf') {
// Jika file adalah PDF
imagePreview.style.display = 'none';
// Buat preview PDF
const pdfPreview = document.createElement('div');
pdfPreview.id = 'pdf-preview';
pdfPreview.className = 'pdf-preview';
const pdfEmbed = document.createElement('embed');
pdfEmbed.src = URL.createObjectURL(file);
pdfEmbed.type = 'application/pdf';
pdfEmbed.width = '100%';
pdfEmbed.height = '500px';
pdfPreview.appendChild(pdfEmbed);
previewContainer.appendChild(pdfPreview);
} }
reader.readAsDataURL(input.files[0]);
} else { } else {
$('#' + previewId).hide(); // Jika tidak ada file yang dipilih
imagePreview.style.display = 'none';
imagePreview.src = '';
} }
} }
function submitDenah() { function submitDenah() {
const loadingOverlay = document.getElementById('loadingOverlay'); const loadingOverlay = document.getElementById('loadingOverlay');
loadingOverlay.classList.remove('hidden'); loadingOverlay.classList.remove('hidden');