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.
