Open In App

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.

6m1
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 JavaScript

Output:

Output


Next Article

Similar Reads