File Upload Progress Bar | HTML CSS JavaScript

File Upload Progress Bar with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #06

Project Overview

A simple File Upload Progress Bar built using HTML, CSS, and JavaScript with a clean and responsive interface. The project allows users to select a file and visually track the upload progress through an animated progress bar. It demonstrates frontend concepts such as file input handling, progress animation, DOM manipulation, and interactive UI feedback, making it a great beginner project for understanding file upload interfaces.

Key Features

File selection using input upload field
Animated progress bar to show upload progress
Real-time percentage update during upload simulation
Responsive layout suitable for mobile and desktop devices
Clean and minimal UI design
User-friendly file upload interface
Interactive progress updates using JavaScript
Visual feedback for better user experience

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multi File Upload</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="upload-container">
    <h2>Upload Files</h2>

    <input type="file" id="fileInput" multiple>
    <button onclick="uploadFiles()">Upload</button>

    <div class="progress-container">
      <div class="progress-bar" id="progressBar"></div>
    </div>

    <p id="progressText">0%</p>

    <div id="fileList" class="file-list"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

body {
  font-family: Arial, sans-serif;
  background: #042354;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.upload-container {
  background: white;
  padding: 30px;
  border-radius: 10px;
  width: 400px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

h2 {
  margin-bottom: 20px;
}

input[type="file"] {
  margin-bottom: 15px;
}

button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 20px;
}

button:hover {
  background: #45a049;
}

.progress-container {
  width: 100%;
  background: #eee;
  border-radius: 20px;
  height: 20px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #4CAF50;
  transition: width 0.3s ease;
}

.file-list {
  margin-top: 20px;
  text-align: left;
}

.file-item {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
}

.file-item img {
  max-width: 100%;
  margin-top: 8px;
  border-radius: 6px;
}

.download-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 12px;
  background: #2196F3;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

Javascript Code

function uploadFiles() {
  const fileInput = document.getElementById("fileInput");
  const progressBar = document.getElementById("progressBar");
  const progressText = document.getElementById("progressText");
  const fileList = document.getElementById("fileList");

  if (!fileInput.files.length) {
    alert("Please select at least one file.");
    return;
  }

  let progress = 0;
  progressBar.style.width = "0%";
  progressText.innerText = "0%";

  const interval = setInterval(() => {
    progress += 5;
    progressBar.style.width = progress + "%";
    progressText.innerText = progress + "%";

    if (progress >= 100) {
      clearInterval(interval);
      progressText.innerText = "Upload Complete ✅";

      displayFiles(fileInput.files);
    }
  }, 150);
}

function displayFiles(files) {
  const fileList = document.getElementById("fileList");

  Array.from(files).forEach(file => {
    const fileItem = document.createElement("div");
    fileItem.classList.add("file-item");

    const fileURL = URL.createObjectURL(file);

    fileItem.innerHTML = `
      <strong>${file.name}</strong><br>
      Size: ${(file.size / 1024).toFixed(2)} KB<br>
      <a href="${fileURL}" download="${file.name}" class="download-btn">Download</a>
    `;

    // If image, show preview
    if (file.type.startsWith("image/")) {
      const img = document.createElement("img");
      img.src = fileURL;
      fileItem.appendChild(img);
    }

    fileList.appendChild(fileItem);
  });
}