CSE-Media/core/page/video.form.add.php

<?php
    $data = [];
?>
<nav aria-label="breadcrumb" class="ariane">
    <ol class="breadcrumb" style="border-radius: 0 0 5px 5px; padding:5px 10px;">
        <li class="breadcrumb-item"><a href="/">Toutes les vidéos</a></li>
        <li class="breadcrumb-item active" aria-current="page"><?php echo isset($data["title"]) ? $data["title"] : "Ajouter une vidéo"; ?></li>
    </ol>
</nav>

<div class='container' style="position: relative;">
    <form method="post" id="uploadForm" enctype="multipart/form-data">
        <input type="hidden" name="from" value="video.form.add">
        <div class='form-group' id="progressBarBox" style="display:none;">
            <span id="progressPercent">0%</span>
            <progress id="progressBar" value="0" max="100" style="width: 100%; display: none;"></progress>
        </div>
        <div class='form-group SubmitElement'>
            <label for='videoFile'>Charger la vidéo</label>
            <div class='custom-file'>
                <input type='file' name='videoFile' class='custom-file-input' id='videoFile' accept='video/*' required>
                <label class='custom-file-label' for='videoFile'>Choisir un fichier</label>
            </div>
        </div>
        <div class='form-group' id="previewFileName" style="display:none;">
            <label for='selectedFileName'>Nom de la vidéo sélectionnée</label>
            <input type='text' class='form-control' id='selectedFileName' readonly>
        </div>
        <div class='form-group SubmitElement'>
            <label>Statut de la vidéo</label>
            <div class='custom-control custom-radio'>
                <input type='radio' id='activeStatus' name='videoStatus' class='custom-control-input' value='1' <?php echo ((isset($data["active"]) and $data["active"] == 1) or !isset($data["active"])) ? "checked" : NULL; ?>>
                <label class='custom-control-label' for='activeStatus'>Accessible à tous</label>
            </div>
            <div class='custom-control custom-radio'>
                <input type='radio' id='inactiveStatus' name='videoStatus' class='custom-control-input' value='0' <?php echo (isset($data["active"]) and $data["active"] == 0) ? "checked" : NULL; ?>>
                <label class='custom-control-label' for='inactiveStatus'>Non accessible</label>
            </div>
        </div>
        <div class='form-group'>
            <label for='videoName'>Titre de la vidéo</label>
            <input type='text' class='form-control' id='videoName' name="videoName" value="<?php echo isset($data["title"]) ? $data["title"] : NULL; ?>" required>
        </div>
        <div class='form-group'>
            <label for='dateEvent'>Jour de l'évènement</label>
            <input class='form-control' type="date" id="dateEvent" name="dateEvent" value="<?php echo isset($data["dateEvent"]) ? $data["dateEvent"] : NULL; ?>" required>
        </div>
        <div class='form-group SubmitElement'>
            <button type='submit' class='btn btn-primary btn-lg'>Enregistrer la vidéo</button>
        </div>
    </form>
</div>
<style>
    #progressBar {
        height: 20px;
    }

    #progressPercent {
        font-weight: bold;
    }
</style>
<script>
    document.getElementById('videoFile').addEventListener('change', function() {
        var fileName = this.files[0].name;
        document.getElementById('selectedFileName').value = fileName;
        document.getElementById('previewFileName').style.display = 'block';
    });

    document.getElementById('uploadForm').addEventListener('submit', function(event) {
        document.getElementById('progressBarBox').style.display = 'block';
        var elements = document.getElementsByClassName('SubmitElement');

        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'none';
        }
        event.preventDefault();

        var form = document.getElementById('uploadForm');
        var fileInput = document.getElementById('videoFile');
        var progressBar = document.getElementById('progressBar');
        var progressPercent = document.getElementById('progressPercent');

        progressBar.style.display = 'block';

        var formData = new FormData(form);
        var xhr = new XMLHttpRequest();

        xhr.open('POST', '/edit/add', true);
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                var percentComplete = (event.loaded / event.total) * 100;
                progressBar.value = percentComplete;
                progressPercent.textContent = Math.round(percentComplete) + '%';
            }
        };

        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    // Récupérer la réponse JSON contenant l'ID
                    var response = JSON.parse(xhr.responseText);
                    var videoId = response.id;

                    if (videoId) {
                        // Rediriger vers /edit/ID avec l'ID récupéré
                        window.location.href = "/edit/" + videoId;
                    } else {
                        alert("Erreur : ID non trouvé dans la réponse.");
                        showElement();
                    }
                } catch (e) {
                    alert("Erreur lors du traitement de la réponse.");
                    showElement();
                }
            } else {
                alert('Erreur lors du téléchargement.');
                // progressBar.value = 0; // Réinitialiser la barre
                // progressPercent.textContent = '0%';
                showElement();
            }
        };
        xhr.send(formData);
    });

    function showElement(){
        var elements = document.getElementsByClassName('SubmitElement');
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'block';
        }
    }
</script>