CODEWITHSUNDEEP
javascriptjqueryfile-upload
user1324106
user1324106

Reputation: 181

How to cancel this file upload below

I have a a form which contains a file input, upload button and cancel button:

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='stopImageUpload(this);' class='imageuploadform' >
<p class='imagef1_upload_form' align='center'><label>Image File: <input name='fileImage' type='file' class='fileImage' /></label>
<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
</p>
<p class='imagef1_cancel' align='center'>
<label><input type='button' name='imageCancel' class='imageCancel' value='Cancel' /></label>
</p> 
<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe>
</form>

I have set up the php to upload the file and all that and the uploading works perfectly. The uploading starts and stops because of the javascript functions below but what my question is that how can it be coded so that when the user starts uploading (startImageUpload() function), if the user wishes to cancel the upload during uploading by clicking on the cancel button, then it stops the uploading (I believe it needs to navigate to the stopImageUpload() function but I am not sure if this is correct or not).

I have set up everything to display on the screen correctly, I just need to know what is the right function to be able to successfully cancel an upload as well as displaying the message 'There is an error during uploading' which is already in the stopImageUpload() function.

Below is the function where the upload starts:

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;
      return true;
}

Below is the function where the upload finishes:

function stopImageUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }
      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');

      return true;   
}

Upvotes: 1

Views: 2078

Answers (1)

Oldskool
Oldskool

Reputation: 34877

OK, so you already have the function and the click handler, so what's stopping you from calling your function within your event handler?

Assuming that the stopImageUpload function is within the same file (or at least loaded on that page):

$(".imagecancel").on("click", function(event) {
    console.log("clicked");
    event.preventDefault();
    stopImageUpload(); // Just call it?!
});

Also, make sure to have the browser stop sending it's current request (upload) in your stopImageUpload function:

if(navigator.appName == "Microsoft Internet Explorer") {
    window.document.execCommand('Stop');
} else {
    window.stop();
}

Upvotes: 3

Related Questions