Issue with Blueimp Jquery FileUpload For Individual Uploads

I am having issues with individual upload cancels for blueimp jquery fileupload library, have gone through the library and the functionality isn't well documented. I don't know if anyone also has an experience with blueimp fileupload, please help me out:

The code for the Upload is:

'use strict';

$(function (){

  function previewDataDetail(img,imgSize,imgName){
    return `
      <div class="col-sm-12" id="progress_img">
        <img src="${img}">
        <span>${imgSize}</span>
        
        <div class="value_hold" style="display:none">
        <p id="preview_name">${imgName}</p>
        
        </div>
        
        <button class="btn btn-dark">Cancel</button>

        <div class="progress">

          <div class="progress-bar progress-bar-striped progress-bar-animated" id="progress_bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style= "width:100%"></div>

        </div>

      </div>
    
    `
  }

  function abortUpload(e){
    e.preventDefault();
    var template = $(e.currentTarget).closest(
          '#progress_img'
        ),
        data = template.data('data') || {};
      data.context = data.context || template;
      if (data.abort) {
        data.abort();
      } else {
        data.errorThrown = 'abort';
        this._trigger('fail', e, data);
      }
  }

  $("#uploadTrigger").click(function(){
    // const url = "{% url 'property_pic' %}";
    // const csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
    // $("#fileupload").attr('data-url', url);
    // $("#fileupload").attr('data-form-data', csrf_token);
    $("#fileupload").click()
  });
      $("#fileupload").fileupload({
          dataType: 'json',
          sequentialUploads: true,
          add: function(e,data){
            var previewImg = data.files[0];
            var previewUrl = URL.createObjectURL(previewImg);
            $("#formInput").append(previewDataDetail(previewUrl,previewImg.size,previewImg.name))
            data.context = $("#progress_img #progress_bar")
            data.submit();

            var jqXHR = data.submit().error(function (jqXHR, textStatus, errorThrown){
              if (errorThrown === 'abort'){
                alert('This upload has been cancelled')
              }
            })

            $("#progress_img button").click((e) => {
              e.preventDefault();
              jqXHR.abort()
              const snip = e.currentTarget.closest("#progress_img preview_name")
              console.log(snip);
             
              // data.originalFiles.forEach(i => {
              //   if(i.name == e.target.closest('.value_hold'))console.log(previewImg.name);
              // })

              // console.log(e.currentTarget.closest('#progress_img'));
              e.target.closest('#progress_img').remove()
            }) 
          },
          progress: function(e,data){
            var progress = parseInt((data.loaded / data.total) * 100, 10);
            // console.log(data.context.closesr("#progress-bar"))
            data.context.css("width", progress + "%");
            data.context.attr('aria-valuenow', progress + "%")
          },
          done: function(e, data){
            $("#progress_img").remove()
            if (data.result.is_valid){
              console.log('I got saved to the db')
            }else{
              const error = data.result.message
              console.log(error)
              if(error){
                $(`<p class="alert alert-danger">${error}</p>`).insertBefore($("#formInput"))
              }
              let replacer = $(".alert")
              if(replacer.length > 1){
                replacer.remove();
                $(`<p class="alert alert-danger">${error}</p>`).insertBefore($("#formInput"))
              }
            }
          }
      })
  })

The code for the template:

{% extends 'shared/base_profile.html'%}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
  Upload Property Pictures
{% endblock title %}

{% block content %}
  <div class="row" id="formHolder">
    <div class="col-sm-8" id="formCont">
      <form id="formInput" action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% if form %}
          <div id="uploader_expand">
            <label>{{form.images.label}}</label>
            {{form.images}}
            
          </div>
        {% endif %}
          <!-- <input type="hidden" id="delUpload" name="filesort"> -->
        <!-- <input type="submit" value="Upload" id="submit" class="btn btn-primary"> -->
      </form>
      <button class="btn btn-primary" id="uploadTrigger"><span class="glyphicon glyphicon-cloud-upload">Upload photos</span></button>
      <!-- <div id="alertMsg" class="alert" style="display: block;"></div> -->
    </div>
    
    
    
    <div class="col-sm-4">

    </div>
  </div>
  <div class="row" id="confirmRow">
    <!-- <div class="col-sm-8 hidden" id="confirm">
      <label class="hidden" id="confirmerLabel">Finished Preview</label>
      <input type="checkbox" class="hidden" id="confirmer">
    </div> -->
    <div class="col-sm-4">
      <!-- For Search Field etc -->
    </div>
  </div>
  <div class="row" >
    <div class="col-sm-8" id="upload_row">
      {% if images %}
      {% if images|length == 1 %}
        <div class="col-sm-3" id="uploaded_files">
          <img src="{{image.images.url}}" alt="{{images.post.slug}}">
        </div>
      {% elif images|length > 1 %}
        {% for image in images  %}
          <div class="col-sm-3" id="uploaded_files">
            <img src="{{image.images.url}}" alt="{{image.post.slug}}">
          </div>
        {% endfor %}
      {% endif %}
      {% endif %}
    
    </div>
    <div class="col-sm-4">
      <!-- For Search Field -->
    </div>
  </div>
{% endblock content %}