Skip to content

Instantly share code, notes, and snippets.

@theconsolelogger

theconsolelogger/request-progress-bars-listeners.html

Last active December 25, 2024 04:41
Show Gist options
  • Save theconsolelogger/4e90125eb324c19bafc2e6f46db444a2 to your computer and use it in GitHub Desktop.
Save theconsolelogger/4e90125eb324c19bafc2e6f46db444a2 to your computer and use it in GitHub Desktop.
Download ZIP
Two examples of how to monitor the upload and download progress a HTTP request, created from a form with a file, and display it as a progress bar.
Raw
request-progress-bars-listeners.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<form id="form-upload">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="file">Upload file</label>
<input type="file" class="form-control-file" id="file">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="upload-progress" class="progress">
<div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
</div>
<div id="download-progress" class="progress">
<div id="download-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form-upload").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "<url>", // Add URL here
type: "<method>", // Add method here
enctype: 'multipart/form-data',
data: new FormData($('#form-upload')[0]),
contentType: false,
processData: false,
cache: false,
xhr: function() {
// Create a new instance of the object XMLHttpRequest
// with attached listeners for upload and download
// progress to be used for sending a HTTP request.
let xhr = new window.XMLHttpRequest();
// Upload progress
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
// Update the upload progress bar with current progress
let percentComplete = Math.round((evt.loaded / evt.total) * 100);
$('#upload-progress-bar').css('width', percentComplete + '%');
}
}, false);
// Download progress
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
// Update the download progress bar with current progress
let percentComplete = Math.round((evt.loaded / evt.total) * 100);
$('#download-progress-bar').css('width', percentComplete + '%');
}
}, false);
return xhr;
},
success: function() {
console.log('File uploaded successfully.');
},
error: function() {
console.log('Error while uploading.');
}
});
}));
});
</script>
</body>
</html>
Raw
request-progress-bars-onprogress.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<form id="form-upload">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="file">Upload file</label>
<input type="file" class="form-control-file" id="file">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="upload-progress" class="progress">
<div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
</div>
<div id="download-progress" class="progress">
<div id="download-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form-upload").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "<url>", // Add URL here
type: "<method>", // Add method here
enctype: 'multipart/form-data',
data: new FormData($('#form-upload')[0]),
contentType: false,
processData: false,
cache: false,
xhr: function() {
// Create a new instance of the object XMLHttpRequest
// with attached listeners for upload and download
// progress to be used for sending a HTTP request.
let xhr = new window.XMLHttpRequest();
// Upload progress
xhr.upload.onprogress = function (evt) {
if (evt.lengthComputable) {
// Update the upload progress bar with current progress
let percentComplete = Math.round((evt.loaded / evt.total) * 100);
$('#upload-progress-bar').css('width', percentComplete + '%');
}
};
// Download progress
xhr.onprogress = function (evt) {
if (evt.lengthComputable) {
// Update the download progress bar with current progress
let percentComplete = Math.round((evt.loaded / evt.total) * 100);
$('#download-progress-bar').css('width', percentComplete + '%');
}
};
return xhr;
},
success: function() {
console.log('File uploaded successfully.');
},
error: function() {
console.log('Error while uploading.');
}
});
}));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment