Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# HTML5 MVC3
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 20-Dec-11 19:39pm
vishal_h1.6K

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 410
1 Abhinav S 260
2 Nirav Prabtani 252
3 Andreas Gieriet 155
4 Dave Kreskowiak 155
0 OriginalGriff 7,545
1 Sergey Alexandrovich Kryukov 6,757
2 Maciej Los 3,909
3 Peter Leow 3,693
4 CHill60 2,712


Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 23 Dec 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100