Skip to content

Instantly share code, notes, and snippets.

@kura1420

kura1420/JqueryXHR.js

Last active August 28, 2024 04:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kura1420/7aac046390a90e2e19941625e2fe9c28 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kura1420/7aac046390a90e2e19941625e2fe9c28 to your computer and use it in GitHub Desktop.
Download ZIP
File Upload With Javascript XHR
Raw
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form method="POST" action="#" class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">File Upload</label>
<div class="col-sm-10">
<input type="file" class="form-control input-sm" id="logo" name="logo">
<div class="progress" id="progress-header">
<div class="progress-bar progress-bar-aqua" id="progress-child" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Upload.js -->
<script src="js/upload.js"></script>
</body>
</html>
Raw
JqueryXHR.js
$(document).ready(function () {
const data = new FormData();
data.append("image", image.files.length ? image.files[0] : "");
data.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
$.ajax({
type: "POST",
url: HOST_MODULE,
data,
dataType: "json",
contentType: false,
processData: false,
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener(
"progress",
function (event) {
if (event.lengthComputable) {
var percentComplete =
(event.loaded / event.total) * 100;
$("#progressBar")
.css("width", percentComplete + "%")
.text(Math.round(percentComplete) + "%");
}
},
false
);
return xhr;
},
success: function (response) {
KTApp.unblock(cardData.getSelf());
Swal.fire("Informasi!", "Data berhasil di simpan!", "success");
// setTimeout(function() {
// window.location.href = HOST_MODULE + '?product_id={{ $product->id }}';
// }, 2000);
},
error: function (xhr) {
const { status, statusText, responseText, responseJSON } = xhr;
KTApp.unblock(cardData.getSelf());
$("#progressBar").css("width", "0").text("Upload Failed");
switch (status) {
case 422:
const errors = responseJSON.errors;
$.each(errors, function (index, value) {
$("<li/>").text(value[0]).appendTo("#listMessageError");
});
$("#showMessageError").show();
break;
case 419:
Swal.fire(statusText, responseJSON.message, "warning");
break;
case 500:
Swal.fire(statusText, responseJSON.message, "error");
break;
default:
break;
}
},
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment