#I LOVE YOU EVERDAY#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Upload</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
        <h2 class="mb-4">Upload Video</h2>

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="video">Choose a video file:</label>
                <input type="file" class="form-control-file" id="video" name="video" accept="video/*" required>
                <small id="fileHelp" class="form-text text-muted">Only video files are allowed.</small>
            </div>

<button type="submit" class="btn btn-primary">Upload</button>
        </form>
    </div>

if (!allowedExtensions.exec(filePath)) {
                alert('Invalid file format. Please upload a valid video file.');
                fileInput.value = '';
                return false;
            }

var progressBar = document.querySelector('.progress');
            progressBar.style.display = 'block';

var form = document.getElementById('uploadForm');
            var formData = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.open('POST', 'upload.php', true);

xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    var progressBar = document.querySelector('.progress-bar');
                    progressBar.style.width = percentComplete + '%';
                    progressBar.innerHTML = percentComplete.toFixed(0) + '%';
                }
            };

xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    alert('File uploaded successfully.');
                }
            };

xhr.send(formData);

return false; // Prevent the form from submitting normally
        }
    </script>

</body>
</html>