~NAXC~

File Name:

<?php
include 'session.php';
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <title>Admin - Sanket Study Centre</title>
    
    <link rel="stylesheet" href="assets/css/app.min.css">
    <link rel="stylesheet" href="assets/bundles/jqvmap/dist/jqvmap.min.css">
    <link rel="stylesheet" href="assets/bundles/weather-icon/css/weather-icons.min.css">
    <link rel="stylesheet" href="assets/bundles/weather-icon/css/weather-icons-wind.min.css">
    <link rel="stylesheet" href="assets/bundles/summernote/summernote-bs4.css">
    <link rel="stylesheet" href="assets/bundles/prism/prism.css">

<link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/components.css">

<link rel="stylesheet" href="assets/bundles/footable-bootstrap/css/footable.bootstrap.min.css">
    <link rel="stylesheet" href="assets/bundles/footable-bootstrap/css/footable.standalone.min.css">
    <link rel="stylesheet" href="../../../../../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="plugins/sweet-alert2/sweetalert2.min.css" rel="stylesheet" type="text/css">
    <script src="plugins/sweet-alert2/sweetalert2.all.min.js"></script>
    <script src="plugins/sweet-alert2/sweet-alert.init.js"></script>

<link rel="stylesheet" href="assets/css/custom.css">
    <link rel='shortcut icon' type='image/x-icon' href="assets/img/logo.webp" />

th,
        td {
            border: 1px solid #ddd !important;
            border-collapse: collapse !important;
        }

table.dataTable thead th {
            border-bottom: 1px solid #ddd !important;
        }
    </style>
</head>

<?php
            include 'header.php';
            include 'sidebar.php';
            ?>

<div class="main-content">
                <section class="section">

<div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="card-header" style="padding:10px 0px;">
                                        <h4>All Images</h4>
                                        <div class="card-header-action">
                                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ModelData"><i data-feather="plus" style="height:15px; width:15px;"></i>&nbsp;<span><b>Add Image</b></span></button>
                                        </div>
                                    </div>
                                    <div class="table-responsive">
                                        <table id="example" class="table dataTable table-bordered table-striped" data-filtering="true" data-sorting="true" data-paging="true" data-paging-size="15">
                                            <thead>
                                                <tr>
                                                    <th>No&nbsp;</th>
                                                    <th>Image</th>
                                                    <th>Caption</th>
                                                    <th>Action&nbsp;</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

</section>
            </div>

<div class="modal fade" id="ModelData" tabindex="-1" role="dialog" aria-labelledby="ModelDataTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title" id="ModelDataTitle">Add Image</h6>
                            <div>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        </div>
                        <hr style="margin: 0.25rem !important;">
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group">
                                    <h6>Image<span class="text-danger">*</span></h6>
                                    <input type="file" id="image" name="image" class="dropify" required>
                                    <p id="img_error" class="error-message text-danger"></p>
                                </div>
                                <div class="form-group">
                                    <h6>Caption <span class="text-danger">*</span></h6>
                                    <input type="text" class="form-control" id="caption" name="caption" required>
                                    <p class="error-message text-danger"></p>
                                </div>
                                <br>
                                <div class="col-md-12">
                                    <button type="button" name="image_library_submit" id="image_library_submit" class="btn btn-primary mt-4">SUBMIT</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="modal fade" id="ModelData2" tabindex="-1" role="dialog" aria-labelledby="formModal" aria-hidden="true">
                <div class="modal-dialog  modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="formModal">
                                Update Image</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <hr class="text-muted">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <h6>Image<span class="text-danger">*</span></h6>
                                        <input type="file" id="image_update" name="image_update" class="dropify">
                                    </div>
                                </div>
                                
                                <div class="col-6 mt-4">
                                    <div class="form-group">
                                        <div id="imagePreviewContainer"></div>
                                        <p class="text-center">(Selected Image)</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <h6>Caption <span class="text-danger">*</span></h6>
                                    <input type="text" class="form-control" id="caption_update" name="caption_update">
                                </div>
                                <br>
                                <div class="col-md-12">
                                    <button type="button" name="image_library_submit_update" id="image_library_submit_update" class="btn btn-primary mt-4">SUBMIT</button>
                                </div>

</div>
                        </div>
                    </div>
                </div>
            </div>

<?php
            require_once 'footer.php';
            ?>
            
        </div>
    </div>
    
    <script src="assets/js/app.min.js"></script>
    
    <script src="assets/bundles/echart/echarts.js"></script>
    <script src="assets/bundles/chartjs/chart.min.js"></script>
    <script src="assets/bundles/prism/prism.js"></script>
    
    <script src="assets/js/page/index.js"></script>
    
    <script src="assets/js/scripts.js"></script>
    
    <script src="assets/js/custom.js"></script>

<script src="assets/bundles/footable-bootstrap/js/footable.js"></script>
    <script src="assets/bundles/jqvmap/dist/jquery.vmap.min.js"></script>
    <script src="assets/bundles/jqvmap/dist/maps/jquery.vmap.world.js"></script>

<script src="assets/js/page/footable-data.js"></script>
    <script src="assets/js/page/index2.js"></script>

$('.dropify').dropify();
    </script>

<script>
        $(document).ready(function() {

$('#example6').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 15, 25, 50, 100, -1],
                    [10, 15, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 500000000000000000000000000000000000,
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel'
                ]

});
            $('#example5').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 15, 25, 50, 100, -1],
                    [10, 15, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 500000000000000000000000000000000000,
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel'
                ]

});
            $('#example4').DataTable({
                "pagingType": "full_numbers",
                "lengthMenu": [
                    [10, 15, 25, 50, 100, -1],
                    [10, 15, 25, 50, 100, "All"]
                ],
                "iDisplayLength": 500000000000000000000000000000000000,
                responsive: true,
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search records",
                },
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel'
                ]

});

$('.btn-copy').click(function() {
                $('.buttons-copy').trigger('click');
            });
            $('.btn-csv').click(function() {
                $('.buttons-csv').trigger('click');
            });
            $('.btn-excel').click(function() {
                $('.buttons-excel').trigger('click');
            });
            $('.btn-pdf').click(function() {
                $('.buttons-pdf').trigger('click');
            });
            $('.btn-print').click(function() {
                $('.buttons-print').trigger('click');
            });
        });
    </script>

<script>
        $(document).ready(function() {
            // Make an AJAX request to fetch data
            $.ajax({
                url: 'apis/fetch_image_library_data_in_table.php',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // Check if data is available
                    if (data.length > 0) {
                        // Iterate through the data and append rows to the table
                        $.each(data, function(index, item) {

<script>
        $(document).ready(function() {
            $("button#image_library_submit").on("click", function(e) {
                e.preventDefault();

var image = $("input[name='image']").val();
                if (image == '') {
                    $('#image').addClass("is-invalid");
                    isValid = false;
                    $('#img_error').text('*This field is required.');
                } else {
                    $('#image').removeClass("is-invalid");
                    $('#img_error').text('');
                }

if (validateForm()) {
                    var fileInput1 = $('#image')[0];
                    var file1 = fileInput1.files[0];

console.log('this is 1' + file1);
                    if (file1) {
                        if (file1.size <= 200 * 1024) {
                            var formData = new FormData();
                            formData.append('file1', file1);
                            $.ajax({
                                type: 'POST',
                                url: 'apis/upload_image_library_img.php', // Your server-side script to handle file upload
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function(response) {
                                    let res = JSON.parse(response);
                                    if (res.error_flag == 0) {
                                        console.log('this is res1' + res.file_name_1);
                                        image_final_name = res.file_name_1;
                                        call_user();
                                    }
                                },
                                error: function(error) {
                                    console.error('Error uploading file:', error);
                                }
                            });
                        } else {
                            console.error('File size exceeds 200 KB');
                            swal.fire({
                                title: 'Error',
                                text: 'Selected image exceeds 200 KB. Please choose smaller images.',
                                type: 'error',
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'OK',
                            });
                        }
                    } else {
                        console.error('File is not selected');
                        swal.fire({
                            title: 'Error',
                            text: 'Please select image.',
                            type: 'error',
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'OK',
                        });
                    }

function call_user() {
                        var caption = $("input[name='caption']").val();
                        // console.log(caption );
                        $.ajax({
                            type: "POST",
                            url: "apis/add_new_image_library.php",
                            data: {
                                image: image_final_name,
                                caption: caption,
                            },
                            success: function(data) {
                                console.log(data);
                                var res = JSON.parse(data);
                                if (res['error_flag'] == 0) {
                                    var img_lib_id = res['img_lib_id'];
                                    // Close the modal
                                    $('#ModelData').modal('hide');
                                    swal.fire({
                                        title: 'Image Added Successfully!',
                                        text: '',
                                        type: 'success',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        cancelButtonColor: '#d33',
                                        confirmButtonText: 'OK',
                                    }).then(function(isConfirm) {
                                        if (isConfirm.value) {
                                            // Get the last row index
                                            var lastRowIndex = $('#example tbody tr:last').index();
                                            // Increment the index
                                            var newIndex = lastRowIndex + 2; // Add 2 to skip the header row

// Append the new row to the table
                                            var newRow = '<tr id="row-' + img_lib_id + '">' +
                                                '<td>' + newIndex + '</td>' +
                                                '<td>' + (image ? '<a href="uploads/' + image + '" class="btn btn-info" target="_blank" style="box-shadow: none;">View</a>' : '<a class="btn btn-warning">N/A</a>') + '</td>' +
                                                '<td>' + caption + '</td>' +
                                                '<td>' +
                                                '<a class="btn btn-info btn-action" title="edit" data-bs-original-title="Edit" aria-label="Edit" onclick="javascript:myFunction2(' + img_lib_id + ')" data-bs-toggle="modal" data-bs-target="#ModelData2"><i class="fas fa-pencil-alt"></i></a>' +

'&nbsp;<a class="btn btn-danger btn-action" data-bs-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="" href="javascript:myFunction(' + img_lib_id + ')">' +
                                                '<i class="fas fa-trash"></i>' +
                                                '</a>' +
                                                '</td>' +
                                                '</tr>';
                                            $('#example tbody').append(newRow);
                                        }
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error("AJAX Request Failed:", status, error);
                                // You can add additional error handling logic here
                                swal.fire({
                                    title: 'Error',
                                    text: 'Failed to Add Image. Please Try Again.',
                                    type: 'error',
                                    confirmButtonColor: '#3085d6',
                                    cancelButtonColor: '#d33',
                                    confirmButtonText: 'OK',
                                });
                            }
                        });
                    }
                }
            });

return isValid;
            }
        });
    </script>

<script>
        function myFunction2(img_lib_id) {
            var imgLibid = img_lib_id;
            // console.log('imgLibid ===>', imgLibid);

// Fetch image library data
            $.ajax({
                method: 'POST',
                url: "apis/fetch_image_library_data_by_imgLibid.php",
                data: {
                    imgLibid: imgLibid
                },
                cache: false,

success: function(response) {
                    // console.log('API response of fetch pg data by id: ', response);
                    var data = JSON.parse(response);

// Get the existing image path
                    var existingImage = 'uploads/' + data.data[0].image;

// Dynamically create an image preview
                    var imagePreview = '<img src="' + existingImage + '" alt="Existing Image" style="max-width: 100%; max-height: 200px;">';

// Insert the image preview into the container
                    $('#imagePreviewContainer').html(imagePreview);

// Clear the file input
                    $("input[name='image_update']").val('');

// Set the value of the caption input
                    $("input[name='caption_update']").val(data.data[0].caption);

// Reinitialize Dropify after updating the input value
                    $("input[name='image_update']").dropify();

// Set up click event for the update button
                    $("button#image_library_submit_update").off().on("click", function(e) {
                        e.preventDefault();
                        handleImageLibraryUpdate(data);
                        // console.log('calling function handle Image Library update');
                    });
                },
            });
        }

function handleImageLibraryUpdate(data) {
            // console.log('handle Image Library update called successfully', data);
            var imageInput = $("input[name='image_update']");
            var image = imageInput.val();
            var caption = $("input[name='caption_update']").val();

// Check if a new file has been selected
            var fileInput1 = $('#image_update')[0];
            var file1 = fileInput1.files[0];

if (file1) {
                // console.log('new image is selected', file1);
                // New file selected, proceed with file upload
                if (file1.size <= 200 * 1024) {
                    var formData = new FormData();
                    formData.append('file1', file1);

$.ajax({
                        type: 'POST',
                        url: 'apis/upload_image_library_img.php',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(response) {
                            // console.log(response);
                            let res = JSON.parse(response);
                            if (res.error_flag == 0) {
                                // console.log('New image uploaded:', res.file_name_1);
                                image = res.file_name_1;
                                updateImageLibrary(image, caption, data);
                            }
                        },
                        error: function(error) {
                            console.error('Error uploading file:', error);
                        }
                    });
                } else {
                    console.error('File size exceeds 200 KB');
                    swal.fire({
                        title: 'Error',
                        text: 'Selected image exceeds 200 KB. Please choose smaller images.',
                        type: 'error',
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'OK',
                    });
                }
            } else {
                // No new file selected, use the existing image from the database directly
                image = data.data[0].image;
                console.log('Existing image is used:', image);
                // Check if the existing image already has the 'uploads/' prefix
                if (image.startsWith('uploads/')) {
                    // If yes, remove the 'uploads/' prefix
                    image = image.substring('uploads/'.length);
                }
                updateImageLibrary(image, caption, data);
            }
        }

function updateImageLibrary(image, caption, data) {
            console.log('Data object structure:', data)
            var imgLibid = data.data[0].image_library_id;
            // console.log('update pg fun id: ', imgLibid);

// Perform AJAX request to update Image Library data
            $.ajax({
                type: "POST",
                url: "apis/update_image_library_data.php",
                data: {
                    image: image,
                    caption: caption,
                    img_lib_id: imgLibid
                },
                success: function(data) {
                    // console.log(data);
                    var res = JSON.parse(data);

if (res['error_flag'] == 0) {
                        var imageLibraryid = res['imageLibraryid'];
                        // Close the modal
                        $('#ModelData2').modal('hide');

// Show success message using sweetalert
                        swal.fire({
                            title: 'Image Updated Successfully!',
                            text: '',
                            type: 'success',
                            showCancelButton: false,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'OK',
                        }).then(function(isConfirm) {
                            if (isConfirm.value) {

// Clear the table
                                var image_libraray_table = $('.main-content tbody');
                                image_libraray_table.empty();

// Fire new API using AJAX
                                $.ajax({
                                    url: 'apis/fetch_image_library_data_in_table.php',
                                    type: 'GET',
                                    dataType: 'json',
                                    success: function(data) {
                                        // Check if data is available
                                        if (data.length > 0) {
                                            // Iterate through the data and append rows to the table
                                            $.each(data, function(index, item) {

<script>
        function myFunction(image_library_id, index) {
            // Remove the row from the table immediately
            const confirmationMessage = `You want to delete this Image?`;

swal.fire({
                title: 'Are you sure?',
                text: confirmationMessage,
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, I am sure!',
                cancelButtonText: "No, cancel it!"
            }).then(function(isConfirm) {
                if (isConfirm.value) {
                    // Make an AJAX call
                    fetch(`apis/delete_image_library.php`, {
                            method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                id: image_library_id
                            }), // Pass the user ID in the request body
                        })
                        .then(response => response.json())
                        .then(function(data) {
                            if (data.status === 'success') {
                                swal.fire(
                                    'Deleted!',
                                    `This Image has been deleted.`,
                                    'success'
                                );

$('#row-' + image_library_id).remove();
                            } else {
                                swal.fire('Error', data.message, 'error');
                                // Handle error scenarios
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            // Handle errors, show an alert, or redirect to an error page
                        });
                } else {
                    // User canceled the action, you may want to re-add the row to the table here
                }
            });
        }
    </script>

</body>

</html>

Bypass Options

Select edit method

Obfuscate PHP:

No Obfuscate

Obfuscate