لدي ملف مخزّن في storage/members والمستخدم قد يدخل صورة أو pdf وحاليا تعرض للمستخدم الصورة فقط عند النقر على الايقونة أريد عمل شرط إذا كان من نوع صورة يعرضها للمستخدم وإذا كان pdf يفتحه في نافذة جديدة.
استخدم Laravel livewire
استخدمت من قبل مكتبة mpdf في طباعة صفحة HTML الى PDF
composer require carlos-meneses/laravel-mpdf
هذا الزر يفتح modal الصورة
<td>
<button type="button" value="" data-title="المسكن"data-image_url="{{ Storage::url($hotel->contract) }}"
class="show-image-modal dropdown-item" style="padding: 0;height: 33px;">
<i class="mdi mdi-file-document-outline" style="font-size: 25px; color: rgb(92, 88, 88);"></i>
</button>
</td>
وهذا show_image.blade.php
<!-- Start image Modal -->
<div class="modal fade" id="image_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="image_modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal-content-maps-images">
<div class="modal-header">
<h4 class="modal-title" id="delete_header">عرض المحتوى</h4>
<i type="reset" data-bs-dismiss="modal" aria-label="Close"
class="las las la-times text-danger scale5 cancel-modal"></i>
</div>
<div class="modal-body p-0">
<div>
<img id="image_src"class="img-fluid max-hight" src=""
style="max-height:450px; width:100%" alt="" srcset="">
</div>
<div id="view_media_card_footer"class="card-footer p-2">
<video id="video_src" controls style="width: 100%; height: auto"></video>
</div>
</div>
</div>
</div>
</div>
<!-- End image Modal -->
show_image.js
$(document).on("click", ".show-image-modal", function () {
if ($(this).data('type_media') === "video") {
$("#video_src").attr("src", $(this).data('video_url'));
$("#image_src").hide();
$("#view_media_card_footer").show();
} else {
$("#view_media_card_footer").hide();
$("#image_src").show();
$("#image_src").attr("src", $(this).data('image_url'));
}
$("#image_modal").modal("show");
});
