ohctech_p8/upload_injury_photos.php

<!-- Button to trigger the modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#imageUploadModal">
  Upload Image
</button> -->

<!-- Modal -->

<script>
    function CheckimagesCount(id) {
        $.ajax({
            url: 'check_injury_images_count.php',
            method: 'POST',
            data: {
                id: id
            },
            success: function(response) {
                if (response == 4) {
                    BootstrapDialog.alert('Maximum 4 photos are allowed');
                    return;
                } else {
                    UploadImages();
                }
            }
        })

    }


    function UploadImages() {

        var formData = new FormData();
        var imageFile = $('#image')[0].files[0];
        formData.append('image', imageFile);

        
        if (imageFile.size > 5242880) { 
            BootstrapDialog.alert('File size must be less than 5MB');
            return;
        }
        
        var allowedTypes = ['image/jpeg', 'image/jpg'];
        if (!allowedTypes.includes(imageFile.type)) {
            BootstrapDialog.alert('Only JPG and JPEG files are allowed');
            return;
        }


        $.ajax({
            url: 'save_upload_injury_photos.php', 
            method: 'POST',
            data: new FormData(document.getElementById("imageUploadForm")),
            processData: false,
            contentType: false,
            success: function(response) {
                BootstrapDialog.alert('Image uploaded successfully');
                location.reload();
                $('#imageUploadModal').modal('hide');
            },
            error: function(xhr, status, error) {
                BootstrapDialog.alert('Error uploading image:', error);
            }
        });
    }


    function DeletePhotos(id) {
        confirm("Are you sure you want to delete this image?");

        $.ajax({
            url: 'delete_injury_image.php',
            type: 'POST',
            data: {
                id: id
            },
            success: function(data) {
                if (data === '1') {
                    BootstrapDialog.alert('Image deleted successfully');
                    location.reload();
                }
            },
            error: function() {
                BootstrapDialog.alert('Error while deleting image');
            }
        });
    }
</script>

<div class="modal fade bd-example-modal-lg" id="imageUploadModal" tabindex="-1" role="dialog" aria-labelledby="imageUploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageUploadModalLabel">Upload Injury Image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="imageUploadForm" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="image">Choose Image:</label>
                        <input type="file" class="form-control-file" id="image" name="image">

                        <?php
                        if (empty($_REQUEST['appointmentId'])) {

                            $sqlMaxappointmentID = "SELECT MAX(appointment_id) AS max_injury_id FROM employee_appointment";
                            $resultMaxappointmentID = mysqli_query($conn, $sqlMaxappointmentID);
                            $rowMaxappointmentID = mysqli_fetch_assoc($resultMaxappointmentID);
                            $appointmentid = ($rowMaxappointmentID['max_injury_id'] + 1);
                        } else {
                            $appointmentid = $_REQUEST['appointmentId'];
                        }
                        ?>
                        <input type="hidden" name="injuryId" name="injuryId" value="<?php echo $appointmentid ?>">
                    </div>
                </form>

                <table cellspacing="0" width="100%" border="0">


                    <tr>
                        <?php
                        if (!empty($_REQUEST['appointmentId'])) {
                            $sqlShowImages = " SELECT * FROM injury_image WHERE `injury_id` = '" . $appointmentid . "'";
                            $resultShowImages = mysqli_query($conn, $sqlShowImages);
                            while ($rowShowImages = mysqli_fetch_assoc($resultShowImages)) { ?>
                                <td>
                                    <img style="height: 200px; width: 200px;" src="data:<?php echo $rowShowImages['image_type']; ?>;base64,<?php echo base64_encode($rowShowImages['image']); ?>" alt="">
                                    <center>
                                        <br>
                                        <button class="btn btn-danger" onclick="DeletePhotos(<?php echo $rowShowImages['id'] ?>)">
                                            Delete
                                        </button>
                                    </center>
                                </td>
                        <?php
                            }
                        }
                        ?>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="CheckimagesCount(<?php echo $appointmentid ?>)">Upload</button>
            </div>
        </div>
    </div>
</div>

<script>

</script>

</body>