How to cancel File Upload – from Client, Server and UI

Hi,

I am facing couple of issues relating to cancelling file upload:

1. The Cancel (X) button is not visible in the UI.

2. Returning false in js events igFileSelected or igFileUploading does not seem to cancel the file upload process.

Am I missing something? Also, I would like to know how to cancel a file upload from a server event. I am using WebUpload in mode “Single”.

 

<ig:WebUpload ID=”WebUpload1″

runat=”server”

AutoStartUpload=”true”

ShowFileExtensionIcon=”true”

OnUploadFinished=”WebUpload1_UploadFinished”

ClientEvents-FileUploaded=”igFileUploaded”

ClientEvents-FileUploading=”igFileUploading”

LabelAddButton=”Upload File”

ClientEvents-FileSelected=”igFileSelected”

onuploadstarting=”WebUpload1_UploadStarting”>

</ig:WebUpload>

 

 

function igFileSelected(sender, eventArgs)

{

      //Logic goes here based on eventArgs.filePath

return false;

}

function igFileUploading(sender, eventArgs)

{

//Logic goes here based on eventArgs.filePath

return false;

}

 

Awaiting reply,

Thanks,

Sharon

Hi Sharon,

1) About the cancel button please check our help.You can inspect the DOM element with FireBug, DeveloperTools or any other tool you prefer.

2) About cancelling upload we had such a question before.

3) You can cancel upload from the server side events:

UploadStarting and UploadFinishing – as setting event argument property Cancel to true.

Thanks,

Miro Hristov

Hi Miroslav,

Thanks for your reply.

Regarding cancelling upload, the link you provided, although is related to my query, has no verified answer.

My requirement is pretty simple. I have set  AutoStartUpload="true" in my web upload control. When user selects a file, I want to run a validation on the file name and stop upload if name does not match a criteria (Please note that this is NOT a file extension validation). I want to do this in client side.

I have tried the following if my validation fails:

1. return false in igFileSelected and check eventArgs.fileStatus  in igFileUploading

2. Added code $("#<%=WebUpload1.ClientID %>").igUpload("cancelUpload", 1); in igFileSelected and check eventArgs.fileStatus  in igFileUploading

In both cases, the fileStatus is 2 which accordiing to this link means File Upload is finished.

Can you please suggest a solution?

Thanks,

Sharon

Hi Sharon,

 Here is a little sample:

$('#uploader').igUpload({
 …

 fileSelected: function (event, args) {

// part of code where you make filename validation or what you want
  if (args.filePath.indexOf('test') !== -1) {
   $(this).igUpload('cancelUpload', args.fileId);
  }
  
 },

 …
}

The idea is that you bind to the client-side event fileSelected. From the args parameter you can get which is fileId(identifier which you can use for canceling upload. Also the file identifier is used in the internal collection to get information for the file). In the sample above we have checked whether the file name contains test. But you can write your own custom validation logic and then it is called public method cancelUpload with parameter fileId to tell the uploader which exactly file you want to cancel. FileUploading event is not fired in this case but it is called the event fileUploadAborted.

Thanks,

Miro Hristov

Hi Miro Hristov,

Thanks!!

I was able to achieve it based on your code. Here is the complete set of code I used:

//Page Load

function pageLoad() {

          //Hook function to the file selected event

          $('#<%=WebUpload1.ClientID %>').igUpload({

                fileSelected: function(event, eventArgs) {

if (!isValidFileName(eventArgs.filePath)) {

                        alert('File Name Validation failed!')

                        $(this).igUpload('cancelUpload', eventArgs.fileId);

                    }

                }

            });

        }

Also, I had some code written in the igFileUploaded event (which is still fired). So I checked that as well:

function igFileUploaded(sender, eventArgs) {

     if (eventArgs.filePath != undefined && eventArgs.filePath != '') {

            //Code to be fired only if file name validation is success

     }

}

I have not done exhaustive testing on this, but it looks pretty much robust.

Thanks,

Sharon 

Hi Miro Hristov,

I have  same issue . I was looking for server side event to cancel the fil upload.

as said we can use event args in file uploading event

I made e.cancel=true.

but no use, file is  geting uploaded and progress bar on page is showing right mark which is supossed to show cross mark. please help me with this issue

 

Thanks&Regards,

Srikanth Maram