cancel upload button for image upload

Question

I have created a progress bar to show the progress of the file upload. Now I am trying to create a "cancel upload" button next to progress bar.

Code for the progress bar JQuery is:

(function () {

                  var bar = $('.bar');
                  var percent = $('.percent');
                  var status = $('#status');
                  var percentVal = '0%';
                  var x = 1;
                  var y = null; // To keep under proper scope


                  $('form').ajaxForm({
                      beforeSend: function () {
                          status.empty();
                          percentVal = '0%';
                          bar.width(percentVal)
                          percent.html(percentVal);
                      },
                      uploadProgress: function (event, position, total, percentComplete) {

                          percentVal = percentComplete + '%';
                          if (percentVal != '100%')
                          {
                            bar.width(percentVal)
                            percent.html(percentVal);
                          }


                          //console.log(percentVal, position, total);
                      },
                      //success: function () {
                      //    var percentVal = '95%';
                      //    bar.width(percentVal)
                      //    percent.html(percentVal);
                      //},
                      complete: function () {

                          percentVal = '100%';
                          bar.width(percentVal)
                          percent.html(percentVal);
                          delay(500);

                          location.reload();
                      }
                  });

              })();

now for the cancel button input tag:

 $(document).ready(function () {

        $('#cancel').click(function () {

            location.reload();

        });

    });

Jquery Pulgins:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="http://malsup.github.com/jquery.form.js"></script>

Now if I click on 'cancel' button the image still gets upload. Can someone please help me out for the 'cancel' button. Thanks

Answer 1

thanks a lot for the help.. after spending couple of mins searching for the solution i came up with this solution.. and its working.

(function () {

                  var bar = $('.bar');
                  var percent = $('.percent');
                  var status = $('#status');
                  var percentVal = '0%';
                  var x = 1;
                  var y = null; // To keep under proper scope


                  $('form').ajaxForm({
                      beforeSend: function (xhr) {
                          status.empty();
                          $('#cancel').click(xhr.abort) // for cancel button
                          percentVal = '0%';
                          bar.width(percentVal)
                          percent.html(percentVal);

                      },
                      uploadProgress: function (event, position, total, percentComplete) {

                         percentVal = percentComplete + '%';

                            bar.width(percentVal)
                            percent.html(percentVal);

                            if (percentVal == '100%') {
                                $("#cancel").hide();

                            }

                      },
                      success: function (xhr) {
                          $("#cancel").hide();
                          $('#cancel').click(xhr.abort)

                      },
                      complete: function () {


                          location.reload();
                      }
                  });

              })();

Answer 2

(function () {

              var bar = $('.bar');
              var percent = $('.percent');
              var status = $('#status');
              var percentVal = '0%';
              var x = 1;
              var y = null; // To keep under proper scope


              $('form').ajaxForm({
                  beforeSend: function () {
                      status.empty();
                      percentVal = '0%';
                      bar.width(percentVal)
                      percent.html(percentVal);
                  },
                  uploadProgress: function (event, position, total, percentComplete) {

                      percentVal = percentComplete + '%';
                      if (percentVal != '100%')
                      {
                        bar.width(percentVal)
                        percent.html(percentVal);
                      }


                      //console.log(percentVal, position, total);
                  },
                  //success: function () {
                  //    var percentVal = '95%';
                  //    bar.width(percentVal)
                  //    percent.html(percentVal);
                  //},
                  complete: function () {

                      percentVal = '100%';
                      bar.width(percentVal)
                      percent.html(percentVal);
                      delay(500);

                      location.reload();
                  }
                  $('#cancel').click(function () {

                    // Abort the data upload if it's running.
                    data.abort();

                    // Overwrite the plugin's default submit function.
                    data.submit = function () { return false; };

                   });
              });

          })();       

});

I think this should work now.

PS: Found the solution in Implementing Remove Buttons for jQuery-File-Upload

You may find it suitable for further reading.

Answer 3

You could create a hidden input box right in the HTML of the form

<input id="textHiddenCancel" hidden type="text" value=""/>

Modify your onclick event for your cancel input button as follows:

<input id="buttonCancel" type="button" value="Cancel Upload"
       onclick="textHiddenCancel.value = 'cancel';" />

In your progress bar loop add:

if ( textHiddenCancel.value == 'cancel' ) {
    // code to redirect to "you have cancelled" HTML page
    //   or to display a cancelled message on the form
    //   or whatever.
}