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

  1. HTML: The form allows users to select a file and submit it. The circular progress bar is displayed with an initial value of 0%.
  2. CSS: Styles the circular progress bar using a conic-gradient.
  3. JavaScript: Listens for the form submission, handles the file upload using XMLHttpRequest, and updates the progress bar as the upload progresses.
  4. 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.

Pin It on Pinterest

Share This