cancel.addEventListener('click',(xhr.abort));
it should be callback function
try this:
cancel.addEventListener('click', function(e){
xhr.abort()
})
On Monday, 30 October 2023 at 21:10:03 UTC+5:30 Gokul G.M wrote:
> <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.0">
> <title>Document</title>
> <link rel="stylesheet" href="
> https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css";
> integrity=
> "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
> crossorigin="anonymous">
>
> <!-- Latest compiled and minified JavaScript -->
> <script src="
> https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";></script
> >
> <script src="
> https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
> <https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js>"
> integrity=
> "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
> crossorigin="anonymous"></script>
> <script src="
> https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js";
> integrity=
> "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
> crossorigin="anonymous"></script>
> </head>
> <style>
> .not-visible{
> display: none;
> }
> </style>
> <body>
> <form action="" method="post" id="upload_form">
> {% csrf_token %}
> {{form.as_p}}
> <input type="submit" value="Upload" class="btn btn-primary">
> <button type="submit" id="cancel" aria-placeholder="cancel">cancel
> </button>
> </form>
> <div class="container not-visible progress" id="progress">
> </div>
> <script>
> const uploadForm = document.getElementById('upload_form');
> const input_file = document.getElementById('id_image');
> const progress_bar = document.getElementById('progress');
> const cancel=document.getElementById('cancel')
>
> $("#upload_form").submit(function(e){
> e.preventDefault();
> $form = $(this)
> var formData = new FormData(this);
> const media_data = input_file.files[0];
> if(media_data != null){
> console.log(media_data);
> progress_bar.classList.remove("not-visible");
> }
>
> $.ajax({
> type: 'POST',
> url:'/',
> data: formData,
> dataType: 'json',
> beforeSend: function(){
>
> },
> xhr:function (){
> const xhr = new window.XMLHttpRequest();
> xhr.upload.addEventListener('progress', e=>{
> if(e.lengthComputable){
> const percentProgress = (e.loaded/e.total)*100
> ;
> console.log(percentProgress);
> progress_bar.innerHTML = `<div
> class="progress-bar progress-bar-striped bg-success"
> role="progressbar" style="width: ${percentProgress}%"
> aria-valuenow="${percentProgress}" aria-valuemin="0"
> aria-valuemax="100"></div>`
> }
> });
> cancel.addEventListener('click',(xhr.abort));
> return xhr
> },
> success: function(response){
> console.log(response);
> uploadForm.reset()
> progress_bar.classList.add('not-visible')
> },
> error: function(err){
> console.log(err);
> },
> cache: false,
> contentType: false,
> processData: false,
> });
> });
>
> </script>
> </body>
> </html>
>
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/493881e1-0742-4cdb-bd60-98decc440fben%40googlegroups.com.
