Click here to Skip to main content
15,877,168 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
i want to abort particular file on click of cancel button...but it will abort on first button instance not for cancel button for that file upload...i want to apply closure for this situation which will abort only those file which cancel button is click...here is my code...
function uploadFile(fileuploadobj){


 var fileParentDivobj = $(Divfileuploadobj).closest(".ChildUploadDiv");
                         
 myfileupload(fileuploadobj.files[0]);

 function myfileupload(file) {


  

                           
                        /************** Added Previous Functionality *******************************/
                              // Uploading - for Firefox, Google Chrome and Safari
				            xhr = new XMLHttpRequest();


				            // Update progress bar
				            xhr.upload.addEventListener("progress", uploadProgress, false);

				            function uploadProgress(evt) {

				                if (evt.lengthComputable) {
				                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
				                  
                         //added now for showing how much file is sending
                                    bytesUploaded = evt.loaded;
                                    var bytesTransfered = '';
                                    if (bytesUploaded > 1024*1024)bytesTransfered = 

                                    (Math.round(bytesUploaded * 100/(1024*1024))/100).toString() + 'MB';else if (bytesUploaded > 1024)

                                    bytesTransfered = (Math.round(bytesUploaded * 100/1024)/100).toString() + 'KB';
                                    else
                                    bytesTransfered = (Math.round(bytesUploaded * 100)/100).toString() + 'Bytes';

                                    $(fileParentDivobj).find(".DataSending").html(bytesTransfered + " of "+ fileSize);
                                    //for my progrss bar

                                    //for my progrss bar

                                     $(fileParentDivobj).find("progress").attr('value',evt.loaded);
                                     $(fileParentDivobj).find("progress").attr('max',evt.total);
                                     $(fileParentDivobj).find(".ImgDiv").find("span").html(percentComplete + '%');
				                }
				            }

//				            // File load event
				            xhr.upload.addEventListener("load", loadSuccess, false);

				            function loadSuccess(evt) {
                            	// Parse json.
                               
	      
                              $(fileParentDivobj).find(".ImgDiv").find("span").html('Saving...');
                                alert(evt.target.responseText);
				             //  alert("Load");
                                }



                            //handle actual servr response

                             xhr.onreadystatechange = stateChange;
                             // Show upload complete or upload failed depending on result
                                    function stateChange(event) {
                                        if (event.target.readyState == 4) {
                                            if (event.target.status == 200 || event.target.status == 304) {
                                             
                                             //change the text of progress bar to uploaded
                                             $(fileParentDivobj).find(".ImgDiv").find("span").html("uploaded");
                                              //Add the Delete Button
                                             $(fileParentDivobj).find(".CDivDeletButtom").find("form").append("<button class='BtnDeleteUpload'>Delete</button>");        
                            
                                            }

                                        }
                                    }

//                                //handling error


                                xhr.addEventListener("error", uploadFailed, false);
                            
                                xhr.addEventListener("abort", uploadCanceled, false);

//These function i want to call on every cance button instance
           function cancel()
           {
            xhr.abort();
           }

                                function uploadFailed(evt) {
                                    alert("There was an error attempting to upload the file.");
                                     $(fileParentDivobj).find(".ImgDiv").find("span").html('FAILED');
                                    }

                                function uploadCanceled(evt) {
                                        alert("The upload has been canceled by the user or the browser dropped the connection.");
                                    }


				            xhr.open("POST", "@Url.Action("Upload","Home")", true);

				            // Set appropriate headers
				            xhr.setRequestHeader("Cache-Control", "no-cache");
				            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
				            xhr.setRequestHeader("Content-Type", "multipart/form-data");
				            xhr.setRequestHeader("X-File-Name", file.fileName);
				           // xhr.setRequestHeader("X-File-Size", file.fileSize);
				            xhr.setRequestHeader("X-File-Type", file.type);
                           xhr.setRequestHeader("X-File", file);
				            // Send the file (doh)
				            xhr.send(file);
                           return xhr ;

				        } //my fun myfileupload()

				    }
    
//on every file selection
   $("input[type=file]").live("change",function(){
  
 $(".CancelUpload").live("click",(function () {
 //it can abort current ifle upload
 uploadFile(this).cancel();
 }));
                           
 });    //  $("input[type=file]") End
Posted

1 solution

I solve it..it works..need to call abort method on current cancel button on which we have to abort the file upload..
C#
//These function i want to call on every cance button instance
          $(this).find(".CancelButtonClass").click(function()
           {
            xhr.abort();
           });
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900