AJAX - AJAX File Upload with Progress Bar

AJAX allows files to be uploaded to a server without refreshing the webpage. This improves user experience because users can continue interacting with the page while the file is uploading. A progress bar is often added to show how much of the file has been uploaded.

1. What is AJAX File Upload

Traditional file upload reloads the entire webpage after submission. In AJAX file upload, JavaScript sends the selected file to the server asynchronously. The browser communicates with the server in the background and updates the page dynamically.

2. Basic Working Process

The file upload process using AJAX follows these steps:

1. User selects a file using an HTML file input element.

2. JavaScript captures the selected file.

3. FormData object stores the file data.

4. XMLHttpRequest or Fetch API sends the file to the server.

5. Server processes and saves the file.

6. Progress bar displays upload status.

3. HTML Structure

Example HTML form:

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

<progress id="progressBar" value="0" max="100"></progress>
<p id="status"></p>

The progress element displays upload percentage.

4. JavaScript Implementation Using XMLHttpRequest

function uploadFile() {
    var file = document.getElementById("fileInput").files[0];
    var formData = new FormData();
    formData.append("file", file);

    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            var percent = (e.loaded / e.total) * 100;
            document.getElementById("progressBar").value = percent;
        }
    });

    xhr.onload = function() {
        document.getElementById("status").innerText = "Upload completed";
    };

    xhr.open("POST", "upload.php", true);
    xhr.send(formData);
}

5. Role of FormData Object

FormData is used to send files and form information easily. It automatically handles encoding and multipart data required for file transfer.

Example:

var formData = new FormData();
formData.append("file", file);

6. Progress Event Explanation

The upload progress event tracks how much data has been sent to the server.

Important properties:

• loaded: amount of data already uploaded

• total: total file size

• percentage calculation helps update the progress bar

7. Server-Side Processing Example (PHP)

<?php
if(isset($_FILES['file'])){
    move_uploaded_file(
        $_FILES['file']['tmp_name'],
        "uploads/" . $_FILES['file']['name']
    );
}
?>

The server receives the file and stores it in a folder.

8. Advantages of AJAX File Upload

• No page refresh required

• Faster user interaction

• Real-time upload progress display

• Better user experience

• Supports large file uploads

9. Common Challenges

• Large file size limitations

• Network interruption handling

• Server configuration restrictions

• Security validation of uploaded files

10. Best Practices

• Validate file type and size before upload

• Show upload progress to users

• Handle errors properly

• Secure uploaded files on the server

• Limit maximum upload size

AJAX file upload with a progress bar is widely used in modern web applications such as social media platforms, cloud storage services, and online forms where files need to be uploaded efficiently without interrupting the user experience.