Create a File Upload with Progress Bar in HTML CSS & JavaScript

Last Updated : 15 Mar, 2024

In a file upload with a progress bar application using HTML, CSS, and JavaScript where users can be able to upload the image file, with a live dynamic progress bar of uploading. The uploaded image can be previewed in modal. Users can also clear the uploaded image in the application.

Preview

Prerequisites

Approach

Create the File Upload with Progress Bar Application UI Structure using HTML Elements like <div>, <h1>, <button>. Then link all the required CDNs for external fonts and icons.
Once the application structure is defined, we can proceed to enhance its appearance by applying CSS properties. This involves styling the elements to ensure a responsive and visually appealing layout. Various properties such as width, padding, height, and others are utilized to achieve this goal.
In the JavaScript code, we are using the DOMContentLoaded event to ensure that the script runs after the HTML document has been completely loaded.
The script handles file input events, displays a live progress bar during image upload, and provides functionalities such as clearing the input, displaying the uploaded image in a modal, and handling modal closure events for a user-friendly file upload experience.

Example: Implementation for a File Upload with Progress Bar App in HTML, CSS & JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
    <link rel="stylesheet" href="styles.css">
    <title>File Upload with Progress Bar</title>
</head>

<body>
    <div class="card">
        <h1 class="app-title">
            <i class="fas fa-file-upload"></i>
            GeeksforGeeks
        </h1>
        <h3 class="app-subtitle">
              File Upload with Progress Bar
          </h3>
        <label for="fileInput" class="file-label">
            <i class="fas fa-cloud-upload-alt"></i> 
          Choose a file
        </label>
        <input type="file" id="fileInput" class="file-input" />
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
            <div class="progress-text" id="progressText"></div>
        </div>
        <div class="file-details">
            <div class="file-name" id="fileName"></div>
            <button class="clear-button" id="clearButton">
                <i class="fas fa-times"></i>
                Clear
            </button>
        </div>
        <div class="preview-container" id="previewContainer"></div>
    </div>
    <div class="modal" id="myModal">
        <span class="close" id="closeModal">&times;</span>
        <img class="modal-content" id="uploadedImageModal">
    </div>
    <script src="app.js"></script>
</body>

</html>

CSS

/* style.css*/

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right,
                        #3494E6, #EC6EAD);
    height: 100vh;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #f4f4f4;
}

.card {
    text-align: center;
    padding: 20px;
    border: 2px solid #faa301;
    border-radius: 10px;
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.app-title {
    color: #27ae60;
}

.app-subtitle {
    color: #333;
}

.file-label {
    cursor: pointer;
    display: flexbox;
    padding: 7px;
    background-color: #c834db;
    color: #fff;
    border-radius: 8px;
    margin-bottom: 60px;
    transition: background-color 0.3s;
}

.file-label:hover {
    background-color: #73ec10;
}

.file-input {
    display: none;
}

.progress-container {
    margin-top: 15px;
    position: relative;
    height: 20px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #2ecc71;
    border-radius: 5px;
    transition: width 0.3s;
}

.progress-text {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #333;
    font-size: 14px;
    display: none;
}

.file-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.file-name {
    color: rgb(19, 2, 255);
}

.clear-button {
    padding: 5px 12px;
    background-color: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: none;
}

.clear-button:hover {
    background-color: #c0392b;
}

.preview-container img {
    max-width: 100%;
    max-height: 150px;
    cursor: pointer;
    margin-top: 15px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.close {
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 25px;
    cursor: pointer;
}

Javascript

// script.js

document.addEventListener('DOMContentLoaded', () => {
    const fInput = document.getElementById('fileInput');
    const pBar = document.getElementById('progressBar');
    const pText = document.getElementById('progressText');
    const fName = document.getElementById('fileName');
    const modal = document.getElementById('myModal');
    const cModal = document.getElementById('closeModal');
    const uImage = document.getElementById('uploadedImageModal');
    const pContainer = document.getElementById('previewContainer');
    const cBtn = document.getElementById('clearButton');
    fInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onloadstart = () => {
                pBar.style.width = '0%';
                pText.style.display = 'block';
                pText.innerText = '0%';
                pContainer.style.display = 'none';
                cBtn.style.display = 'none';
            };
            reader.onprogress = (event) => {
                if (event.lengthComputable) {
                    const progress = 
                        (event.loaded / event.total) * 100;
                    pBar.style.width = `${progress}%`;
                    pText.innerText = `${Math.round(progress)}%`;
                }
            };
            reader.onload = () => {
                const uploadTime = 4000;
                const interval = 50;
                const steps = uploadTime / interval;
                let currentStep = 0;
                const updateProgress = () => {
                    const progress = (currentStep / steps) * 100;
                    pBar.style.width = `${progress}%`;
                    pText.innerText = `${Math.round(progress)}%`;
                    currentStep++;

                    if (currentStep <= steps) {
                        setTimeout(updateProgress, interval);
                    } else {
                        pBar.style.width = '100%';
                        pText.innerText = '100%';
                        fName.innerText = `File Name: ${file.name}`;
                        pContainer.innerHTML = 
                            `<img src="${reader.result}" 
                                  alt="Preview" id="previewImage">`;
                        pContainer.style.display = 'block';
                        cBtn.style.display = 'block';
                    }
                };
                setTimeout(updateProgress, interval);
            };
            reader.readAsDataURL(file);
        } else {
            alert('Please select a valid image file.');
            fInput.value = '';
        }
    });
    pContainer.addEventListener('click', () => {
        modal.style.display = 'block';
        uImage.src = document.getElementById('previewImage').src;
    });
    cModal.addEventListener('click', () => {
        modal.style.display = 'none';
    });
    cBtn.addEventListener('click', () => {
        fInput.value = '';
        pBar.style.width = '0%';
        pText.style.display = 'none';
        fName.innerText = '';
        pContainer.style.display = 'none';
        cBtn.style.display = 'none';
    });
    window.addEventListener('click', (event) => {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
});