Admin

Software Developer

4th October, 2023

638

Creating a File Upload Progress Bar with Bootstrap and JavaScript

File uploads are a common feature in web applications, but users often find it helpful to see the progress of their uploads. In this tutorial, we'll show you how to create a file upload progress bar using Bootstrap and JavaScript. We'll use the HTML5 File API and AJAX to handle the file upload and monitor the progress in real-time.

Prerequisites

Before we get started, make sure you have the following:

Basic knowledge of HTML, CSS, and JavaScript.
A web server or hosting environment where you can run your application.

Getting Started

Let's start by setting up the HTML structure for our file upload form and progress bar. We'll also include the necessary Bootstrap and JavaScript libraries.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Progress</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2>File Upload Progress</h2>
        <form id="upload-form" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="fileInput" class="form-label">Choose a file:</label>
                <input type="file" class="form-control" id="fileInput" name="file">
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        <div class="progress mt-3" style="display: none;">
            <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.min.js"></script>
    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

In this code:

We've created a Bootstrap-styled form with a file input and an upload button.
A hidden Bootstrap progress bar is included, which will be displayed when the file upload is in progress.

Implementing the JavaScript

Now, let's implement the JavaScript code that handles the file upload and updates the progress bar in real-time. We'll use jQuery for event handling and AJAX.

$(document).ready(function () {
    $("#upload-form").on('submit', function (e) {
        e.preventDefault();
        var formData = new FormData(this);
        var progressBar = $('.progress');
        progressBar.show();

        $.ajax({
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = (evt.loaded / evt.total) * 100;
                        progressBar.find('.progress-bar').width(percentComplete + '%');
                        progressBar.find('.progress-bar').html(percentComplete.toFixed(0) + '%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'YOUR_UPLOAD_API_URL',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                // Handle the response from the server
                console.log('File uploaded successfully.');
            },
            error: function (data) {
                // Handle errors, if any
                console.error('Error uploading file.');
            }
        });
    });
});

Replace 'YOUR_UPLOAD_API_URL' with the actual URL of your API endpoint that handles file uploads.

Testing the Upload

With everything set up, you can now test the file upload progress bar:

Select a file using the file input.
Click the "Upload" button.
The progress bar will appear and update in real-time as the file is uploaded.

Conclusion

In this tutorial, we've learned how to create a file upload progress bar using Bootstrap and JavaScript. This feature can enhance the user experience when dealing with file uploads in your web applications. Feel free to customize the design and functionality to match your application's needs.

You can extend this example by adding error handling, success messages, and additional features depending on your requirements.

Admin

Related Tutorial

How to Implement Image Cropping with Cropper.js.

Fixing the Issue of Cut-off Content in HTML to PDF Conversion with html2pdf.js.

Difference Between Synchronous and Asynchronous Functions in JavaScript.

Popular Tools for Developers

Popular Tools for Project Manager

Popular Tools for Youtubers

Other Tools for Daily Life

About us

Find Online Tools

Quick links

Social links

Other