Create a File Upload with Progress Bar in HTML CSS & JavaScript Last Updated : 15 Mar, 2024 Comments Improve Suggest changes Like Article Like Report 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. PreviewPrerequisitesHTMLCSSJavaScriptApproachCreate 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">×</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'; } }); }); Output: Comment More infoAdvertise with us Next Article Create a File Upload with Progress Bar in HTML CSS & JavaScript G gauravgandal Follow Improve Article Tags : Project JavaScript Web Technologies Dev Scripter JavaScript-Projects Dev Scripter 2024 +2 More Similar Reads How to create a Multi Step Progress Bar in HTML CSS and JavaScript? In this article, we will create a multi-step progress bar. A Multi-Step Progress Bar is a user interface element created with HTML, CSS, and JavaScript. It guides users through a series of steps or stages, visually displaying their progress and allowing step-by-step navigation in a multi-step proces 3 min read Creating Progress Bar using JavaScript A Progress Bar is used to depict the progress of any task which is being carried out. Progress Bars are generally used to show the download and upload status. In other words, we can say that Progress Bars can be used to depict the status of anything that is in progress. There are several approaches 3 min read Create A Download Button with Timer in HTML CSS and JavaScript In this article, we will discuss how to create a Download button with a timer attached to it using HTML, CSS, and Javascript.Our goal is to create a button that has a timer attached to it. The download should only start after the timer has run out, which we will achieve using the setTimeout and setI 2 min read Create a Button Loading Animation in HTML CSS & JavaScript A "Button Loading Animation" in HTML, CSS, and JavaScript is a user interface element that temporarily transforms a button into a loading state with a spinner or animation to indicate ongoing processing or data retrieval, providing feedback to users during asynchronous tasks.Approach:HTML page with 2 min read How To Save Text As a File in HTML CSS and JavaScript? In this tutorial, we will learn how to save user input as a text file using HTML, CSS, and JavaScript. This can be particularly useful for web applications where users need to download their input or notes as a file.Project PreviewWe will build a simple web page that allows users to enter text in a 2 min read Create a Resize and Compress Images in HTML CSS & JavaScript While using the GeeksforGeeks Write Portal to write articles, we need to upload the images. As we need to resize the image as per GeeksforGeeks's requirement, we search for different tools and websites on the internet to resize and compress the image. But, as a web developer, we can create our own i 7 min read How to create a progress bar using HTML and CSS? The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can use HTML and CSS. To make that progress bar responsive you will need JavaScript.In this article, we will learn to create progr 1 min read How to Create a File Upload Button in HTML? Uploading files through an HTML form is essential for many web applications, as it enables users to easily share documents, images, and other types of files. To create a file upload button in HTML, we can use the <input> element with type="file" attribute inside a <form> tag.Creating a B 2 min read How to Create Scroll Indicator using HTML CSS and JavaScript ? Scroll Indicator is a progress bar that represents how much a page has been scrolled. When we scroll down the bar fills up and when we scroll up the bar amount reduces. Approach: Now, we will create a basic webpage with text to enable scrolling and then use JavaScript to make the scroll indicator wo 3 min read How to Create a Progress Bar using HTML? To create the progress bar of a task by using a <progress> tag. It is used to represent the progress of a task. It is also defined as how much work is done and how much is left. It is not used to represent the disk space or relevant query. Syntax:<progress attributes...> </progress 2 min read Like