HTML CSS PHP File Upload With Circle Progress Bar

Creating a file upload feature with a circular progress bar involves multiple steps. You’ll need to use HTML, CSS, JavaScript (to handle the progress bar), and PHP (to process the file upload on the server). Here’s a basic example of how to achieve this.

Step-by-Step Implementation

1. HTML: Create the file upload form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload with Progress Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="upload-container">
        <form id="uploadForm" enctype="multipart/form-data">
            <input type="file" id="fileInput" name="file" required>
            <button type="submit">Upload</button>
        </form>
        <div class="progress-circle" id="progressCircle">
            <span class="progress-text" id="progressText">0%</span>
        </div>
        <div id="uploadStatus"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS: Style the progress bar

/* styles.css */body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}

.upload-container {
    text-align: center;
}

.progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4caf50 0% 0%, #e0e0e0 0% 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

.progress-text {
    font-size: 1.5em;
    font-weight: bold;
    color: #4caf50;
}

3. JavaScript: Handle the file upload and progress

// script.js
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();

    let formData = new FormData();
    let fileInput = document.getElementById('fileInput');
    formData.append('file', fileInput.files[0]);

    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);

    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            let percentComplete = Math.round((e.loaded / e.total) * 100);
            updateProgressBar(percentComplete);
        }
    });

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('uploadStatus').innerText = 'Upload complete!';
        }
    };

    xhr.send(formData);
});

function updateProgressBar(percent) {
    let circle = document.getElementById('progressCircle');
    let text = document.getElementById('progressText');

    circle.style.background = `conic-gradient(#4caf50 ${percent}%, #e0e0e0 ${percent}% 100%)`;
    text.innerText = `${percent}%`;
}

4. PHP: Handle the file upload on the server

<?php
// upload.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $uploadDir = 'uploads/';
    $uploadFile = $uploadDir . basename($_FILES['file']['name']);

    if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
        echo 'File is valid, and was successfully uploaded.';
    } else {
        echo 'Possible file upload attack!';
    }
}
?>

How It Works

HTML: The form allows users to select a file and submit it. The circular progress bar is displayed with an initial value of 0%.
CSS: Styles the circular progress bar using a conic-gradient.
JavaScript: Listens for the form submission, handles the file upload using XMLHttpRequest, and updates the progress bar as the upload progresses.
PHP: Processes the uploaded file on the server, saving it to the specified directory.

This is a basic implementation. Depending on your needs, you might want to add more features such as:

File validation
Error handling
Additional styles
Security measures (e.g., restricting file types, size limits)

Ensure your server’s configuration allows for file uploads and is properly secured to prevent potential vulnerabilities.

Post Views: 583