File "slider-add.php"

Full path: /home/fsibplc/public_html/sommilito-bank/admin/slider-add.php
File size: 5.38 B (5.38 KB bytes)
MIME-type: text/x-php
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

<?php
include 'admin-header.php';

if (isset($_POST['submit'])) {

    $title = $_POST['title'];

    $image = $_FILES['image']['name'];
    $tmp = $_FILES['image']['tmp_name'];

    $imageName = time() . '_' . $image;

    move_uploaded_file($tmp, "uploads/sliders/" . $imageName);

    $stmt = $conn->prepare("INSERT INTO sliders (title, image, author) VALUES (?, ?, ?)");
    $stmt->bind_param("ssi", $title, $imageName, $userid);
    $stmt->execute();

    header("Location: slider.php");
    exit;
}
?>



        <main class="flex-1 p-6 overflow-auto">

            <!-- Breadcrumb -->
            <nav class="text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-teal-600 transition">Slider</a>
                <span class="mx-2">/</span>
                <span class="font-semibold text-teal-900">Upload Slider</span>
            </nav>

            <!-- Card -->
            <div class="max-w-2xl bg-white rounded-xl shadow-sm border border-gray-200">

                <!-- Header -->
                <div class="border-b px-6 py-4 border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-800">Upload New Slider</h2>
                    <p class="text-sm text-gray-500 mt-1">Add a new slider image with title</p>
                </div>

                <!-- Form -->
                <form method="POST" enctype="multipart/form-data" class="p-6 space-y-6">

                    <!-- Title -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Title
                        </label>
                        <input
                            type="text"
                            name="title"
                            placeholder="Enter slider title"
                            class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm 
                                focus:border-teal-500 focus:ring-2 focus:ring-teal-100 outline-none transition">
                        <!-- <p class="text-xs text-gray-500 mt-1">This will be shown on the slider</p> -->
                    </div>

                    <!-- Image Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Slider Image
                        </label>

                        <div class="w-full">
                            <label id="uploadBox"
                                class="w-full flex flex-col items-center justify-center px-6 py-6 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-teal-500 transition">

                                <!-- Icon -->
                                <svg class="w-8 h-8 text-gray-400 mb-2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M3 16.5V19a2 2 0 002 2h14a2 2 0 002-2v-2.5M16 12l-4-4m0 0L8 12m4-4v12" />
                                </svg>

                                <!-- Text -->
                                <span id="uploadText" class="text-sm text-gray-600">
                                    Click to upload or drag and drop
                                </span>

                                <!-- File name -->
                                <span id="fileName" class="text-xs text-gray-500 mt-1"></span>

                                <!-- Preview Image -->
                                <img id="previewImage" class="hidden mt-4 h-32 rounded-lg shadow">

                                <input type="file" name="image" id="imageInput" class="hidden" required>
                            </label>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="flex items-center justify-end space-x-3 pt-4 border-t border-gray-200">

                        <a href="slider.php"
                            class="px-4 py-2 text-sm rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-100 transition">
                            Cancel
                        </a>

                        <button type="submit" name="submit"
                            class="px-5 py-2 text-sm rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition shadow-sm cursor-pointer">
                            Upload Slider
                        </button>

                    </div>

                </form>
            </div>

        </main>

    </div>


    <script>
        const input = document.getElementById('imageInput');
        const preview = document.getElementById('previewImage');
        const fileName = document.getElementById('fileName');
        const uploadText = document.getElementById('uploadText');

        input.addEventListener('change', function() {
            const file = this.files[0];

            if (file) {
                // Show file name
                fileName.textContent = file.name;

                // Show preview
                preview.src = URL.createObjectURL(file);
                preview.classList.remove('hidden');

                // Change text
                uploadText.textContent = "Image selected";
            }
        });
    </script>
</body>

</html>