Issue with cancel for individual uploads

[Walexero]

I have tried implementing a cancel feature for individual uploads within the add section of the code but it cancels out all the uploads. Is there a better way to implement this feature. This is my code:

$(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"))
              }
            }
          }
      })
  })

[sebastian-marinescu]

Hello @Walexero, I think you posted in the wrong repository? Your code doesn't seem to have anything to do with https://github.com/blueimp/Gallery

[Walexero]

Thanks for this, was meant to post in @blueimp jquery-upload

[sebastian-marinescu]

Ok, nice. Then I'll vote to close this ;)