Question

I have a Cancel button which appears when the user is uploading a file. If the user wishes to cancel a file upload then they can by clicking on the Cancel Button and it would display the cancel message to user.

The only problem when attempting this is that it is stating that cancel_image_file_name is undefined in the stopImageUpload function where I want to display the message. But I did define this in the startImageUpload function. So my question is that how can I grab cancel_image_file_name from the startImageUpload function and define it in the stopImageUpload function?

Below is the code showing the 2 functions:

startImageUpload function:

var cancelimagecounter = 0;

function startImageUpload(imageuploadform, imagefilename){

    cancelimagecounter++;

            var _cancelimagecounter = cancelimagecounter;

    $('.imageCancel').on("click", function(event) {
        var cancel_image_file_name = $(this).attr('cancel_image_file_name');

    return stopImageUpload(2, cancel_image_file_name);

});       
      return true;
}

stopImageUpload function:

var imagecounter = 0;

function stopImageUpload(success, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully!</span><br/><br/>';      
         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
      }
      else if (success == 2){
          result = '<span class="imageemsg">' + cancel_image_file_name + ' Upload Was Cancelled!</span><br/><br/>';
      }
      else {
         result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>';
      }


      return true;   
}

Answer 1

In JavaScript variables have function-level scope, to get cancel_image_file_name in your other function too, define it outside of both functions.

---

BTW, you can use imagefilename from your stopImageUpload function because you are already passing it to that function:

return stopImageUpload(2, cancel_image_file_name);

So in your stopImageUpload function, change line:

result = '<span class="imageemsg">' + cancel_image_file_name + ' Upload Was Cancelled!</span><br/><br/>';

To:

result = '<span class="imageemsg">' + imagefilename + ' Upload Was Cancelled!</span><br/><br/>';